Product Colours Shown Only as Swatches

A row of small squares

A product page offers a jacket, a dog collar or a roll of fabric in eight colours. They appear as a row of small squares under the price, and choosing one changes the photograph.

The page never says what any of them is called. With a mouse, pausing over a square may bring up a name; on a phone, nothing does.

For most shoppers that is a small nuisance. For a colour-blind shopper, three of the squares may look the same, and the photograph does not settle it.

The order goes in for the wrong colour, or it never goes in at all.

Who cannot tell the squares apart

• Colour-blind shoppers, for whom navy, black, olive and brown can merge.
• Shoppers with low vision, who see a blur of similar dark squares.
• Screen reader users, who hear "link" or a file name instead of a colour.
• High contrast users, whose settings repaint every square the same.
• Phone shoppers outdoors, where glare flattens dark shades together.
• Anyone buying for someone else who asked for the sage, not the olive.

The first is the group shops hear least from. Colour blindness is far more common in men than in women, most people who have it rarely mention it, and a shopper who cannot tell two squares apart simply leaves.

What a square says to a screen reader

A swatch is usually a small link, button or image with no text of its own. A screen reader, the software that reads pages aloud for blind and partially sighted people, can only announce what the code contains.

So it says "link" eight times, or reads out a file name such as swatch-07.jpg. Neither tells the listener which colour they are about to pick.

Every swatch needs a text name, in the alternative text of an image or the label of a button, and the chosen one needs to be announced as chosen.

Put the name on the page

The change that helps every shopper at once is the colour's name in plain text under or beside each square, and a line above them that updates when one is picked: Colour: navy.

Tooltips that appear on hover are not enough. They need a mouse, they appear only after a pause, and phones never show them.

Where the squares are too small to label one by one, the updating line does most of the work. The shopper taps, reads the name and knows.

Plain names, not only clever ones

Suppliers often give colours names like Midnight, Moss, Biscuit or Storm. They suit a catalogue and tell a colour-blind shopper very little.

Keep the supplier's name if customers search for it, and add a plain one beside it: Midnight (dark navy), Moss (olive green). The plain words are what the shopper can check against what they want.

A good test is whether you could describe the colour that way over the phone.

A worked example

A chair caner restores cane, rush and woven seats in a garage workshop at home, and sells Shaker tape, the flat cotton webbing woven into chair seats, through a small online shop.

The tape comes in about twenty colours, shown as small squares on a single product page. Most customers order two colours, to weave a checked pattern.

A customer emailed to say his tape had arrived in black and brown, when he had meant to order navy and olive. He was colour-blind, had picked by position in the row and had miscounted.

The shop had sent what was ordered. But the confirmation email listed only product codes, so nothing had given him a chance to notice before the rolls were cut.

The page now shows each colour's name under its square, with a line reading Colour: navy once one is chosen. The cart, the confirmation email and the packing slip all carry the name beside the code.

The caner also added a daylight photograph of each roll.

Show which one is chosen

Many shops mark the chosen swatch with a thin border in the brand colour, often red or green. That is colour again, and a colour-blind shopper may not see which square has it.

Use a thick dark outline, a tick, or both, together with the updating name. Shape and words survive where colour does not.

Sold-out colours need the same care. A faded square can look like any other square; the words sold out beside it cannot be missed.

Carry the name through the order

The colour has to stay visible after the product page. In the cart, at the checkout and on the order summary, each line should read like a sentence: Shaker tape, one inch, navy, ten yards.

The confirmation email is the last cheap place to catch a mistake. A code such as ST-107 means nothing to the customer; a colour name gives them a reason to reply before the order is packed.

Invoices and packing slips should match, so whoever picks the order checks a name as well as a number.

What WCAG says

WCAG 2.0, the accessibility guidelines most reviews measure against, has a Level A success criterion on exactly this: colour alone may not be what carries information or sets one element apart from another.

A row of unnamed swatches fails it, and so does a chosen swatch marked only by a coloured border. Text alternatives for images, another Level A requirement, cover the screen reader side.

The counter-case

A shop selling each product in two or three colours, with the colour already in the product name and a photograph for each, may need very little change.

Some shades are genuinely hard to name. Even then, a plain attempt gives the shopper something to check.

Swatches themselves are fine; they are a quick way to compare. The rule is only that a swatch never stands alone: name every colour in text, on the page and through the order.

Before the holiday orders

1. Read each product page with the photographs covered.
2. Add a plain name under every swatch.
3. Show the chosen colour in words above them.
4. Mark the selection with a dark outline or tick.
5. Put colour names in the cart and checkout.
6. Add the name to confirmation emails and packing slips.
7. Test one page with a screen reader.

Step six is the one that rescues orders already placed. A customer who meant navy and olive, and reads black and brown in the confirmation, can catch the wrong click while it still costs nothing to fix.

Another control that relies on a picture where words should be is covered in icons that vanish in high contrast mode.

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.