Usability and accessibility » Colors and contrast

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:

Other tools include:

Who Can Use whocanuse.com

Bookmark: “Who Can Use”

“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:

Accessibility for People with Astigmatism essentialaccessibility.com

Bookmark: “Accessibility for People with Astigmatism”

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”:

Why dark mode isn’t as accessible as you might think codeenigma.com

Bookmark: “Why dark mode isn’t as accessible as you might think”

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

Dark mode

In addition to contrast considerations (see “halation” above), implementing “dark mode” requires some thought in order to truly create an accessible feature. Some well-documented reference implementations: