Contrast Checker
Check WCAG contrast ratios.
Overview
The Contrast Checker measures the WCAG 2.1 contrast ratio between any text colour and any background, returning the numeric ratio and the pass/fail verdict for AA and AAA at both normal and large text sizes. It also surfaces a live preview of body and heading samples on the chosen background so you can sanity-check the numbers visually.
It is essential for accessibility reviews, brand guidelines, dark-mode pairings and any time you need to defend a colour choice in a design review. Front-end developers commonly bake the same calculation into linting rules; the tool gives designers a one-click answer without leaving the browser.
How it works
Each colour is converted from sRGB into relative luminance using the WCAG formula: gamma-decode each channel (the piecewise sRGB curve), then weight by 0.2126R + 0.7152G + 0.0722B. The contrast ratio is (L_brighter + 0.05) / (L_darker + 0.05), always reported as a value ≥ 1.
WCAG 2.1 AA requires 4.5:1 for normal body text and 3:1 for large text (18pt or 14pt bold). AAA tightens the thresholds to 7:1 and 4.5:1 respectively. Non-text UI components (focus rings, icons, form borders) need at least 3:1 against their adjacent background.
Examples
#000000 on #ffffff → 21.0 : 1 (AAA all sizes)
#777777 on #ffffff → 4.48 : 1 (AA large only — body text fails)
#ffffff on #2563eb → 5.17 : 1 (AA body, AAA large)
#0d6efd on #1a1a1a → 5.27 : 1 (AA body, AAA large)
FAQ
What counts as "large text"?
WCAG defines large as 18pt (24px) regular weight, or 14pt (18.67px) bold and above. The relaxed 3:1 threshold only applies above those sizes.
Why does mid-grey fail so often?
The WCAG formula is biased toward extreme contrast, so colours in the middle of the luminance range struggle to clear 4.5:1 against either pure black or pure white.
Should I use APCA instead?
APCA is the proposed WCAG 3 algorithm and models perception more accurately, especially for dark mode. WCAG 2.1 remains the legal standard for accessibility compliance today, so use both: WCAG for audits, APCA for design decisions.
Does the ratio change for hover or focus states?
The ratio is purely a function of the two colours involved, so any hover, focus or active state that changes either colour needs to be checked separately.
Do gradients and translucent overlays count?
Effective contrast is taken against the worst-case pixel under the text. For gradient backgrounds, test against the darkest and lightest points the text overlaps.