Color Contrast Checker
Check WCAG AA and AAA accessibility compliance for any text and background color combination. Preview the result in real-time.
How to Use the Contrast Checker
1
Choose Text Color
Use the color picker or type a hex code for the foreground text color. The preview updates instantly as you adjust.
2
Choose Background Color
Select the background color using the picker or hex input. The contrast ratio is calculated in real-time between the two colors.
3
Check WCAG Compliance
See the contrast ratio and pass/fail indicators for WCAG AA and AAA at both normal text and large text thresholds.
WCAG Contrast Requirements Reference
| Level | Normal Text | Large Text | UI Components |
|---|---|---|---|
| AA | 4.5:1 | 3:1 | 3:1 |
| AAA | 7:1 | 4.5:1 | Not defined |
Large text is defined as at least 18pt (24px) bold or 24pt (32px) regular.
Frequently Asked Questions
WCAG (Web Content Accessibility Guidelines) defines contrast ratio requirements for text and background colors. The ratio ranges from 1:1 (same color) to 21:1 (black on white). Normal text requires 4.5:1 (AA) or 7:1 (AAA). Large text (18px+ bold or 24px+ regular) requires 3:1 (AA) or 4.5:1 (AAA).
The contrast ratio is calculated using the relative luminance of both colors. Luminance is a weighted sum of RGB values: L = 0.2126R + 0.7152G + 0.0722B (after linearization). The contrast ratio is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color and L2 is the darker color.
WCAG AA is the minimum compliance level required by most government and enterprise accessibility standards. AA requires 4.5:1 for normal text and 3:1 for large text. AAA is a higher standard requiring 7:1 for normal text and 4.5:1 for large text. AAA is not required for full compliance but represents best practice.
Start by choosing a background color, then adjust the text color until you reach at least AA compliance. Dark text on light backgrounds generally works best. Avoid low-contrast combinations like light gray on white, or dark blue on black. Use the color pickers to experiment with different combinations.
Yes. The checker shows separate results for normal text (under 18pt bold / 24pt regular) and large text (18pt+ bold / 24pt+ regular). Large text has slightly relaxed contrast requirements because thicker strokes make it easier to read at lower contrast ratios.
Ad