Colour and contrast

How dark is dark enough

Designers measure how much text stands out from its background with a number called the contrast ratio. It goes from 1 to 1, which means the same colour and nothing to see, up to 21 to 1, which is black on white. The accessibility rules, WCAG 2.2, ask for at least 4.5 to 1 for normal text. That includes small grey hints, labels and links.

Large text can be a little lighter, at 3 to 1. Large means about 24 pixels, or about 18.5 pixels if it is bold. The same 3 to 1 also applies to the things you need to see to use a control, like the border of a box you type into, the outline of a tick box, or an icon you press.

These are minimums, and they are not rounded up. A grey that measures 4.49 to 1 does not pass. Greyed-out buttons that can’t be used and company logos don’t have to follow the rule, but that is no excuse to make everything else pale.

You don’t need to guess. Chrome, Firefox and Safari can all show the contrast of a piece of text in their developer tools, and plenty of free websites do the same if you paste in two colours. Go through the greys on your site one afternoon, write down the ones that pass, and from then on pick only from that list.

Colour should never be the only clue

About one man in twelve, and roughly one woman in two hundred, has trouble telling some colours apart, most often red and green. If the only difference between “paid” and “overdue” is a green dot and a red dot, these people see two dots that look the same.

So always add a second clue. A tick for success and an exclamation mark for a problem. A word, like “Paid” or “Overdue”. In charts, different line patterns, or the name written right next to each line. And links inside a paragraph should be underlined, not just blue. The accessibility rules list this among their most basic requirements.

Keep the keyboard outline visible

Some people move around a page with the Tab key instead of a mouse, or with a special switch, or by voice. They follow an outline around the button or link they are on, a bit like a cursor. Some designers remove that outline because they find it ugly. Then these people are completely lost. The accessibility rules ask for the outline to be visible.

A good outline is at least 2 pixels thick and clearly darker or lighter than what is next to it. Developers can use the :focus-visible style so it shows for keyboard users but doesn’t flash every time someone clicks with a mouse. Watch out for bars that stay stuck to the top or bottom of the screen, like a cookie notice. They must not cover the very thing the person is on. The 2023 rules added this as Focus Not Obscured.

Picking colours that pass

Start with the text colour, not the brand colour. Choose a dark grey or a deep blue for normal text that passes easily, then pick one or two lighter greys for less important text and measure them. Many cheerful brand colours, like yellow, orange or light green, can’t hold white text on top of them. Use those colours for large areas, borders or icons, and put dark text on them instead.

If you offer a dark version of your site, check it on its own. Bright white text on pure black can feel harsh during long reading. A very dark grey background with slightly softer white text is easier on the eyes and still passes easily.