Color contrast checker
Color contrast checker for WCAG: enter text and background colors to see the contrast ratio and whether the pair passes the AA and AAA levels. Check if text is readable on its background.
Sample of normal text
Large text
Contrast ratio
10.31 : 1
AA normal
✓ Pass
AA large
✓ Pass
AAA normal
✓ Pass
AAA large
✓ Pass
How to use it
Pick text and background colors
With the picker or by entering HEX codes.
Check the preview
The text is shown on the chosen background — readability is immediately visible.
Check the levels
The contrast ratio and AA/AAA marks for normal and large text.
Why it's useful
Contrast between text and background directly affects readability, especially for people with low vision. The WCAG accessibility standard sets minimum contrast ratios that matter both for usability and for site accessibility requirements.
This tool computes the contrast ratio with the WCAG formula and instantly shows whether a color pair passes the AA and AAA levels for normal and large text. The preview helps you judge the result by eye.
FAQ
Per WCAG, normal text needs at least 4.5:1 (level AA) or 7:1 (AAA). Large text needs 3:1 (AA) and 4.5:1 (AAA).