Free tool · runs in your browser
Color contrast checker
Contrast ratio
—
| AA · normal text | 4.5:1 | — |
| AA · large text | 3:1 | — |
| AA · UI components and graphics (1.4.11) | 3:1 | — |
| AAA · normal text | 7:1 | — |
| AAA · large text | 4.5:1 | — |
Preview
Board meeting agenda, Tuesday 6:00 PM
Normal text at 16px. Families use this page to find meeting times, enrollment forms and lunch menus.
Small print at 14px is harder to read at the same ratio.
Button outline (1.4.11)How contrast is calculated
WCAG defines contrast as (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 of the darker one. Luminance weights green most and blue least, which is why a saturated blue on black can fail even though it looks bright. Ratios run from 1:1 (identical colors) to 21:1 (black on white).
Which criteria apply
| Criterion | Level | What it covers | Minimum |
|---|---|---|---|
| 1.4.3 Contrast (Minimum) | AA | Body text, links, button labels, form text | 4.5:1, or 3:1 for large text |
| 1.4.6 Contrast (Enhanced) | AAA | Same content, stricter | 7:1, or 4.5:1 for large text |
| 1.4.11 Non-text Contrast | AA | Input borders, focus indicators, icons, chart lines | 3:1 against adjacent colors |
Where public websites usually fail
- Light gray body text on white, often a template default such as #999999 (about 2.8:1).
- Brand colors on buttons: white text on a school-spirit yellow, orange or light green rarely reaches 4.5:1.
- Text on hero photos and carousels without an overlay.
- Placeholder text used as the only label in search and newsletter fields.
- Form field borders so faint that people with low vision cannot find the field (1.4.11).
Low contrast is the most common automated finding on home pages in WebAIM's annual Million report. It is usually a template-level fix: change one color variable in the theme and every page improves.
Sources
Questions
Frequently asked
What contrast ratio does WCAG 2.1 AA require?
4.5:1 for normal text and 3:1 for large text (at least 18pt, or 14pt bold, roughly 24px or 18.66px bold). User interface components and meaningful graphics need 3:1 against adjacent colors under success criterion 1.4.11.
What is the difference between AA and AAA?
AAA (success criterion 1.4.6) raises the bar to 7:1 for normal text and 4.5:1 for large text. The DOJ's ADA Title II rule requires Level AA, so AAA is a stronger target, not a legal requirement.
Does the checker round the ratio?
It truncates to two decimals instead of rounding up, so 4.499:1 shows as 4.49:1 and fails. WCAG thresholds have no rounding.
Does contrast apply to logos and disabled buttons?
No. Text that is part of a logo or brand name, purely decorative text and inactive (disabled) controls are exempt from the contrast minimum.
What about text over photos or gradients?
Measure against the lightest or darkest part of the background behind the text, whichever is worse. If the result fails anywhere, add a solid or semi-opaque overlay behind the text.