Skip to content

Accessibility

Color blindness guide

Roughly 8% of men and 0.5% of women have some form of color vision deficiency. Design for protanopia, deuteranopia, and tritanopia with more than red/green cues. Further reading: Reference.

Open contrast checker →

Accessible color pairs

Common types

Protanopia and deuteranopia reduce red–green discrimination; tritanopia affects blue–yellow. Monochromacy is rare. Simulators approximate, they do not replace user testing.

Design tactics

Combine color with shape, position, labels, and texture. In charts, label series directly instead of relying on a color-only legend.

  • Use patterns or icons in status badges
  • Underline links — not color alone
  • Test with grayscale and simulators
  • Avoid red/green as the only diff in charts

Accessible palettes

Blue–orange and purple–gold pairs survive most deficiencies better than red–green. Verify contrast for everyone after picking accessible hues.

Testing with real users

Simulators in browsers and design tools are educational. They do not cover every variant or severity. Include participants with color vision deficiencies in usability tests when color carries meaning.

Status and alerts

Success and error states should pair color with icons and text (“Saved”, “Payment failed”). Never use red versus green as the only difference between destructive and safe actions.

Maps and heatmaps

Sequential palettes should vary in lightness, not only hue. Diverging palettes need a clear midpoint and labels. Offer a table view alternative for critical analytics.

Reference swatches

FAQ

How accurate are the simulations?

CSS filters approximate common deficiencies for education. Real vision varies — test with users and do not rely on simulation alone.

Can I copy the HEX swatches?

Yes — click any chip in the reference grid to copy HEX. RGB and CMYK appear on each row where the renderer supports them.