Large text preview (18pt+)
Normal text preview (14-16px body copy) reads like this against the chosen background.
What Is Color Contrast?
Color contrast measures how easily text can be distinguished from its background, based on the relative brightness (luminance) of the two colors. Low contrast - like light gray text on a white background - is hard to read for everyone, and can make content completely unreadable for users with low vision or color blindness.
The World Wide Web Consortium (W3C) defines precise contrast requirements as part of the Web Content Accessibility Guidelines (WCAG), expressed as a ratio from 1:1 (no contrast) to 21:1 (pure black on pure white, maximum contrast).
WCAG Contrast Ratio Standards
| Level | Normal Text | Large Text |
|---|---|---|
| WCAG AA | 4.5:1 minimum | 3:1 minimum |
| WCAG AAA | 7:1 minimum | 4.5:1 minimum |
"Large text" is defined as 18pt (24px) regular weight or larger, or 14pt (18.66px) bold or larger.
Why Color Contrast Matters
Frequently Asked Questions
WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text. WCAG AAA is stricter at 7:1 and 4.5:1 respectively.
No. Everything is calculated entirely in your browser using JavaScript - nothing is ever sent to a server.
AA is the standard baseline most sites target. AAA is a stricter, optional standard that's harder to meet with vibrant brand colors.