WCAG Contrast Checker
Check the contrast ratio between two colors according to WCAG 2.1 standards. AA and AAA recommendations for normal and large text.
Contrast ratio
13.98:1
Large text (24px bold)
Large text (18.66px bold)
Normal text (16px) — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Small text (14px) — Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
WCAG 2.1 Results
| Level | Type | Minimum ratio | Result |
|---|---|---|---|
| AA | Normal text | 4.5:1 | Pass |
| AA | Large text | 3:1 | Pass |
| AAA | Normal text | 7:1 | Pass |
| AAA | Large text | 4.5:1 | Pass |
How does the calculation work?
The contrast ratio is calculated using the WCAG 2.1 formula: (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminances of the two colors. Relative luminance uses linearized sRGB components with coefficients 0.2126 (red), 0.7152 (green) and 0.0722 (blue). "Large" text is 18pt normal or 14pt bold.
Everything you need to know about WCAG contrast and color accessibility
Why check color contrast?
Insufficient contrast makes text unreadable for people with low vision, color blindness, or those browsing on a screen in bright sunlight. Checking the contrast ratio ensures your content is accessible to everyone.
WCAG 2.1 standards define precise thresholds (AA and AAA) that public websites and applications must meet to comply with accessibility regulations in many countries.
Good contrast also improves the overall user experience: readability reduces eye strain and increases time spent on your site, which has a positive impact on SEO.
Common use cases
- Website design
- Test your text/background color combinations when creating mockups or CSS themes to ensure every text element meets WCAG AA or AAA criteria.
- Mobile applications
- Validate the contrast of your iOS and Android interfaces, especially for buttons, labels, and error messages, which must remain readable on all devices.
- Documents and presentations
- Make sure your PDF reports, PowerPoint slides, and printed documents use color combinations with sufficient contrast to be readable by everyone.
- Accessibility audit
- During a WCAG, Section 508, or ADA audit, use this tool to quickly check each flagged color pair and document the ratios obtained.
How to use the contrast checker?
Enter or select the text color and background color using the hexadecimal fields or the built-in color picker.
The contrast ratio is displayed instantly with a color code: green for excellent contrast (>= 7:1), yellow for acceptable contrast (>= 4.5:1), orange for borderline contrast (>= 3:1), red for insufficient contrast.
Check the WCAG 2.1 results table to see if your combination passes AA and AAA levels for normal and large text. Adjust your colors until you reach the desired level.
Frequently asked questions about WCAG contrast
- What is the difference between WCAG AA and AAA levels?
- Level AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. Level AAA is stricter with 7:1 for normal text and 4.5:1 for large text. Level AA is the recommended minimum for most websites.
- Does my website have to comply with WCAG standards?
- In many countries, public websites and online services must meet a certain level of accessibility. In France, RGAA is based on WCAG. In the United States, Section 508 and the ADA impose similar requirements. Non-compliance can result in legal penalties.
- Does contrast also apply to icons and graphic elements?
- Yes. WCAG 2.1 (criterion 1.4.11) requires a minimum contrast ratio of 3:1 for user interface components and informational graphic elements, such as icons, form field borders, and focus indicators.
- How exactly is the contrast ratio calculated?
- The ratio uses the formula (L1 + 0.05) / (L2 + 0.05) where L1 is the relative luminance of the lighter color and L2 that of the darker one. Relative luminance is obtained by linearizing the sRGB components and then applying the ITU-R BT.709 weighting coefficients.
- Can I use this tool to check the contrast of colors with transparency (RGBA)?
- This tool works with opaque colors in hexadecimal format. For colors with transparency, you must first calculate the resulting color after blending with the background (alpha compositing), then enter the resulting hexadecimal value into the tool.