ToolVault

Symptom: a review asks for "passing contrast"

Building a web page / mini-program, an accessibility check reports: "this text has 3.2:1 contrast, below WCAG AA's 4.5:1". What does that mean?

WCAG contrast thresholds

WCAG (Web Content Accessibility Guidelines) measures the difference between foreground (text) and background with a contrast ratio:

| Content | AA (minimum) | AAA (enhanced) | |---|---|---| | Normal text | 4.5:1 | 7:1 | | Large text (≥18pt or ≥14pt bold) | 3:1 | 4.5:1 | | Graphics / UI component borders | 3:1 | — |

Rule of thumb: body text at least 4.5:1, large text at least 3:1 passes most compliance reviews.

How contrast is computed (briefly)

The core is each color's relative luminance (human eyes weigh green brightest, blue darkest), then:

contrast = (L1 + 0.05) / (L2 + 0.05)

L1, L2 are the lighter and darker colors' relative luminance. Hand-calculating is tedious — a tool is easier.

How to tune it to pass

1. Darken the background or lighten the text — the most common, effective fix (e.g. dark-gray text on white, not light-gray on white);
2. Avoid weak pure-gray contrast — light-gray text on white easily fails;
3. Loosen for large headings — large text only needs 3:1, so a slightly lighter color is OK;
4. Try pairs in a tool — enter foreground/background, see the ratio and pass/fail instantly.

Open the Color Contrast Checker on ToolVault: paste two colors, get the ratio and AA/AAA verdict; switch colors with the Color Converter between HEX/RGB.

FAQ

Where does 4.5:1 come from, must I follow it?

It's an empirical threshold from WCAG readability research. Laws/tenders often treat it as the compliance line; at least keep body text readable, not below 3:1.

My brand color doesn't pass — what now?

Use the brand color on small-area accents, and a neutral dark color for body text; or use a darker shade of the brand for text, keeping identity and compliance.

Do text-on-image need checking too?

Yes. Complex image backgrounds are harder to pass — add a semi-transparent overlay before placing text to guarantee the text-area contrast.

Provided by ToolVault. Related tools: Color Contrast Checker, Color Converter, Palette Generator. Visit the home page for more developer tools.