Color Blind Safe Checker

Summary

Enter two colors to see how they appear under three types of color blindness, with WCAG contrast ratios for each simulated view.

How it works

1. Enter or pick a foreground color and a background color using the hex inputs or color pickers.
2. The tool applies three LMS-space color vision deficiency matrices: protanopia, deuteranopia, and tritanopia.
3. Each simulation produces a transformed foreground and background color that represents what a color-blind user perceives.
4. The WCAG 2.1 contrast ratio is computed for each simulation pair and compared against AA (4.5:1) and AAA (7:1) thresholds.
5. Side-by-side swatches and text previews let you visually compare the original and simulated views.
6. Use the results to identify which color combinations fail under specific vision types and adjust accordingly.

Use cases

• Verify that UI color pairs remain distinguishable for red-green color-blind users.
• Test brand color combinations for accessibility before publishing design tokens.
• Audit data visualization palettes that must convey meaning without relying on color alone.
• Check button/label contrast for all three major types of color vision deficiency.
• Satisfy WCAG 2.1 Level AA requirements for users with color vision impairments.
• Educate design teams on how specific colors are perceived differently by color-blind users.
• Validate link-vs-body-text color pairs that often fail for deuteranopes.
• Run quick pre-launch accessibility checks for high-traffic pages.

Frequently Asked Questions

Related tools