This page is in progress -
Why This is Important
High contrast makes text and UI elements easy to read and understand. It is primarily for people with low vision and reading disorders.
Especially considering that a significant amount of people have some sort of vision correction, high contrast benefits anyone who experiences content visually.
According to WCAG, the text contrast needs to be at least 4.5 to pass AA and at least 7.0 to pass AAA. Some people have given me feedback that they really prefer at least 10.0 or higher. The contrast of other elements, such as buttons and diagrams, needs to be least 3.0 to pass AA.
How to Implement This
Use a color contrast checker and check the contrast of everything.
Setting Colors and Checking Contrast
In my product design workflow, I usually create a design system using components and color styles in Figma. As I create my components, I check the contrast as I go using a combination of the following plugins:
- Figma - A11y - Color Contrast Checker
- Figma - Able - Friction free accessibility
- Figma - Stark | The suite of integrated accessibility tools
Product design typically uses a few brand accent colors and what I call "functional" colors (typically shades of grey for things like background elements and text). In many cases, the brand color's tone is in the middle and therefore difficult to pair with other colors. That's because very light colors go well with very dark colors, and vice versa.
So in these cases, I usually create a range of tones from the same hue that I use if I need a light or dark version of the same color:
For graphics, I use a tool called Colorable (my favorite contrast checker!). Colorable allows me to change the hue, saturation, and lightness of the colors so if I'm going for a particular color but it's not quite accessible I can tweak one of those factors.
Potentially the most confusing contrast rule has to deal with buttons because you need to account for both the contrast of the button against the background and the text against the button.
The most straightforward way I approach this is by switching up the value for each element. Use light text with a dark button and a light background. Or vice versa, dark text with a light button and a dark background. Even if the text and background are not the same color, this almost guarantees that both contrast values are sufficient.
These are some color contrast tools that I like but don't use as often:
How to Test This
When testing websites, my preferred tool is tota11y, which marks the contrast value and success/failure on the page itself. Other tools such as Deque Axe, WebAim WAVE, and IBM Accessibility Assessment all test for color as well. Contrast is a ubiquitous accessibility rule and is likely present on any automated tool.
Important note! Keep in mind that these automated checkers cannot detect the contrast between text and image. They are more likely to check the contrast of the background color of the page. This may result in WCAG failures where it’s still technically accessible.
Contribute and Give Feedback
If you would like to provide feedback or contribute content on this resource, please fill out the form below.