Color Accessibility Checker — WCAG Contrast & Colorblind Simulation
A free WCAG 2.1 contrast checker for testing any color combination against accessibility standards. Verify text readability for Level AA and AAA compliance — essential for inclusive web design.
Verify color pairs for WCAG contrast compliance and colorblind distinguishability
How to Use
- Pick or enter foreground and background colors using the color pickers or hex/RGB inputs.
- View the live text preview and check WCAG AA/AAA compliance results.
- Review the color blindness simulation strip to see how each CVD type perceives your colors.
- If any check fails, click a suggested alternative to instantly fix the color pair.
- Use Bulk Palette mode to check all combinations from your design system palette.
Features
Frequently Asked Questions
What is WCAG contrast ratio?
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between text and background colors. AA level requires 4.5:1 for normal text and 3:1 for large text (18pt+). AAA level requires 7:1 for normal and 4.5:1 for large text. Higher ratios mean better readability.
What is color blindness (CVD)?
Color Vision Deficiency (CVD) affects about 8% of males and 0.5% of females worldwide. The most common types are protanopia (red-blind) and deuteranopia (green-blind). This tool simulates how your color pairs look to people with each type, helping you design for everyone.
How does the auto-suggest feature work?
When your color pair fails WCAG or CVD checks, the tool searches for nearby colors that pass all criteria. It adjusts lightness while keeping the hue similar, so the suggested colors still match your design intent while being accessible.
Is my data private?
Yes, 100%. All color calculations happen directly in your browser using JavaScript. No colors, palettes, or data are sent to any server. You can even use this tool offline after the first load.
What is Delta E and why does it matter?
Delta E (CIE2000) measures the perceptual difference between two colors. A Delta E below 1 means two colors are virtually identical to the human eye. For accessibility, we recommend a minimum Delta E of 10 between foreground and background under all CVD simulations to ensure distinguishability.
