Skip to content

Accessible colors for user interfaces

This post was originally published on medium.com

WCAG Color Contrast

As a designer, you should use high contrast colors. It will help users of websites and apps to perceive the content, regardless of visual impariments, technical restrictions, and external influences. WCAG is a standard that should help designers defining a distinct contrast ratio.

Three levels can be reached:

“A” for large text and UI elements, which require a contrast ratio of 3: 1.

“AA” is required for regular text. It requires a contrast ratio of 4.5: 1.

“AAA” requires a contrast ratio of 7: 1.

WCAG contrast ratio of white on HSB colors. Brightness from 100% to 30%; All colors with 100% saturation
WCAG contrast ratio of white on HSB colors. Brightness from 100% to 30%; All colors with 100% saturation

Hue, Saturation, and Brightness

We are searching for colors that can suit our products requirements.
For that reason, we need to understand which colors are available and how they behave.

To get an overview of all colors, we look at the whole color wheel using the HSB color space. With 10°-steps, we move around the entire range of colors. In gradations of 10%, these colors become darker and, therefore, more contrasting. All colors stay at 100% saturation. I measured the WCAG contrast ratio for white text on each color varian and brightness gradation.

36 colors that reach the WCAG AA requirements and a second line of the same colors with improved brightness
36 colors that reach the WCAG AA requirements and a second line of the same colors with improved brightness
36 colors that reach the WCAG AA requirements arranged based on their brightness
36 colors that reach the WCAG AA requirements arranged based on their brightness

Colors for AA contrast ratio

With this method, we have now selected colors, which approximates ​​how specific colors behave. Afterward, I improved the colors’ brightness until we come as close as possible to the target contrast ratio of 4.5: 1 to keep the colors bright and clear.

Talking about colors

Red remains fairly bright (B90%) with a contrast ratio of 4.5: 1. Yellow is immediately no longer recognizable as yellow. It is not particulary suitable for digital use since this color cannot be reproduced in RGB very well. On the other hand, Green provides very diverse tones and is easy to recognize but relatively dark for WCAG AA (B50%). Blue, Purple, and Violet are particularly suitable for high-contrast text and UI elements, as they already offer good contrast and so appear exceptionally pure and bright.

36 colors that reach the WCAG AAA requirements and a second line of the same colors with improved brightness
36 colors that reach the WCAG AAA requirements and a second line of the same colors with improved brightness
36 colors that reach the WCAG AA requirements arranged based on their brightness
36 colors that reach the WCAG AA requirements arranged based on their brightness

Colors for AAA contrast ratio

When looking for an even more apparent contrast, it becomes more difficult. The method proves to be even more imprecise here, and again we can set the colors significantly brighter by a few percent.

Talking about colors

Like the AA contrast colors, Red, Violet, and Purple remain relatively bright (B70%) with high contrast and are easily recognizable. Green is already very dark (B40%) and is no longer very apparent. The most transparent colors are the Blue tones, which can be recognized most clearly with almost constant brightness (B100%).

12 colors that fit either AA or AAA contrast requirements
12 colors that fit either AA or AAA contrast requirements

A good starting point

Based on our approach, we found a couple of very suitable colors. However, it will not be sufficient to adopt them. When choosing colors, we have to use the colors in context and test them to decide. If there is already a brand color, the colors should be adjusted. Also, the accessibility for color-blind users must be checked. To find the right colors based on the colors we saw, the 10°-Hue steps can be broken up to look for more suitable colors between these color tones. The saturation does not have to stay at 100% either. It can be matched to an existing color to achieve a harmonious appearance.

Categories

Blog

%d bloggers like this: