Red and Green Holiday Graphics

Festive to most, a blur to some

In late November, many small business sites change colour. Banners turn red with green lettering, sale prices switch to red, and stock badges become green and red dots.

To most shoppers it looks seasonal. To a shopper with the most common kind of colour blindness, the red and the green can look like the same dull shade of brown or olive.

The banner becomes a block with faint marks on it. The sale price looks like every other price, and the dots are just dots.

Nobody writes in to complain. They phone to ask, or they buy somewhere easier to read.

Where colour carries the message

• Sale prices in red beside regular prices in black, with no other difference.
• Stock dots in green, amber and red, with no words beside them.
• Banner lettering in red on green, or green on red.
• Holiday hours calendars with open days shaded green and closed days red.
• Colour-coded tags or offers explained only by a coloured swatch.
• Gift guides sorted into price bands by colour alone.

The fourth costs the most. A shopper who cannot tell green squares from red ones cannot see which days you are open, and finds out at a locked door.

What red and green look like to some people

Red-green colour blindness is by far the most common kind, and it is much more common in men than in women.

It does not mean seeing in black and white. Reds, greens, browns and oranges of similar lightness tend to merge, so the difference a designer relied on disappears.

Lightness survives where hue does not. Dark green beside pale cream is still easy to tell apart; a bright red beside a bright green of the same weight is not.

Low vision, older eyes and a phone held outdoors on a bright day narrow the gap further, for everyone.

What WCAG 2.0 asks for

WCAG 2.0, the standard most sites are measured against, covers this twice.

The first, at its most basic level, says colour must not be the only visual means of conveying information or distinguishing an element. A red price that means sale breaks that rule unless something else says sale too.

The second sets how strongly text must stand out from whatever is behind it: 4.5 to 1 for normal-sized text, or 3 to 1 once the lettering is large.

Red lettering on green fails badly. Even bright red on white falls just short of the requirement for small text.

Sale prices that say sale

The fix for prices is words. Put the word sale beside the price, and show the old price as text: was 48 dollars, now 36.

A line through the old price helps sighted shoppers, but many screen readers read a struck-through price aloud as if it were an ordinary one. Two prices with nothing between them leave a listener guessing which applies.

Keep the red if you like it. Just make sure the price would still make sense printed in black ink.

Stock, hours and tags in words

A green dot means nothing until someone explains it, and a shopper with colour blindness cannot use the explanation anyway. Write in stock, two left or sold out beside the product.

Holiday hours belong in a plain list rather than a shaded calendar: Sunday, December 24, open ten to three; Monday, December 25, closed.

Shapes help a little: a tick and a cross survive where green and red do not. Words help most, because they also reach screen reader users.

A worked example

A thrift store run by a community charity, in a former grocery building in a suburb, holds a weekly sale: items with one colour of price tag are half price.

The website announced the week's colour with a coloured circle under the heading This week's tag. There was no word, only the circle.

In December the circle sat inside a red banner with green lettering, and the holiday hours were a calendar of green and red squares.

A regular told a volunteer at the till that he had never known which tags were on sale. He is colour blind, and the red and green tags look alike to him.

The site now says it in words: this week, green tags are half price. The banner was redone in white lettering on dark green, and the holiday hours became a list.

The store also began printing a letter on each colour of tag, G for green and R for red, and the website explains the letters.

Contrast that survives a phone

Holiday graphics are designed on a large monitor indoors and seen on a phone outdoors.

Check every banner's text against its background with a free contrast checker, which gives the ratio from the two colour codes. White or cream on dark green or deep red usually passes; mid-red on mid-green never does.

Put the offer in real text rather than inside the picture. Text in an image cannot be enlarged cleanly and says nothing to a screen reader without a description.

Testing the graphics themselves

Banners and badges are usually images, so test the images. Take a screenshot of the banner, a product grid and the hours, and turn each one grey in any photo editor.

Browser add-ons can also show a page the way people with the common kinds of colour blindness see it. And if someone on staff is colour blind, ask them to look before anything goes live.

If the grey version still shows the offer, the stock and the hours, it works for nearly everyone.

The counter-case

Red and green are not forbidden. A wreath, a ribbon or a red background behind white text harms nobody, because no information depends on telling the colours apart.

A business whose brand colours happen to be red and green can keep them, using them for shapes and backgrounds with strong contrast and leaving the words to explain.

The rule is narrower than it sounds: colour may decorate, but it should never be the only way a message gets across.

Before the holiday graphics go up

1. Find every coloured badge and add a word.
2. Write sale prices as was and now.
3. Turn shaded calendars into lists of hours.
4. Measure the contrast of every banner.
5. Turn screenshots of each graphic grey.
6. Put offers in real text, not images.
7. Keep red and green for decoration.

Step five is the one that catches the others. A graphic that still makes sense in grey hides no message in colour, and the check takes a minute per image.

Other type and layout choices that slow readers down are covered in justified text and long runs of capitals.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.