Accessibility Color Contrast Checker
Free online WCAG color contrast checker. Calculate contrast ratios, verify AA/AAA compliance, preview text readability, and simulate color blindness for accessible design.
Large Heading Text
Large Text (18px+ bold)
Normal body text — The quick brown fox jumps over the lazy dog. Check if this is readable against the background color.
Contrast Ratio
14.63:1
WCAG AA
Normal text (≥4.5:1)
Large text (≥3:1)
WCAG AAA
Normal text (≥7:1)
Large text (≥4.5:1)
Color Blindness Simulation
Protanopia (red-blind)
Sample text preview
Ratio: 15.36:1AA Pass
Deuteranopia (green-blind)
Sample text preview
Ratio: 15.69:1AA Pass
Tritanopia (blue-blind)
Sample text preview
Ratio: 13.31:1AA Pass
What Is a Color Contrast Checker?
A color contrast checker measures the luminance difference between a foreground (text) color and a background color, producing a contrast ratio as defined by the Web Content Accessibility Guidelines (WCAG) 2.1. This ratio determines whether text is readable for users with low vision or color deficiencies. WCAG defines two conformance levels — AA (minimum) and AAA (enhanced) — each with different thresholds for normal-sized text and large text. This tool calculates the ratio instantly and also simulates how your color pair appears under common forms of color blindness.
How to Use the Color Contrast Checker
- Enter your foreground (text) color as a HEX value (e.g., #1e293b) or use the color picker.
- Enter your background color as a HEX value (e.g., #ffffff) or use the color picker.
- View the live preview showing your text at different sizes against the background.
- Check the contrast ratio and WCAG AA/AAA pass or fail results displayed below.
- Use the Swap Colors button to quickly reverse foreground and background.
- Scroll down to see color blindness simulations for protanopia, deuteranopia, and tritanopia.
Common Use Cases
- Web Accessibility Compliance — Verify that your website's text and background color combinations meet WCAG 2.1 AA or AAA requirements before deployment.
- Design System Validation — Test all color token pairings in your design system to ensure every combination is accessible and compliant.
- Color Blindness Testing — Preview how users with protanopia, deuteranopia, or tritanopia perceive your color choices and adjust accordingly.
- Client & Stakeholder Reports — Generate clear pass/fail evidence for accessibility audits, ADA compliance reviews, or Section 508 evaluations.
FAQ
What contrast ratio is required for WCAG AA compliance?
WCAG AA requires a minimum contrast ratio of 4.5:1 for normal-sized text and 3:1 for large text (18px+ or 14px+ bold). These thresholds ensure readability for most users with moderate vision impairments.
What is the difference between WCAG AA and AAA?
WCAG AAA is a stricter standard requiring 7:1 for normal text and 4.5:1 for large text. While AA is considered the minimum acceptable level, AAA provides enhanced readability and is recommended for body text on high-traffic or government websites.
How does the color blindness simulation work?
The tool applies scientifically-derived color transformation matrices that approximate how people with protanopia (red-blind), deuteranopia (green-blind), and tritanopia (blue-blind) perceive colors. It recalculates the contrast ratio for each simulated pair so you can verify accessibility under different vision conditions.
Can I use RGB or HSL values instead of HEX?
Currently the tool accepts HEX color codes (#rrggbb format). You can use the companion Color Converter & Picker tool to convert RGB or HSL values to HEX first, then paste the result here.