Contrast Checker (WCAG)

How to use the Contrast Checker

1. Enter the text color. Type a HEX code such as #7A7A7A, paste an rgb() or hsl() value from your design file, or click the swatch to use your system color picker.
2. Enter the background color. The preview on the right updates as you type, showing large text, body text, small print and an outlined button in your exact pairing.
3. Read the ratio and the checklist. The big number is the WCAG contrast ratio. The table below it tells you which of the five standard checks pass: AA and AAA for normal text, AA and AAA for large text, and the 3:1 rule for icons and UI shapes.
4. Fix a failing pair in one click. When a pairing misses the next level, the tool suggests the closest text color and the closest background color that pass. It keeps the hue and saturation and only shifts lightness, so your palette still looks like your palette. Press Use to apply it.
5. Save or share the result. Copy a plain-text summary for a client, copy the two CSS declarations, or use Share — the colors are stored in the link, so whoever opens it sees the same pairing.

Why contrast is worth checking

Contrast is the difference in brightness between two colors, and it decides whether words survive contact with real screens. A portfolio caption in #9B9B9B on white looks elegant on a calibrated monitor at full brightness. On a phone at the bus stop it is a pale smudge, because that pairing is only 2.77:1. Roughly one in twelve men and one in two hundred women have some form of color vision deficiency, and almost everyone over fifty needs more contrast than they did at twenty. The people buying prints and booking commissions are not all reading on your studio display.

The Web Content Accessibility Guidelines turn this into a number. Each color gets a relative luminance between 0 (black) and 1 (white), calculated from its red, green and blue channels weighted by how sensitive the eye is to each — green counts for about 72%, red 21%, blue only 7%. The ratio is (lighter + 0.05) / (darker + 0.05), which runs from 1:1 for identical colors to 21:1 for black on white.

That weighting explains results that surprise painters. Pure red #FF0000 on white scores just 3.99:1, failing body text, yet the same red on black reaches 5.25:1 and passes. A cheerful mustard #F2C14E on white is a dismal 1.67:1, but on near-black #1D1C1A it hits 10.14:1. Hue tells you little; value does almost all of the work — which is exactly what you learned squinting at a still life.

Real pairings, measured

Notice how small the steps are. Moving from #E8590C to #C2410C keeps the same family of orange but takes a pairing from failing to passing. That is the kind of adjustment the fix suggestions above are designed to find.

Tips from practice

Check at the smallest size you actually use. Large-text rules only apply from 24px regular or roughly 19px bold. Captions, price labels and footer links are almost never that big, so hold them to 4.5:1 even when the headline above gets away with 3:1.

Beware of mid-tone backgrounds. On a 50% gray such as #808080, white text scores about 3.9:1 and black text 5.31:1 — neither is comfortable for long reading. If your brand color sits in the middle of the value scale, use it for shapes and buttons and put the text on something lighter or darker.

Test text over artwork at its worst spot. When lettering sits on a painting or photo, sample the lightest area behind light text and the darkest area behind dark text, then check those. If the worst spot fails, add a soft scrim, a solid band, or a subtle text shadow instead of hoping nobody notices.

Build a text-safe twin for each brand color. Keep your signature #E8590C for illustrations and large display type, and pair it with a darker #C2410C for links and small text. Clients rarely notice the swap; readers notice when it is missing.

Don’t encode meaning in color alone. A red “sold” dot and a green “available” dot can look identical to a visitor with deuteranopia. Add a label or a shape, then confirm with the Color Blindness Simulator.