Colour

A cartoon character holding a phone stands under a rainbow of pink shades, thinking about overlapping colour circles

Colours carry meaning, and not everyone sees them the same way. About 1 in 12 men and 1 in 200 women have some form of colour blindness. Many more people have low vision, or are reading in sunlight on a cheap phone. Colour has to work for all of them.

Contrast

Contrast is the difference in brightness between text and what is behind it. It is measured as a ratio from 1 to 1, no difference, up to 21 to 1, black on white. The guidelines ask for at least 4.5 to 1 for normal text and 3 to 1 for large text, which means about 24px, or 18px in bold. Buttons and icons need 3 to 1 against their background too.

Where this goes wrong on a small organisation's site is nearly always the same 3 places.

  • Brand colours. The pink or the teal was chosen for a logo, and it looks lovely as a big shape. As text on white it usually fails. The fix is to use a darker shade of the same colour for text and links, and keep the bright one for big headings and backgrounds behind white text.
  • Grey text. Someone made the "less important" text light grey to make it look subtle. Dates, captions, footer links and hint text on forms are the usual victims. Mid grey on white, about #767676, is the lightest grey that passes.
  • Text on tinted boxes. Pink text on a pale pink box is the classic. Check the pair, not the colours on their own.

You do not have to drop your brand colour. Most brand colours pass at 3 to 1 for large headings and as a background behind white text. Pick a darker shade of it for links and body text and you have 2 colours that look like one brand.

Never colour alone

Colour on its own cannot carry information, because some readers do not see it. Pair it with something else.

  • Required fields marked with the word "required", or better, mark the optional ones with "optional".
  • Error messages in red with an icon and words that say what went wrong.
  • Links in paragraphs underlined, not only coloured.
  • A calendar where the "no session" days are crossed out or labelled, not only shown in red.
  • Charts with labels on each part and a line between the colours.
  • "Fields in red are required."
  • Green tick, red cross, with no words.
  • A pie chart in 5 shades of the same colour.

Check it

  1. Run WAVE. Low contrast text shows as an error, and the Contrast tab lets you nudge the colours until they pass, so you can see what shade would work.
  2. For your brand colours, open WebAIM's contrast checker (opens in a new tab) and paste in the text colour and the background colour. Your designer or your platform's theme settings will have the codes, 6 letters and numbers after a hash.
  3. Take a screenshot of your home page and look at it in black and white. Most phones have a greyscale filter in accessibility settings. Can you still tell what is a link, what is a button, and what is an error?

Find one page with grey text on it. Change the grey to the body text colour. Nobody will miss the grey.

In the guidelines: 1.4.3 Contrast (minimum) (opens in a new tab) (AA), 1.4.1 Use of colour (opens in a new tab) (A), 1.4.11 Non-text contrast (opens in a new tab) (AA).

Next: PDFs, posters and flyers →

Discussion

Log in to join the discussion. Your comment will be checked before it appears publicly.