How Dark Mode Affects Accessibility for Colorblind Users

Color blindness, more accurately called color vision deficiency, affects roughly 1 in 12 men and 1 in 200 women of Northern European descent, according to Colour Blind Awareness. Most have trouble telling reds and greens apart. Switching a site to dark mode changes how colors look against the background, which can make some combinations easier and others much harder.

The main types

• Deuteranomaly and deuteranopia: reduced green sensitivity. The most common.
• Protanomaly and protanopia: reduced red sensitivity. Reds also look darker.
• Tritanomaly and tritanopia: blue-yellow confusion. Rare.
• Achromatopsia: little or no color vision. Very rare.

What goes wrong in dark mode

• Red on dark gray: people with protan color blindness see red as darker, so red text or error icons can almost disappear on a dark background.
• Red and green states: "success" and "error" colors that differ only in hue look alike, in light or dark mode.
• Dark blues and purples lose contrast against near-black backgrounds for everyone, especially with tritan color blindness.
• Charts: lines and bars recolored for dark mode may become harder to tell apart.

How to design for both

1. Never rely on color alone. Add icons, text labels, patterns or underlines. This is WCAG's Use of Color requirement. See designing for colorblind users.
2. Use lighter, softer reds and greens in dark mode, and check their contrast separately.
3. Prefer color pairs that differ in lightness, such as blue and orange, rather than red and green.
4. Meet contrast ratios for text (4.5:1) and icons (3:1) in both themes. Use the contrast checker.
5. Label chart lines directly instead of using a color key.

Test it

In Chrome DevTools, open the Rendering panel (press Ctrl + Shift + P and type "rendering"), then use "Emulate vision deficiencies" to preview protanopia, deuteranopia, tritanopia and achromatopsia. Test each one in both light and dark themes. See making dark mode accessible.

Dark mode tools and color

Browser tools that darken sites can shift colors. Simple inversion turns red into cyan and green into magenta, which can change what a colorblind user can tell apart. Modern Dark Mode inverts lightness and then rotates hues back, so reds stay reddish and greens stay greenish, and it flips images back to their original colors. Its brightness and contrast sliders can help bring faint colors back up.

For colorblind readers

• If dark mode makes a site harder to read, exclude that site and use light mode for it.
• Operating system color filters, in Windows and Mac accessibility settings, can adjust colors for specific types of color blindness.