Examples of high color contrast (easy to see) and low contrast (difficult to see)
Image description: 3 vertical rectangles (green, light orange, and purple) outlined in black. The letters, "ABC 123" are repeated 4 times on the green rectangle in light grey, and on the purple rectangle in a faint white - both of these are difficult to see. These letters are repeated on the light orange rectangle in black - which is higher contrast and easier to see.

This page is in progress -

If you would like to contribute or make a case to prioritize this page, please fill out the form below.

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.

This references WCAG criteria 1.4.3 Contrast (Minimum) (Level AA), 1.4.6 Contrast (Enhanced) (Level AAA), 1.4.11 Non-Text Contrast (Level 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:

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.

Button contrast

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.

Other tools

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.


No credits yet. But this could be you!
No items found.

Contribute and Give Feedback

If you would like to provide feedback or contribute content on this resource, please fill out the form below.

Thank you, your submission has been received!
Oops! Something went wrong while submitting the form. Please check your internet connection and try again.

If you continue to encounter issues, please reach out to alexyingchen(at)gmail.com.