Free tools
Color contrast checker
Enter a text color and a background color to see the WCAG 2.2 contrast ratio and whether it passes AA and AAA for normal and large text. If it fails, you get the nearest colors that pass. To check a live page, scan its address and every piece of text is tested in a real browser.
Contrast ratio 4.54:1
| Use | Needs | Level AA | Level AAA |
|---|
Page contrast report
Get the full report as a PDF
Fix estimate: fixing contrast and the other common WCAG 2.2 AA template issues on a small business site is $500 to $2,000, our published accessibility add-on. Fixed quote in 24 hours.
Email me the contrast report
You get the color pair above, or the page scan if you ran one, with the nearest passing colors and a fix estimate in US dollars.
How the contrast ratio is worked out
The checker uses the WCAG 2.2 formula. Each color's relative luminance is calculated from its sRGB values, and the ratio is (lighter + 0.05) divided by (darker + 0.05). It runs from 1:1 (same color) to 21:1 (black on white). Ratios are rounded down, so 4.499 shows as 4.49 and fails, as WCAG intends.
| What | AA | AAA | Success criterion |
|---|---|---|---|
| Normal text | 4.5:1 | 7:1 | 1.4.3 (AA), 1.4.6 (AAA) |
| Large text (24px, or 18.66px bold) | 3:1 | 4.5:1 | 1.4.3, 1.4.6 |
| Icons, input borders, focus indicators | 3:1 | n/a | 1.4.11 Non-text Contrast (AA) |
How the suggestions are chosen
When a pair fails, the checker keeps the hue and saturation of the color and moves only its lightness, one percent at a time, darker and lighter, and offers the smallest change that passes. It does this for the text color and, separately, for the background, so you can keep whichever is your brand color.
How the page scan works
The page scan loads your page at 1280 by 900 pixels in headless Chromium on our server and runs the open-source axe-core color-contrast rules, which compute the real foreground and background color of every visible text element. Text over images, gradients or video cannot be measured reliably, so axe marks it as needing a manual check and we count it separately.
Contrast is one of more than 50 WCAG 2.2 AA success criteria. Read the WCAG 2.2 checklist for the rest.
Getting it fixed
Every page we build or fix is tested to WCAG 2.2 AA. If you want a person to check the whole site, see our ADA compliance audit. If you already know what is wrong, our accessibility remediation service fixes it in the code, not with an overlay. For a broader automated scan of one page, use the free accessibility checker.
More free tools
FAQ Answers
Frequently asked questions
Normal text needs at least 4.5:1 against its background and large text at least 3:1 (success criterion 1.4.3). Icons, form field borders and focus indicators need 3:1 (1.4.11). AAA raises text to 7:1 and large text to 4.5:1.
WCAG defines large text as at least 18 point (24 CSS pixels) regular, or at least 14 point (about 18.66 CSS pixels) bold.
No. Text that is part of a logo or brand name, purely decorative text and text in inactive controls are exempt from 1.4.3.
Yes, just. #767676 on #ffffff is 4.54:1, the lightest neutral grey that passes AA for normal text on white. It fails AAA, which needs 7:1.
Design files often show colors at full opacity, while the live page may use transparency, thinner fonts or text on images. The scan measures what the browser actually draws.
The color checker runs in your browser and sends nothing. A page scan is loaded once and discarded; the result is kept in memory for two hours so you can email it to yourself.
Fixed quote
Get a fixed quote in 24 hours
Free, with no obligation. We reply within 24 hours, Monday to Friday, with a written fixed price or the questions we need answered first.
- Accessibility fixes, small site
- $500 to $2,000
- Small business website
- About $2,000
- Larger site or redesign
- $3,000 to $6,000
- Web app MVP
- $8,000 to $15,000
- Fixed price in US dollars, in writing, before work starts
- Built and fixed to WCAG 2.2 AA, tested by hand
- Code, content and accounts are yours on final payment
Prefer to talk? Call +1 (365) 440-1786 or email info@fourcents.ca.
Request your free quote
Only name, email and project details are required. Phone is optional.
Thank you, your details are in.
We have received your project details and will reply within 24 hours.