WCAG Contrast Checker
Check color contrast ratios against WCAG 2.1 AA and AAA criteria. Test foreground and background colors with live preview for normal and large text.
Normal text (16px) — The quick brown fox jumps over the lazy dog.
Large text (24px bold)
fg #1f2937 · bg #ffffff
What is contrast ratio?
The contrast ratio between two colors is a number between 1:1 (identical colors, invisible) and 21:1 (pure black on pure white, maximum legibility). It is calculated from each color’s relative luminance — a perceptual brightness value derived from the sRGB red, green, and blue channels using the formula 0.2126 R + 0.7152 G + 0.0722 B.
WCAG uses contrast ratio rather than raw color difference because human eyes respond to brightness logarithmically. Two colors can look very different in hue yet still be hard to read together if their luminance is close — pure red on pure green is the classic example. The ratio captures this much more reliably than RGB distance.
WCAG criteria at a glance
The Web Content Accessibility Guidelines define two compliance levels: AA is the legal baseline in most jurisdictions, while AAA is the stricter target for content meant to be highly readable for users with low vision.
| Criterion | Threshold | Use case |
|---|---|---|
| AA Normal | 4.5 : 1 | Body copy, labels, links, default UI text. |
| AA Large | 3 : 1 | Headings and any text 18pt+ regular or 14pt+ bold. |
| AAA Normal | 7 : 1 | Enhanced readability for body text — government, health, finance. |
| AAA Large | 4.5 : 1 | Enhanced readability for large headings and display copy. |
What counts as large text?
Under WCAG, “large text” means text rendered at 18pt regular (about 24px) or 14pt bold (about 18.66px) and above. Anything below those sizes is treated as normal text and must hit the stricter 4.5:1 (AA) or 7:1 (AAA) threshold. Icons that convey information are evaluated like text; decorative shapes and disabled controls are exempt.
Why accessibility matters
- Legal compliance: The ADA, Section 508, the European Accessibility Act, and similar regulations cite WCAG 2.1 AA as the minimum bar. Low-contrast UI is one of the most-cited violations in accessibility lawsuits.
- Inclusive design: Roughly one in twelve men has some form of color-vision deficiency. Adequate luminance contrast keeps the interface usable regardless of hue perception.
- Readability in real conditions: Glare on phone screens, dimmed laptops, projector washouts, and aging eyes all reduce effective contrast. Designing to AAA gives you headroom for the worst environment your users actually use.
- SEO and brand trust: Lighthouse and PageSpeed factor accessibility scores into their overall rating, and users abandon pages they can’t read. Good contrast is both an SEO and a conversion lever.