Usability and accessibility » Colors and contrast

Sebastian Greger This is a living document
Last update:

Sufficient contrast between content and background is one of the most basic, yet still commonly ignored, accessibility features of any design.

Color blindness

Contrast

Resources

Tools

There are plenty of tools out there to aid designers in optimizing their colour palettes for accessibility. My personal go-to-addresses are:

Very basic, but efficient — calculates the contrast between two colours and allows to adjust their brightness until they comply with WCAG criteria.

EightShapes Contrast Grid contrast-grid.eightshapes.com

This tool is particularly handy, as it visualizes all possible combinations of a defined palette and its contrast values.

Other tools include:

Who Can Use whocanuse.com
“Who Can Use” differs from other colour contrast tools in that it not only highlights the contrast of a chosen colour combination, but also presents instant statistics what share of users might be negatively impacted by it and simulates how they would see it.

…and here’s an extensive list:

These tools are also built into developer tools in browsers:

Halation

Sometimes too much of something good is not great either. Very bright text on very dark backgrounds in particular may cause issues to up to 50% of users, despite such “extreme contrast errors” not being detected by WCAG criteria or automated testing software:

While high contrast is important for accessibility, this article is a good reminder why overdoing it is not a good […]

This “halation” effect for example comes to play when designing for the so-called “dark mode”:

“Is dark mode impacting your users”, Maygen Jacques asks in this article about some less-considered aspects of […]

I'm Sebastian, Sociologist and Interaction Designer aiming to bring toge­ther social science and design for inclusive, privacy-focused, and sustainable "human-first" digital strategies. This is my "digital garden" with carefully curated resources. For a more stream-like outlet, see my journal.

My monthly email newsletter has all of the above, and there are of course also an RSS feed and Twitter.