Check your color contrast

There is no single pass mark, which is why a tool that shows one badge is not much help. The level depends on the size and weight of the text.

AA, the level nearly every policy and contract specifies, asks for 4.5:1 on normal text and 3:1 on large text. Large means 24 pixels and up, or 18.66 pixels if it is bold. AAA raises those to 7:1 and 4.5:1. Separately, buttons, form field borders and meaningful icons need 3:1 under a rule of their own.

So the same pair of colors can be perfectly fine for a heading and illegal for a caption, and both answers are shown here rather than one of them.

This is the result that makes people distrust the tool, so it is worth explaining properly.

The ratio is calculated from relative luminance, which is a measure of how much light a color sends to your eye. It is completely blind to hue. Two colors can sit on opposite sides of a color wheel, look plainly different to you, and carry almost the same luminance.

Orange text on white is the classic case, unmistakably orange and nearly as bright as the page behind it. The arithmetic is not being pedantic. It is describing what happens to that text for someone with low vision, on a phone in sunlight, or on a cheap monitor.

If you have read about contrast recently you will have come across APCA, a perceptual algorithm that handles dark mode and thin fonts considerably better than the formula above.

It is also a WCAG 3 draft. It is not normative, no legislation references it, and no audit is run against it. Quoting an APCA pass to an accessibility reviewer will not satisfy them.

So this reports WCAG 2.2, criteria 1.4.3, 1.4.6 and 1.4.11, which are the thresholds you will actually be measured against. They have not changed since 2008, and WCAG 2.2 left them alone.

Extremely common, particularly for mid-tone blues, greens and oranges, and it does not mean the color is wrong.

Keep it where it works. Large headings only need 3:1, and a color used as a filled block with white text on top is a different calculation from the same color used as text on white. Then derive a darker version for body copy and links.

Most brand guides that survive contact with a real website have both, the brand color and the accessible text version of it. The two suggestions in the panel are the nearest passing versions in each direction, so you can see how small the move actually has to be.

WCAG explicitly exempts logotypes from the text contrast rules. A wordmark can be any color against any background and it does not fail anything.

That exemption is narrower than people assume. It covers the logo as a logo. It does not cover your headings, your buttons, your navigation, or your brand color used for body text, all of which are held to the full standard.