Accessible colour palette checker

What it checks

A brand palette is rarely used one pair at a time. The green goes behind white text on a button, the charcoal goes on the cream band, the accent turns up as a link colour. This check takes the whole palette, up to six colours and the page background, and measures every pair in it with the same formula and the same code as our contrast check.

Each pair gets its ratio and three words: Pass or Fail for normal text at 4.5:1, for large text at 3:1, and for the borders, icons and focus rings that 1.4.11 holds to 3:1. Contrast is the same whichever colour of the two is the text, so each pair is listed once. Ratios show two decimals and are never rounded up across a threshold: 4.499:1 shows as 4.49:1 and fails.

For every pair under 4.5:1 it works out the nearest shade that reaches it, keeping the hue: darker on a lighter partner, lighter on a darker one. It never changes your background; between two brand colours it changes the one that needs the smaller move, and tells you how many pairs pass once you use it, because a fix for one pair can break another. The rules behind the numbers are set out in colour contrast requirements explained.

How to use it

1. Set the page background your site uses most, usually white or an off-white.
2. Enter your brand colours from your style guide or your theme settings, with a name for each so the table reads like your brand ("Forest", not "Colour 2").
3. Read the table for the pairs you actually put together. Two light colours that never meet as text and background can fail without harm.
4. For a pair you do use, press its Use button to try the nearest passing shade, and watch the count of passing pairs.
5. Copy as CSS to hand the palette to whoever builds your site: the custom properties come with every pair's result as a comment.

What WCAG asks

"Large-scale" text is at least 18 point, or 14 point bold. W3C's Understanding note puts that at about 24px and 18.5px (1pt = 1.333px).

A brand guide does not buy an exception. W3C's Understanding document for 1.4.3 is plain about it:

Beyond logos and logotypes, text that has insufficient contrast due to corporate identity or brand guidelines is not exempted from the requirements of this criterion.

The logo itself is exempt; the brand colour used for headings, links and buttons is not. A common way out is the one the fixes here point to: keep the bright brand colour for fills and large shapes, and add one darker shade of it for text.

Is a palette that passes colour-blind friendly?

Mostly, and that is by design. WCAG's contrast ratio measures lightness, not hue, because lightness is what still separates text from its background when hues blur together. W3C's Understanding document for 1.4.3 says:

For people with color vision deficiency who are not able to distinguish certain shades of color, hue and saturation have minimal or no effect on legibility as assessed by reading performance.

The same document names the one exception: mostly red, long-wavelength colours on dark backgrounds, where the formula holds less well for people with protanopia. If your brand red sits on black or charcoal, give it more than the minimum.

Contrast is the other half. 1.4.1 Use of Color asks that colour is never the only way information is given: a red price for a sale, a green dot for "in stock". W3C's note on 1.4.1 counts two colours that also differ in lightness by 3:1 or more as a second visual difference, so this table helps there too; a word or an icon beside the colour is the surer fix. More in use of colour.

What a fail usually looks like

The palette the check opens with is a cafe's: charcoal for text, forest green for the brand and a mustard yellow for accents, on white. It is a fair picture of what a small business brings to a designer, and it fails in three different ways.

• A bright accent used as text. Mustard on white is 1.89:1: too faint for any text on white, and under the 3:1 that 1.4.11 asks of an icon or a field border. The nearest mustard that works as text is #937130, a deeper, browner yellow at 4.52:1. Keep both: the bright one as a fill, the deep one for words. Charcoal text on the bright mustard is 8.41:1, so a yellow band with dark text works.
• Two darks that look different but are not. Charcoal on forest green is 2.03:1. The hues differ; the lightness barely does. Text on a green band needs to be white (7.84:1), not charcoal.
• A pair that passes only when large. Mustard on forest is 4.14:1: a heading of 24px or more passes, the paragraph under it does not. Here the fix is small. Forest at #1d5642 brings the pair to 4.51:1 and still looks like the same green.

Before anyone rebuilds the site, the cheaper test is this one: decide which pairs carry text and which only carry colour. For the rest of the Level AA checks, the WCAG 2.2 AA checklist walks each one, and the guide to fonts and WCAG covers the type that sits on top of these colours. Once the palette is settled, new pages and banners are where a weak pair creeps back in; the monitoring platforms in Siteimprove alternatives rescan a site on a schedule and flag flat-colour text that falls below the line.