Color Contrast Checker
Pick a foreground and background, see the WCAG 2.1 ratio, and find out which conformance levels you hit for normal and large text. A live preview renders the actual character pair so you can sanity-check the maths against your eyes.
What the WCAG thresholds mean
The four chips above the preview map directly to WCAG 2.1 success criteria 1.4.3 (AA) and 1.4.6 (AAA). Hit the right ratio and your text is legible to people with low vision, in glare, and on cheap displays.
Normal text ≥ 4.5 : 1 Large text ≥ 3.0 : 1 UI components ≥ 3.0 : 1 (SC 1.4.11)
Normal text ≥ 7.0 : 1 Large text ≥ 4.5 : 1
What you'll use this for
A two-second contrast check catches the most common accessibility regression before it ships — and the most common SEO-quality signal Lighthouse will flag.
Audit pages
Drop your brand colours in and see if your buttons meet AA before legal asks.
Build palettes
Pick accents that pair safely with both your light and dark surfaces.
Design tokens
Verify every text-on-surface combination in a design system, one pair at a time.
Lighthouse fixes
Translate a "contrast issue" from a Lighthouse report into the smallest hex change that fixes it.
How to check contrast
Set both colours
Use the native color picker, paste a hex, or type one in. Three-digit shorthand (#abc) and 8-digit alpha (#1d4ed8ff) are both accepted.
Read the ratio
The big number is the WCAG contrast ratio — anywhere from 1:1 (identical) to 21:1 (pure black on pure white). Higher is more readable.
Check the chips
Four green-or-red pills tell you exactly which conformance level you hit for each text size.
Eyeball the preview
The sentence at the bottom is rendered with your real colours so you can sanity-check the maths against your monitor.
Frequently asked questions
WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Level AAA tightens that to 7:1 and 4.5:1 respectively. UI components and graphical objects need 3:1 against adjacent colours under success criterion 1.4.11.
WCAG defines large text as 18pt regular (about 24 px) or 14pt bold (about 18.66 px). Bold weight changes the visual stroke width, so the spec lets you fall into the easier 3:1 / 4.5:1 thresholds at a smaller size when the weight is bold.
Yes. APCA (Advanced Perceptual Contrast Algorithm) is the leading candidate for WCAG 3 and gives different — often better — recommendations for dark mode and very light text. This tool uses the official WCAG 2.1 formula because that's what most accessibility audits still require.
You can use the 3:1 threshold (success criterion 1.4.11) as a stand-in for non-text contrast — interactive elements, icons, focus indicators. Drop the icon's stroke colour as foreground and its background as the bg, and read the AA-large chip.
WCAG asks you to test against the worst-case stop. Sample the lightest and darkest pixel along the gradient where your text sits and run each against your foreground — if both pass, you're safe across the whole stretch.
About WCAG contrast
The contrast ratio is a function of relative luminance, defined by the W3C in WCAG 2.1. Pure black on pure white scores 21:1; identical colours score 1:1.
The maths
- Normalise each channel to
0…1and apply the sRGB gamma curve:c <= 0.03928 ? c/12.92 : ((c+0.055)/1.055)^2.4. - Compute relative luminance:
L = 0.2126·R + 0.7152·G + 0.0722·B. - Contrast ratio:
(L_lighter + 0.05) / (L_darker + 0.05).
Tips for hitting AA without losing the design
- Darken the foreground rather than lightening the background — small text on a near-white surface is easier to read than the inverse.
- Reserve light/pastel accents for large headings (which need only 3:1).
- If a brand colour fails, use it on hover/focus states only and pair it with an underline or icon — colour alone never carries information per SC 1.4.1.