What Is Contrast Ratio?
Contrast ratio is a number that measures how different two colors are in terms of brightness. It ranges from 1:1 (no contrast — identical colors) to 21:1 (maximum contrast — black on white). Higher ratios mean better readability, especially for people with low vision or color vision deficiency.
How to Use This Tool
- Pick a foreground color — the text or UI element.
- Pick a background color — the surface it sits on.
- See the live ratio — updated instantly as you change either color.
- Check the badges — each row shows PASS or FAIL against a specific WCAG standard.
- Use suggestions — when contrast fails, the tool proposes alternative colors that pass.
WCAG Contrast Standards
| Standard |
Normal Text |
Large Text |
UI Components |
| AA (minimum) |
4.5:1 |
3.0:1 |
3.0:1 |
| AAA (enhanced) |
7.0:1 |
4.5:1 |
3.0:1 |
What Counts as "Large Text"?
WCAG defines large text as:
- 18pt or larger (approximately 24px)
- 14pt or larger AND bold (approximately 18.66px)
Large text gets a lower contrast requirement because bigger characters are easier to read at lower contrast ratios.
How Contrast Ratio Is Calculated
The ratio is based on relative luminance — a measure of how bright a color appears to the human eye. The formula accounts for the fact that our eyes are more sensitive to green light than red or blue.
For each color:
- Convert each RGB channel (0–255) to a 0–1 value
- If the value is ≤ 0.03928, divide by 12.92; otherwise apply
((v + 0.055) / 1.055) ^ 2.4
- Combine:
L = 0.2126 × R + 0.7152 × G + 0.0722 × B
Then: Contrast = (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance.
Common Contrast Ratios
- 21:1 — Black (#000000) on White (#FFFFFF) — maximum
- 14.96:1 — Slate-800 (#1E293B) on White — excellent for body text
- 12.63:1 — Black on Yellow (#FFFF00) — classic high-contrast pair
- 4.5:1 — WCAG AA minimum for normal text
- 3.0:1 — WCAG AA minimum for large text and UI
- 1.0:1 — Same color (no contrast)
Why Contrast Matters
- Accessibility — meets WCAG guidelines for people with low vision, color blindness, or age-related vision decline.
- Legal compliance — many countries require WCAG AA compliance for public sector websites.
- Readability — higher contrast means easier reading, especially on mobile or in bright environments.
- SEO — better readability tends to improve engagement metrics, which can help rankings.
- Design quality — good contrast is a hallmark of professional design.
Best Practices
- Aim for AA minimum — 4.5:1 for normal text, 3:1 for large text and UI elements.
- Prefer AAA for body text — 7:1 makes long-form reading effortless.
- Don't rely on color alone — pair color with shapes, icons, or labels.
- Test in context — a color that passes may still feel off in your design.
- Check hover and focus states — interactive elements need sufficient contrast in all states.
- Test both light and dark modes — a palette that passes in light mode may fail in dark mode.
Related Tools
Privacy Note
All calculations happen in your browser. Nothing is uploaded, stored, or shared.