Color Accessibility Tester
Add a palette of colours, then preview exactly how they appear to users with protanopia, deuteranopia, tritanopia and achromatopsia. A live contrast matrix shows every colour pair with WCAG AA/AAA pass/fail badges.
How to use
- 1
Build your palette
Click “Add colour” to add as many colours as you need. Use the colour square or type a HEX value, and give each colour a label like Primary, Success, Danger.
- 2
Simulate colour-blindness
Switch the simulation tabs to preview the palette as a protanope, deuteranope, tritanope or achromatope would see it. The comparison table shows every condition side-by-side.
- 3
Read the contrast matrix
The matrix lists every colour pair, the WCAG contrast ratio and pass/fail badges for AA normal, AA large and AAA normal text.
- 4
Copy the report
Use “Copy report” to copy a plain-text summary of every pair and its verdict — handy for pasting into a PR or design review.
Common use cases
- Check whether a data-visualisation palette is still distinguishable to colour-blind users.
- Verify text/background contrast for AA and AAA WCAG compliance.
- Pick accessible semantic colours (success, warning, danger, info) for a design system.
- Audit an existing brand palette for accessibility gaps before a redesign.
Limitations
- Simulation matrices are the standard Vienot/Brettel approximations — they approximate, not perfectly match, each condition.
- Anomalous trichromacy (e.g. deuteranomaly) is a milder form and is not modelled separately.
- The contrast matrix uses the original palette, not the simulated one — WCAG compliance is always measured on real colours.
Frequently asked questions
Related tools
View allContrast Checker
Check WCAG colour contrast between two colours.
Color Picker
Pick colours and convert between HEX, RGB, HSL.
Color Palette Generator
Generate harmonious colour palettes from a base colour.
Color Shade Generator
Generate lighter and darker shades of a colour.