Color Contrast Checker
Enter foreground and background colors to instantly check WCAG 2.1 contrast ratio. AA/AAA pass/fail with a live text preview.
The quick brown fox jumps over the lazy dog
Small text sample (14px) — WCAG requires 4.5:1 for normal text, 3:1 for large text (18px bold or 24px).
Large text sample (18px bold)
Contrast Ratio
Normal text (≥4.5:1)
Large text (≥3:1)
WCAG 2.1 thresholds:
• AA Normal text: 4.5:1 | AA Large text (≥18px bold / ≥24px): 3:1
• AAA Normal text: 7:1 | AAA Large text: 4.5:1
Frequently Asked Questions
What is WCAG contrast ratio?
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios to ensure text is readable for users with low vision. The ratio compares the relative luminance of the foreground and background colors.
What are the WCAG 2.1 thresholds?
AA level: 4.5:1 for normal text, 3:1 for large text (≥18px bold or ≥24px regular). AAA level: 7:1 for normal text, 4.5:1 for large text.
What is 'relative luminance'?
Relative luminance is the perceived brightness of a color on a scale from 0 (black) to 1 (white), calculated using the WCAG sRGB formula with gamma correction.
Why does the contrast ratio matter?
Poor color contrast makes text hard to read for users with color blindness or low vision, and may cause your site to fail WCAG audits. Most accessibility standards (WCAG 2.1, APCA) require at least 4.5:1 for body text.
WCAG Contrast Requirements
| Level | Normal text | Large text (≥18px or 14px bold) | UI components |
|---|---|---|---|
| AA (minimum) | 4.5 : 1 | 3 : 1 | 3 : 1 |
| AAA (enhanced) | 7 : 1 | 4.5 : 1 | Not defined |
How the Contrast Ratio Is Calculated
WCAG defines contrast ratio as (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter colour and L2 the darker one. Relative luminance is computed by converting sRGB values to linear light and applying luminance coefficients (R: 0.2126, G: 0.7152, B: 0.0722).
Tips to Improve Contrast
- Darken the foreground — shifting text from grey (#999) to dark grey (#767676) is the minimum AA-passing grey on white.
- Increase font weight — bold text at 14px qualifies as “large text” which only requires a 3:1 ratio.
- Use the HSL lightness channel — reduce the lightness of your brand colour to create a text-safe variant without changing hue.
- Test with colour blindness simulators — high contrast is especially important for users with deuteranopia or protanopia.