Pick a foreground and background
Choose two colours and the tool calculates the WCAG contrast ratio in the browser, reporting normal body text (4.5:1) and large text (3:1). Only 3- or 6-digit hex is accepted; no network, no upload.
Calculated.
Running built-in self-test…
Rules
| Item | Rule | Boundary |
|---|---|---|
| Input | 3- or 6-digit hex, optional # | No alpha, rgb() or colour names |
| Relative luminance | sRGB components linearised, weighted 0.2126/0.7152/0.0722 | Not a perceptual space |
| Contrast | (L1+0.05)/(L2+0.05) | Order of colours does not matter |
| Normal text | AA ≥4.5:1, AAA ≥7:1 | Does not verify the actual font size |
| Large text | AA ≥3:1, AAA ≥4.5:1; ≥24px or ≥18.66px bold | Font size is a page decision, not read here |
| Not judged | Image/gradient/alpha backgrounds, APCA, colour-blind simulation | Needs pixel sampling or manual review |
The formula and Node assertions live in scripts/test_contrast_check.js (13 checks); the page has three built-in tests.
Why contrast first
The site's 390px font-size audit found four sites at a 12px weighted median and 20 of 24 with line-height under 1.4; small type plus pale grey text amplifies contrast problems. Check the colour ratio before choosing size and weight; see also the 390px tap-target audit.
Privacy
Parsing and calculation happen on this page with no network request; nothing is stored or sent. Opening it with #sample fills the #767676 / white example.
Frequently asked questions
Does the tool upload the colours?
No. Parsing and ratio calculation run entirely in the browser with no network request; nothing is stored or sent.
What is the difference between 4.5:1 and 3:1?
WCAG 2.x requires 4.5:1 for normal body text and 3:1 for large text (at least 24px, or at least 18.66px bold); AAA is 7:1 for normal and 4.5:1 for large. The tool reports both levels.
Does it support alpha, images or gradients?
No. Inputs accept 3- or 6-digit hex only and assume an opaque solid colour; image, gradient, translucent or video backgrounds need pixel sampling or manual judgement.
Why does #767676 pass while #777777 fails?
#767676 on white is about 4.54:1, just above 4.5:1; #777777 is about 4.48:1. The tool keeps full precision and displays two decimals.
Should AAA be checked too?
AAA is stricter: 7:1 for normal text and 4.5:1 for large text. Most projects use AA as the floor and aim for 7:1 on body copy.
Can the formula be reproduced?
Yes. It uses the sRGB relative-luminance formula; the Node assertions live in scripts/test_contrast_check.js (13 checks), and the page has three built-in tests.