Accessible colors for user interfaces
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 impairments, 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.
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 variant and brightness gradation.
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 particularly 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.
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%).
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.
