Accessibility Check

Steps to run an accessibility check on your colors

1. Enter your text color and the background it sits on.
2. Read the verdict, which weighs contrast and how the pair holds up across color vision types.
3. Scan the simulation tiles for normal, protan, deutan and tritan vision.
4. If two colors blur together in any tile, change one or add a non-color cue.
5. Adjust until the pair reads clearly for every vision type, not just for you.

What makes a color combination accessible

An accessible pairing does two things at once: it has enough brightness contrast to be read, and it stays distinguishable for people who see color differently. Contrast alone is not enough, because two colors can pass a ratio yet still collapse into one shade for a colorblind user.

• Lean on lightness difference, not hue difference, so the pair survives in any vision type.
• Blue is the safest single hue; it reads reliably across the common deficiencies.
• Pair blue with orange or yellow rather than with green for a safe, high-signal combination.
• Black on white (21:1) and dark navy on a light background are fail-safe.

Color combinations to avoid for accessibility

Red-green is the single biggest problem because red-green deficiency affects about 8% of men. These pairs sit at similar brightness, so they merge for many users. The fix is usually to push one color much darker or lighter, or to swap a hue.

Why color alone is not enough

A status that is only signaled by color, like a green tick versus a red cross at the same shape, disappears for colorblind users. This is WCAG Success Criterion 1.4.1, Use of Color. Always back color with a second cue.

• Add a checkmark and an X to green and red states, not color by itself.
• Underline links instead of relying on a color change alone.
• In charts, use different shapes, dashes or direct labels per series.
• A scientifically validated set like the Okabe-Ito palette stays distinct across all major deficiencies.

Accessibility check vs contrast and WCAG tools

These three tools answer different questions. This accessibility check is the broad one: it looks at readability and color vision together. Use the Contrast Checker when you only need the raw ratio, and the WCAG Checker when you need the formal pass or fail level.

To inspect a single color across each vision type in detail, open the Color Blindness Simulator.