Color Contrast Checker
Verify WCAG AA and AAA accessibility contrast ratios. Test with color blindness filters and visual impairment simulations.
Contrast Ratio
12.11:1
WCAG Level
AAA
Improvement
✓
AA Level: Minimum contrast of 4.5:1 for normal text (18px or smaller), 3:1 for large text (24px or 18px bold)
AAA Level: Enhanced contrast of 7:1 for normal text, 4.5:1 for large text - recommended for maximum accessibility
Large Text: Text that is at least 24px (18pt) or 18.66px (14pt) bold
The quick brown fox jumps over the lazy dog
This is a subtitle paragraph demonstrating how normal body text looks with these colors. Good contrast ensures readability for all users, including those with visual impairments.
Article Heading (H2)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
"Good design is obvious. Great design is transparent." — Joe Sparano
Visit our documentation page for more information on color accessibility standards.
Data Table
| Item | Description | Price |
|---|---|---|
| Widget A | Premium quality widget | $29.99 |
| Widget B | Standard widget | $19.99 |
| Widget C | Budget-friendly option | $9.99 |
Feature List
- •Fast performance
- •Secure by design
- •Easy to customize
- •Mobile responsive
Form Fields
Content Cards
Feature 1
Brief description of this feature and its benefits for users.
Feature 2
Brief description of this feature and its benefits for users.
Fig. 1 — Caption text shown at small size. Should be legible even at reduced size.
Code Example
Use the contrast-ratio() function to calculate accessibility scores.
const ratio = (lighter + 0.05) / (darker + 0.05); const aaPass = ratio >= 4.5; const aaaPass = ratio >= 7.0;
Frequently Asked Questions
What is the WCAG contrast ratio and why does it matter?
The WCAG contrast ratio measures the luminance difference between two colors on a scale from 1:1 (identical) to 21:1 (black on white). It matters because sufficient contrast ensures text is readable for everyone, including users with low vision or color blindness. WCAG 2.1 requires at least 4.5:1 for normal text (AA) and 7:1 for enhanced readability (AAA).
What is the difference between WCAG AA and AAA?
AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18px+ bold or 24px+ regular). AAA is stricter: 7:1 for normal text and 4.5:1 for large text. Tip: aim for AA as a minimum, and target AAA for body text that users read for extended periods.
How do I fix a color combination that fails contrast?
Darken the darker color or lighten the lighter color until the ratio meets the requirement. This tool's suggestion feature shows the closest accessible color automatically. Tip: adjusting lightness usually has less impact on your brand palette than changing hue or saturation.
Does contrast matter for non-text elements like icons?
Yes. WCAG 2.1 Success Criterion 1.4.11 requires a 3:1 contrast ratio for UI components and graphical objects that convey information. This includes icons, form borders, focus indicators, and chart colors. Decorative elements are exempt.
How do I check contrast for an entire design system?
Test every foreground/background combination in your system. Common pairs to check: body text on page background, button text on button fill, placeholder text on input background, and link text on surrounding background. Tip: build a contrast matrix of all your palette colors to catch issues early.