Contrast Ratio
Contrast ratio is the mathematical difference in luminance between foreground text or graphics and their background surface.
Expressed from 1:1 (zero contrast, white on white) to 21:1 (maximum contrast, black on white), it determines readability. Web Content Accessibility Guidelines mandate specific minimum ratios to ensure content is readable by people with low vision.
How it works
WCAG Level AA requires at least 4.5:1 for regular text and 3:1 for large text (18pt or 14pt bold). Non-text elements like button borders and icons also need at least 3:1 against their backgrounds.
When to use it
Check contrast whenever selecting brand colors, styling buttons, designing dark mode themes, or displaying placeholder text inside input fields.
Common mistakes
Using faint gray text on white backgrounds to look minimal and modern, which makes the text impossible to read in bright daylight or for older users.
Key takeaways
- Standard body copy requires a minimum 4.5:1 contrast ratio under WCAG AA.
- Interactive components and icons require at least 3:1 contrast.
- Good contrast helps all users in high-glare environments, not just those with visual impairments.
Learn this
Lessons and exercises mapped to this concept.
Common questions
- Does pure black on pure white have the highest contrast ratio?
- Yes, black on white delivers 21:1, but slightly softened dark slate (like slate-900 on white) still easily passes AA while feeling gentler on the eyes.