Checks
Computed, not looked up.
Whether white reads on the main blue, whether two greens look the same to someone who is red blind, whether one rule contradicts another: nexbrand computes it, every time something changes. No hint is written by hand.
Contrast of every pair
The tab Checks of every version holds a table: in the rows every colour as text, in the columns every colour as ground, and in each cell the grade by WCAG 2.2. AAA means 7:1, AA means 4.5:1, “large only” means 3:1 and so only for large text, “fails” means below.
A switch computes everything for large text from 24 px. A click on a cell shows a text sample in exactly that pair and the five thresholds: body text AA and AAA, large text AA and AAA, graphics and symbols at 3:1.
Pavo saysThe checks also run in the editor and in the wizard. So you see that a colour is too light while you are still moving it.
How others see the palette
About one man in twelve sees red and green differently from most people. Below the table nexbrand shows the palette as people who are green blind, red blind and blue blind see it, and in greyscale, as in black and white print. Every colour appears twice: as meant and as seen.
Two colours that are clearly different normally but blur for green or red blind people are reported as a hint. Blue blindness is rare; it is in the view but raises no hint.
What nexbrand reports
Serious hints appear as a number on the tab Checks. Each one names the colours it means and, where possible, one that works better.
| Hint | When |
|---|---|
| Nothing reads on a ground | No colour of the palette reaches 4.5:1 on this ground, or not even 3:1 for large text. |
| White on a colour | White is in the palette but does not reach 4.5:1 on a non-neutral colour. nexbrand names the text colour that works there. |
| Main colour as text | The main colour does not reach 4.5:1 on a light neutral, so it does not work for links. |
| Nearly the same | Two colours are less than 4 apart by CIEDE2000. |
| Green and red blindness | Two colours that are normally at least 15 apart fall below 10 for green or red blind people. |
| Word mark | The mark or the lettering of a drawn word mark does not reach 3:1 against its ground. |
| Body text too small | The step for body text is smaller than 16 px. |
| In-house only, system font | For information: an in-house font goes out only as a name, a system font needs a fallback. |
| Rules | An allowed pair is too faint, a pair is allowed and forbidden at once, a logo shows a forbidden pair or stands on the wrong ground, a step uses a font against a rule or is too small, a rule points at something that is gone. |
| Dark mode | Text, text on surfaces, quiet text, the main colour or text on buttons does not reach 4.5:1 in the dark, or a mapping is missing. |
Pavo saysUploaded logo files carry their own colours, and nexbrand does not check those. Drawn word marks, whose colours come from the palette, are checked.
The contrast checker
For the quick question in between: type text and ground, as HEX, rgb() or hsl(), and nexbrand computes while you type. You see a large sample, the ratio and the five thresholds, and below them the ratio as people with each colour vision deficiency see it.
If the pair is not enough, nexbrand proposes the nearest text colour of the same hue that reaches 4.5:1, lighter or darker in steps of one per cent. “Use it” puts it in.
How it is computed
Contrast by WCAG 2.2
Relative luminance in linear RGB. Ratios are cut off, never rounded up: 4.4992 becomes 4.49, not 4.5.
Colour vision after Machado 2009
The simulation by Machado, Oliveira and Fernandes at full strength, also in linear RGB.
Distance by CIEDE2000
The colour distance ΔE 2000 decides “nearly the same”, the comparison of two versions and, when collecting, “nearly right”.
The same maths runs twice, in the browser for the checks while editing and on the server for code, API and MCP, and both are tested against the same cases. A program gets exactly the hints you see in the app.