Tool 04 · Legibility
A swatch shows what a colour looks like, not whether anyone can read the words on it. This checker takes two hex colours, runs them through the WCAG 2.x relative-luminance formula, and reports the ratio, the AA and AAA verdicts for normal and large text, and the exact darker or lighter colour that reaches your target.
It is built for anyone publishing colour guidance — a lookbook, a capsule-wardrobe chart, a brand guide — where cream on camel and cream on deep brown are not the same decision.
Hex values, with or without the leading #. Three-digit shorthand is expanded automatically.
Reference values. WCAG counts text as large at 24px regular (18pt) or 18.66px bold (14pt). Body copy at 16px is normal text, so it needs 4.5:1 rather than 3:1.
No hidden weighting here. This is the standard relative-luminance method from WCAG 2.x, and you can reproduce every number it shows with a calculator.
// linearise each sRGB channel
C = C / 12.92 when C <= 0.03928
C = ((C + 0.055) / 1.055) ^ 2.4 when C > 0.03928
// relative luminance
L = 0.2126 R + 0.7152 G + 0.0722 B
// contrast ratio
ratio = (L1 + 0.05) / (L2 + 0.05)
// L1 = lighter colour, L2 = darker colour
The 0.05 offset keeps the ratio at 1 for two identical colours and makes black on white come out at 21:1 rather than an infinity. The thresholds — 3:1, 4.5:1, 7:1 — are the WCAG 2.x minimums for large text, normal text, and enhanced contrast.
Below 3:1. The pair fails every threshold, including large text. It reads as a shape rather than as words.
Between 3:1 and 4.5:1. Large text (24px regular, or 18.66px bold) passes AA. Normal body text fails AA.
Between 4.5:1 and 7:1. The AA band for body text — the practical target for most published material, and comfortable in ordinary light on a calibrated display.
Above 7:1. You clear AAA for normal text. Much higher contrast is not automatically better: black on white at 21:1 can create glare.
Read the unrounded value. A pair at 4.499:1 is a fail, even though it prints as 4.5:1.
It assumes 8-bit sRGB on a calibrated display. The formula reads the hex value you type. Artwork in Display P3, Adobe RGB, or CMYK will not match the on-screen ratio.
It knows nothing about what is behind the text. Over a photograph or a gradient there is no single background luminance, and one word can fail on half its pixels.
It does not model glare, colour vision, or fatigue. A 4.5:1 pair can pass on a monitor and fail outdoors, or for a reader with reduced colour discrimination.
The size rule is about rendered pixels. A light serif at 18px still counts as normal text, however large it feels on a high-density display.
Because it is 4.478:1, and the requirement is 4.5:1. This is the most common near-miss in web accessibility, and it is why this tool prints the unrounded value next to the rounded one. Mid-grey #777777 was designed as a body-text grey on white before the 4.5:1 threshold existed. The classic fix is #767676: one digit darker, and the ratio clears 4.5:1.
For body text most people read on a normal screen, AA at 4.5:1 is the practical target and the level most accessibility policies reference. AAA at 7:1 is worth reaching for long-form reading, interface text people use daily, and anything outdoors. Decorative elements need nothing; an icon or boundary that conveys information needs 3:1 of its own.
No. Large text only needs 3:1 to pass AA, because larger letterforms keep distinguishable strokes at lower luminance separation. The thresholds are 24px regular (18pt) and 18.66px bold (14pt). Enter your real size and weight above and the tool applies the right one. Enlarging text to solve a colour problem is a legitimate fix, not a workaround.
Yes, and that is where the numbers are useful. A palette page that labels a swatch "warm sand #e8dcc8" in a similar tone is a common failure in fashion publishing: the colour system is fine, the typography is not. Checking a label against its own swatch takes ten seconds here, and the suggestions hand you the darker shade that keeps the hue and makes the text readable.
Most likely nobody: you are reading different colour values. Designers often specify colours in CMYK for print or in a wider gamut such as Adobe RGB, and converting those to sRGB hex changes the numbers. Ask for the sRGB hex or the luminance values. Another cause is opacity: 70% black on white is a different colour from solid black, and an opacity layer must be resolved first.
No, and treating it that way is the most common misuse of this number. A ratio describes one thing: the luminance separation between two flat colours. It says nothing about text over a photograph, plain language, comfortable line length, or font weight at small sizes. Treat it as a floor that removes the worst cases, then check the rest of the page yourself.
About this tool
Purpose. Compute the WCAG 2.x contrast ratio for any pair of hex colours, report AA and AAA pass or fail for normal and large text, and propose the smallest lightness change that reaches a target ratio.
Methodology. Relative luminance comes from the sRGB channels using the standard linearisation, and the ratio is (L1 + 0.05) / (L2 + 0.05). Suggestions keep the hue and change only lightness.
Best use. Before you publish — a lookbook, a palette page, a brand sheet — as a check on one pairing at a time.
Limitations. Flat sRGB colours only. No background imagery, gradients, opacity layers, print gamuts, or simulation of glare and colour vision.
Privacy Policy
No upload. All calculations happen in JavaScript inside your browser. The colour fields are never submitted anywhere. Closing the tab discards them.
Google AdSense. This site displays ads served by Google AdSense, which uses cookies to deliver advertising. You may opt out of personalised advertising at Google Ads Settings.
Third-party cookies. Google, as a third-party vendor, uses cookies to serve ads on this site. Google's use of the DART cookie enables it to serve ads based on your visit to this site and other sites.
No accounts. No login. No data stored between visits.
Disclaimer
The ratios follow the WCAG 2.x relative-luminance definition as published. That is a convention for the web; print accessibility standards or signage may use different thresholds. A passing result is not a compliance determination for any regulation.
Accessibility is wider than colour contrast. Language, structure, alternatives for non-text content, and layout readability all matter. Treat this tool as one check, and pair it with a manual review of the page.