Checks · Chapter 18

Contrast checker

Sometimes you just want to know quickly whether a grey on a beige is enough, without creating a client. That is what the contrast checker is for: two colours, every check at once.

Entering two colours

In the header, Contrast opens the Contrast checker. It has two fields, Text and Ground. Both take colours as style sheets write them:

• #RRGGBB and the short form #RGB
• rgb() and hsl()

It computes while you type. If nexbrand cannot read a value, it says so and names the ways to write it. Swap swaps text and ground.

What you see

A large sample with a heading, body text at 16 px and small print at 12 px, plus the ratio and five criteria:

The nearest colour that passes

If the pair is below 4.5:1, nexbrand proposes a text colour: “Nearest text colour with 4.5:1 on this ground”, with hex value, ratio and the hue in degrees. It searches the same hue, darker or lighter in steps of one per cent, until it passes. Use it puts the colour into the Text field. So the hue stays recognisable, and only the lightness changes.

Contrast

With colour vision deficiencies

Under With colour vision deficiencies stand five tiles with the ratio as people with each deficiency experience it, by the same maths as in the chapter Checks. A pair that is enough normally can become clearly weaker there.

The same for programs

The API computes the same under /api/v1/contrast?fg=…&bg=…, with grades, colour vision and the nearest passing colour; over MCP the tool is called check_contrast.