WCAG Contrast Checker
Check the contrast ratio between two colours and verify WCAG AA and AAA compliance for text accessibility.
The colour used for text and foreground elements
The colour behind your text or UI element
Contrast Ratio
17.31:1
Live Preview
Large Text (24px bold)
Normal text (16px) — The quick brown fox jumps over the lazy dog. This sample text helps you visualise how your colour combination will look in practice.
Small text (14px) — Check readability at different sizes. Ensure your text remains legible for all users.
Reversed Preview
This shows the reverse combination — useful for buttons, badges and inverted UI elements.
Understanding WCAG Contrast Ratios
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure text is readable by people with visual impairments. Contrast ratio is calculated from the relative luminance of the foreground and background colours.
AA Normal Text requires a ratio of at least 4.5:1 for body text (under 18pt or 14pt bold). AA Large Text requires 3:1 for text 18pt+ or 14pt bold+.
AAA is the enhanced level: 7:1 for normal text and 4.5:1 for large text. Meeting AAA ensures the highest level of accessibility.