WCAG 2.1 · Level AA · Perceivable
WCAG 1.4.3 — Contrast (Minimum), explained with examples
Body text must have a contrast ratio of at least 4.5:1 against its background. Large text (18pt+, or 14pt bold) needs at least 3:1. Low contrast is the single most-failed accessibility criterion online — 80%+ of homepages fail it. Users with low vision, color vision deficiencies, age-related sight loss, or who view screens in bright sunlight all rely on contrast to read.
- Number
- 1.4.3
- Level
- AA
- Principle
- Perceivable
- Guideline
- 1.4 Distinguishable
Why this criterion exists
Low contrast is the single most-failed accessibility criterion online — 80%+ of homepages fail it. Users with low vision, color vision deficiencies, age-related sight loss, or who view screens in bright sunlight all rely on contrast to read.
If you only remember one thing: body text must have a contrast ratio of at least 4.5:1 against its background. large text (18pt+, or 14pt bold) needs at least 3:1. Everything else on this page is detail.
Who feels it when this fails
Accessibility criteria sometimes feel abstract until you see who pays the cost when a site ignores them. Contrast (Minimum) affects:
Users with low vision
Users with color vision deficiencies (8% of men)
Older users with age-related macular changes
Anyone reading on a screen in glare
How sites typically fail it
These are the patterns we see week after week. None are intentional — they are accidents of how teams build interfaces under deadline. Knowing the failure modes is the fastest path to writing them out of your component library.
Light gray placeholder text on white (e.g. #999 on #fff = 2.8:1)
Brand-colored buttons that fail against the page background
Sale prices in pale red on white
Tooltip and helper text below 4.5:1
Disabled UI states without sufficient contrast for the disabled label
How to test for it
Use a contrast checker on every text/background combination.
Run an automated audit — contrast is deterministically computable.
Test in dark mode separately; many themes pass light but fail dark.
Automated scanners catch this criterion most of the time, but never all of the time. Manual testing with the keyboard and a screen reader closes the gap.
A code fix you can copy
Pick foreground colors using a checker, not by eye. Tailwind's gray-600 (#525252) is a safe AA default for body text on white.
The problem
body { color: #999; background: #fff; } /* 2.8:1, fails */The fix
body { color: #525252; background: #fff; } /* 7.4:1, AAA */
.muted { color: #6b7280; } /* 4.6:1 against #fff, AA */Pick foreground colors using a checker, not by eye. Tailwind's gray-600 (#525252) is a safe AA default for body text on white.
Frequently asked questions
What about logos and brand colors?
Logos are exempt. Brand colors used for body text or critical UI are not — adjust the brand color or pair it with a darker variant for text.
Does dark text on a colored background count as large text?
Only if the rendered size is at least 18pt (24px) regular or 14pt bold (18.66px bold). Smaller still needs 4.5:1.
Other Perceivable criteria
Find every accessibility issue on your site in 60 seconds.
Free public scan. No card. AI-generated fixes for every issue we find.