Colour contrast for accessibility, with the checker

Why you’d do this

A line of grey text on a white page can look elegant on your own monitor and be unreadable on a phone in sunlight, or for a reader with low vision or colour-vision deficiency. Contrast is the measurable part of that problem. The Web Content Accessibility Guidelines (WCAG) turn it into a number, the contrast ratio, with pass marks you can check before a design ships.

This guide shows how to read that number with the Colour Tools checker, which thresholds apply, and why a passing ratio is not the whole story, especially when colours carry meaning on their own.

How, with the named tool

Color Tools has three tabs, Palette, Gradient and Convert & Contrast. The contrast check lives in the third one, and it works on your device.

1. Open Convert & Contrast. Choose the tab under the title.
2. Enter your two colours. Set Text color and Background color. You can type into the HEX, RGB or HSL fields and the other two follow, so a value copied from a design file in any of the formats works.
3. Say whether the text is large. Tick Large text (18pt and up, or 14pt bold) if it applies.
4. Read the verdicts. The tool shows the Contrast ratio and two lines, AA — minimum contrast and AAA — enhanced contrast, each marked Pass or Fail.
5. Adjust and share. Change one colour and watch the verdict update. Copy link to this result keeps the settings in a URL you can send to a colleague.

If you are still choosing colours, build a base palette on the Palette tab, using a harmony such as Complementary or Analogous, then bring the pairs you plan to use to the contrast tab. Harmony schemes pick hues that look balanced, not pairs that are readable together, so always check the text pairs.

What to watch for

The thresholds. For normal body text, WCAG level AA asks for a ratio of at least 4.5:1. Level AAA asks for 7:1. Text counts as large at 18pt and above, or 14pt and above if bold. Large text needs only 3:1 for AA and 4.5:1 for AAA. The ratio runs from 1:1, identical colours, up to 21:1, black on white. The same 3:1 mark is the one WCAG sets for meaningful parts of an interface, such as the outline of an input field, though the checker only compares the two colours you type in.

A close miss is a miss. A ratio of 4.4 fails the 4.5 mark. Do not round up. If a brand colour narrowly fails, darken the text or lighten the background a little, and recheck.

How the number is computed. The ratio compares the relative luminance of the two colours, a measure of how bright each one is, with each colour first converted from its stored sRGB value to linear light. That conversion has a small cut-off point. The checker uses 0.03928, the value printed in the WCAG 2.x text. The newer sRGB standard gives 0.04045. The two differ so slightly that the ratios only separate in the far decimal places, but using the WCAG value keeps this tool’s results in line with the published WCAG figures.

Converting between formats can shift a channel by one. HEX, RGB and HSL use 8-bit values, so a round trip can move a channel by 1. This is rounding, not a bug, and it will not change a verdict unless you are sitting right on the line.

Contrast is not the whole story for categorical colours. Charts, maps and status badges often use several hues to tell categories apart, such as one colour per bar or line. A ratio between two hues of similar lightness comes out close to 1:1, even when they look very different on a colour monitor. That is because the formula measures lightness only, not hue. So a contrast ratio is the wrong test for whether categories can be told apart. People with colour-vision deficiency may see two such hues as the same colour, and in greyscale or on a printout they can merge entirely. Add a second cue: direct labels, different line patterns or marker shapes, and a clear difference in lightness between neighbouring categories. The checker can help with the lightness part, by showing a low ratio between two category colours that sit next to each other, but it cannot tell you the legend is accessible.

The check covers only the two colours you enter. It does not know about a photo behind the text, an overlay, or the rest of the design.

FAQ

What contrast ratio do I need for body text?

At least 4.5:1 to meet WCAG AA, and 7:1 for AAA. If the text is large, 18pt and up or 14pt and up in bold, 3:1 meets AA and 4.5:1 meets AAA. Tick Large text in the tool so it applies the right pair of thresholds.

Why does the checker say my colours fail when they look fine to me?

Your screen, your eyesight and the room lighting are not the reader’s. The ratio is a repeatable standard that does not depend on any single display. If a pair fails, treat the number as the fact and adjust the colours, rather than relying on how it looks on your monitor.

Is placeholder text or a disabled button covered?

Disabled controls are exempt under WCAG, but placeholder text is real text and still needs enough contrast to be read. When in doubt, check the pair, and prefer a visible label over placeholder-only instructions.