Design for all » Inclusive usability » 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

We are Colorblind - Making the world a better place for the colorblind

wearecolorblind.com/

Contrast

Resources

Color accessibility: tools and resources to help you design inclusive products, by Stéphanie Walter - UX designer & Mobile Expert.

stephaniewalter.design/blog/color-accessibility-tools-resources-to-design-inclusive-products/

Tools

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

WebAIM: Color Contrast Checker

webaim.org/resources/contrastchecker/

EightShapes Contrast Grid

contrast-grid.eightshapes.com/

Other tools include:

Accessible Colors | WCAG 2.0 AA and AAA color contrast checker

accessible-colors.com/

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.
2020

…and here’s an extensive list:

Color Contrast Tools | Web Axe

webaxe.org/color-contrast-tools/

These tools are also built into developer tools in browsers:

Contrast ratio in devtools

remysharp.com/2017/08/17/contrast-ratio-in-devtools

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

While high contrast is important for accessibility, this article is a good reminder why overdoing it is not a good idea:
There is a myth about white text over black backgrounds being the best color contrast combination for accessibility, but in […]
2021

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

“Is dark mode impacting your users”, Maygen Jacques asks in this article about some less-considered aspects of designing for “dark mode” — specifically the impact of fuzzy vision from white text on black background for users with […]
2021

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:

How I built a dark mode toggle

hidde.blog/dark-light/

Progressively-enhanced dark mode

darins.page/articles/progressively-enhanced-dark-mode

Last edited: Mar 2025