High contrast colours
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 they 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
Use a color contrast checker in the design stages. Here are some contrast checkers in my preferred tool (Figma):
- Figma — A11y — Color Contrast Checker
- Figma — Able — Friction free accessibility
- Figma — Stark — The suite of integrated accessibility tools
There are a few important things to keep in mind with certain colors:
- Make sure the accent color is high contrast, as this is used for buttons and links
- Make sure the body text is high contrast, as this will account for most of the content
- Make sure status and error messages are high contrast, as they contain important information
Sometimes, the value of the brand colors that you are expected to use are mid-tone values (meaning on a spectrum of black to white, the value is similar to the grey in the middle). This is difficult to work with because mid-tone values tend to have low contrast with other colors. In these cases, I recommended generating a series of tints of the same color. This will provide light and dark versions that you can use.
- Tint and Shade Generator
- Shadowlord — Tints and Shades Generator Tool
For graphics, I recommend a tool called Colorable (my favorite contrast checker!). Colorable allows you to change the hue, saturation, and lightness of the colors. If you are dedicated to a color but the contrast is almost there, those sliders help make some tweaks (not a paid endorsement).
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. In some cases, perhaps the contrast of the button text is sufficient, but the contrast between the button background and the page background is not.
One simple way to approach button contrast is to use opposite colors. 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 exact same color, matching light-dark-light or dark-light-dark helps ensure the contrast accessibility.
Links: