Contrast Checker
WCAG AA & AAA color-contrast verifier
Foreground / background
Contrast ratio
Quick brown foxes leap freely over the lazy quartz dog. The five boxing wizards jump nimbly toward the back.
Big heading reads cleanly.
Suggested fix:
Darken the foreground or lighten the background until you hit at least 4.5:1 for normal text. A safe accessible foreground for this background would be .
About Contrast Checker
What contrast ratio means
Contrast ratio is the relationship between the relative luminance of two colors. It runs from 1:1 (the two colors are identical) to 21:1 (pure black on pure white). The Web Content Accessibility Guidelines (WCAG) 2.1 define the thresholds that text needs to clear to be readable by people with low vision, color blindness, and ordinary age-related sight loss.
The ratio is computed from the relative luminance of each color (not the raw RGB), using the formula L = 0.2126·R + 0.7152·G + 0.0722·B after gamma-correcting each channel. The lighter color's L is divided by the darker color's L (with an offset of +0.05 to keep the ratio finite at the extremes).
The four WCAG thresholds
| Level | Text size | Minimum ratio | Used for |
|---|---|---|---|
| AA · Normal | Under 18 pt (or 14 pt bold) | 4.5 : 1 | The everyday legal-floor for body text. Most jurisdictions cite this. |
| AA · Large | 18 pt+ (or 14 pt+ bold) | 3.0 : 1 | Headings and large UI labels. |
| AAA · Normal | Under 18 pt | 7.0 : 1 | Enhanced level; recommended for medical, legal, government, and high-stakes UIs. |
| AAA · Large | 18 pt+ | 4.5 : 1 | Enhanced level for headings. |
AA is the realistic target for most products. AAA is generally only achieved in deliberately black-on-white interfaces.
Why this actually matters
- ~1 in 12 men and 1 in 200 women have a form of color blindness (mostly red-green deficiencies). Contrast survives most color-blindness because it's a luminance metric, not a hue one.
- Roughly 285 million people worldwide have a visual impairment (WHO, 2020). Most do not use a screen reader — they use the page with poor visual acuity.
- Everybody, eventually. Lens yellowing starts in your 30s; by 60, the lens transmits about 33% less light. The contrast you find comfortable at 25 will fail you at 65.
- It's the law in many places. ADA cases regularly cite WCAG 2.1 AA as the standard. The European Accessibility Act (2025) mandates AA for digital products.
How to use this tool
- Pick your foreground and background. Hex codes (
#1F2937), 3-digit shorthand (#fff), or use the native color picker. - Read the verdict. The big ratio at the top is the number you'd cite in a design spec. The four boxes below tell you which WCAG levels you pass.
- Watch the live preview. Body text, a heading, and a button — all the contexts contrast normally matters for.
- Take the suggestion when failing. When the ratio is under 4.5:1, the tool tells you whether pure black or pure white would be a safer foreground for the same background.
Frequently asked questions
AA (4.5:1 for body) is the practical industry standard and what most accessibility audits will demand. AAA (7:1) is recommended for medical, legal, government, finance, and any product whose users are likely to have visual impairments.
Larger letters have thicker strokes and more pixels per glyph, so the eye averages the contrast over more area — making them legible at a lower per-pixel ratio. WCAG defines "large" as 18 pt regular or 14 pt bold.
Yes, partially. Contrast ratio is a luminance metric, so it survives the vast majority of color-blindness. But two colors that have great contrast can still be hard to distinguish if they share a hue axis a viewer can't resolve — e.g. red and green of similar luminance. For colorblind-safety specifically, test with a simulator like Color Oracle as well.
WCAG 2.1 introduced a 3:1 rule for "non-text contrast" (1.4.11) that covers UI components and meaningful graphics — input borders, focus rings, chart series, icons that convey information. Use the same tool with that threshold in mind.
Each color's relative luminance L is computed (`0.2126·R + 0.7152·G + 0.0722·B`, with sRGB gamma correction). Then `(Llighter + 0.05) / (Ldarker + 0.05)`. The result is a number from 1.00 (identical) to 21.00 (black on white).
Either darken the foreground or lighten the background. The "Suggested fix" line under the verdict picks whichever of black or white passes for the given background and tells you. For brand colors, look for an adjacent shade in your design system that meets the threshold rather than abandoning the palette entirely.
Embed this tool on your site
Drop a one-line iframe snippet into any blog, lesson plan, or knowledge base. Powered-by-Toolenza link included.
Embed this tool
Paste this snippet into any HTML page. The tool runs entirely in your reader's browser.
Related tools
Contrast Checker
No reviews yet — be the first to share your thoughts.
- No reviews yet — be the first to share your thoughts.