Contrast Checker (WCAG AA / AAA grades)
Pick a foreground and background color to compute the WCAG contrast ratio. Live text preview and four grade badges (AA normal, AA large, AAA normal, AAA large) update in real time.
How it works
How the contrast ratio works
WCAG (Web Content Accessibility Guidelines) defines contrast as the ratio between the relative luminance of two colors. The formula linearizes each sRGB channel, weighs them by human eye sensitivity (R 0.2126, G 0.7152, B 0.0722), then computes (lighter + 0.05) / (darker + 0.05). The result ranges from 1:1 (identical) to 21:1 (black on white).
We compute this in your browser using the official WCAG 2.x formula. The four grade badges check against AA's 4.5:1 (normal) and 3:1 (large), and AAA's 7:1 (normal) and 4.5:1 (large) thresholds. 'Large text' is 24px / 18pt, or 18.66px / 14pt bold.
Why pass AA at minimum
AA is the legally enforceable level in many jurisdictions (US ADA, EU EN 301 549, UK Equality Act for digital services). Failing AA on body text is the single most common accessibility issue and the easiest to fix during design rather than after launch.
AAA is recommended for long-form reading, government services, and high-stakes interfaces. It's strict โ a designer's first instinct of pale gray on white usually fails AAA easily. If your site mostly serves quick-glance content, target AA; if you publish books, articles, or critical info, target AAA.
Common mistakes
'It looks fine on my screen.' Calibrated screens, fluorescent office lights, and outdoor smartphone use all change perceived contrast. Use the ratio, not your eye.
Designing dark mode by inverting hex codes. Inversion changes hue and breaks contrast. Re-test every color pair after switching themes.
Trusting brand guidelines. Many brand palettes were chosen before WCAG awareness. If brand pink-on-white fails, propose a slightly darker pink for body copy and reserve the original for decorative use.
Frequently asked questions
โบWhat's the difference between AA and AAA?
AA requires 4.5:1 for normal text and 3:1 for large text. AAA tightens to 7:1 and 4.5:1. AAA is recommended but not always achievable.
โบWhat is 'large text'?
WCAG defines it as 18pt (24px) or larger, or 14pt (18.66px) and bold.
โบDoes this tool support transparency?
Not yet. Pick the actual color the user sees (foreground composited over background). Transparency support may come later.
โบWhy doesn't my brand pass?
Many brand palettes were chosen for aesthetics, not accessibility. Common fixes: darken accent colors used as text, reserve light variants for backgrounds or decorative elements.
โบIs the ratio the same as 'perceived contrast'?
No โ WCAG 2.x uses a simplified luminance-based formula. WCAG 3 (in development) uses APCA, which better predicts perceived contrast but isn't yet standardized.
โบWhat ratio for icons or UI controls?
WCAG 2.1 added a 3:1 minimum for non-text contrast (icons, form controls, focus indicators). Use the same checker โ meet or exceed 3:1.
โบDoes this work for graphic charts?
Same threshold applies between adjacent colors that convey meaning. For data viz, 3:1 between adjacent colors is the WCAG 1.4.11 minimum.
โบIs the data sent anywhere?
No. Calculation runs locally in your browser.
Related tools
Last updated: