Color contrast checker (WCAG)
WCAG AA + AAA contrast ratio check for text + UI elements. Live sample preview, suggested adjustments.
- 3.0:1 — minimum for large text (18pt+ or 14pt+ bold) and UI components.
- 4.5:1 — AA standard for normal text. Required for most public-facing content.
- 7.0:1 — AAA standard for normal text. Used for accessibility-first products.
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
Smaller paragraph at standard reading size — what an article body would look like at this color combination.
And small print, like meta descriptions or footer notes, where contrast matters most.
We darkened or lightened the foreground until contrast crossed the AA threshold (4.5:1) against your background. The hue is preserved.
Why contrast actually matters
Roughly 8% of men and 0.5% of women have some form of color vision deficiency. Roughly 12% of adults need reading glasses for close text. Sun glare on a phone screen lowers effective contrast by another order of magnitude. Designing for high contrast isn't pedantry — it's the difference between readable and unreadable for a meaningful chunk of your audience.
For SEO and AI Search, accessibility now feeds Google's page-quality signals via Core Web Vitals and the broader page-experience metrics. Pages that fail accessibility audits rank lower over time, even when content quality is identical.
WCAG's three thresholds explained
- 3.0:1 — minimum for large text (18pt+ or 14pt+ bold) and meaningful UI components (icons in a navigation bar, form-field borders, focus indicators). Below this, low-vision users can't reliably perceive the element.
- 4.5:1 — WCAG AA for normal-sized text. The legal minimum in most jurisdictions for accessibility compliance (ADA in the US, EAA in the EU). This is where most design systems should aim by default.
- 7.0:1 — WCAG AAA for normal text. Required for accessibility-first products, government sites in some regions, and educational content for low-vision users. Aspirational for most marketing sites.
How the algorithm works
WCAG contrast is computed from relative luminance, not the raw RGB values. The formula weights the green channel most heavily (because the human eye is most sensitive to green), red moderately, and blue least. Two colors with very different RGB values can have similar luminance — and thus low contrast — if they sit at the same brightness level.
Practical implication: dark mode designs need contrast checks too. White on dark gray often fails AA where you'd expect it to pass. Light mode pairings of similar saturation (orange-on-yellow, light blue-on-white) routinely fail despite looking “fine” to designers with normal vision.
FAQ
What counts as 'large text'?
WCAG defines large text as 18pt or larger (24px+) at any weight, OR 14pt+ bold (18.5px+ at bold). Headings usually qualify; body text rarely does. The 3.0:1 minimum is for large text only — body text at this contrast won't pass AA.
Should I aim for AA or AAA?
AA is the practical baseline for almost every public-facing site. AAA is the right call for content where reading is the primary purpose (long-form articles, educational content, accessibility-first products). For UI chrome and marketing pages, AA is plenty.
Why does my brand color fail contrast against white?
Many brand palettes are tuned for visual identity, not contrast. Bright oranges, yellows, and light blues commonly fail against white at body-text size. The fix is usually to use the brand color for accent elements (icons, badges, large headings) and a darker variant for body text.
Does the contrast checker account for font weight?
Indirectly — the 'large text' threshold (3.0:1) accounts for bolder fonts being easier to read at lower contrast. Otherwise, the math is the same. A light-weight font at 4.5:1 reads worse than a bold font at 4.5:1, but both technically pass.
Will my colors be saved?
No. Everything runs in your browser. The colors never leave the page.
How does this differ from browser DevTools' contrast checker?
DevTools shows contrast for one selected element at a time — this tool lets you experiment freely with arbitrary color pairs without inspecting a real page. Use both: DevTools for auditing a live site, this for designing a new palette.
Get the full Web Design Service workspace.
Want this monitored daily across all your projects? Sign up free.