Altwise

Don't rely on colour alone: swatches, sale prices, stock status and form errors

How to make product colour swatches, sale prices, in-stock dots, booked dates, required fields and links work for colour-blind and screen reader customers: add words, copyable HTML, platform notes and a 5-minute greyscale check.

Small business sites use colour to say things all the time: a red price means "on sale", a green dot means "in stock", a grey date means "fully booked", a red outline means "fix this field", and a row of coloured circles is how shoppers pick a sweater or a phone case. About 1 in 12 men and 1 in 200 women have some form of colour vision deficiency, screen readers don't announce colour at all, and bright sun on a phone washes colours out. If colour is the only signal, those customers miss the sale, book a full slot or buy the wrong colour. The rule is simple: colour can help, but never be the only way information is shown (1.4.1 Use of Color). Here's how to fix the common cases.

1. Product colour swatches and variant pickers

A row of coloured circles with no names is a guess for many shoppers. Give every swatch a name people can read and hear ("Chocolate brown", "Forest green"), show the selected colour in text next to the picker, and make the selected swatch look different by more than colour, such as a thick border or a tick. Use a real radio group so it works with the keyboard and screen readers (1.3.1 Info and Relationships, 4.1.2 Name, Role, Value).

<fieldset class="swatches">
  <legend>Colour: <span id="colour-chosen">Chocolate brown</span></legend>
  <label><input type="radio" name="colour" value="chocolate-brown" checked>
    <span class="dot" style="background:#5a3a22"></span> Chocolate brown</label>
  <label><input type="radio" name="colour" value="forest-green">
    <span class="dot" style="background:#2f5d3a"></span> Forest green</label>
  <label><input type="radio" name="colour" value="sold-out-red" disabled>
    <span class="dot" style="background:#a32020"></span> Brick red (sold out)</label>
</fieldset>
<style>
  .swatches input:checked + .dot { outline: 3px solid #111; outline-offset: 2px; }
  .swatches input:focus-visible + .dot { outline: 3px dashed #111; outline-offset: 2px; }
</style>
<!-- example colours; use your real variant names -->

The colour names are example details; use your own. If your design hides the names, keep them in the label for screen readers and show the chosen name in the legend, so sighted shoppers can read it too. The swatch border should also stand out against the page by at least 3:1 (1.4.11 Non-text Contrast). A sold-out colour needs the words "sold out", not just a faded or crossed-out dot.

2. Sale prices and discounts

A red price next to a grey crossed-out one reads as two random numbers to a screen reader, and many readers don't announce strikethrough at all. Say "Was" and "Now" in words.

<p class="price">
  <span>Was <s>$48.00</s></span>
  <strong>Now $36.00</strong> <span>(25% off)</span>
</p>
<!-- example prices -->

If your theme won't let you show "Was" and "Now", add a short line such as "Sale: $36, regular $48" in the product description, and check that the red sale price still has 4.5:1 contrast against its background (1.4.3 Contrast (Minimum)).

3. In stock, low stock, open now and booked

Green, amber and red dots are everywhere: stock status, "open now" badges, appointment calendars, delivery slots and campsite or class availability. Add the word every time.

4. Required fields and form errors

"Fields in red are required" and a red outline on mistakes are colour-only signals. Write "(required)" in the label, and put the error message in words beside the field, linked with aria-describedby. Our form error messages guide has copyable HTML for both.

5. Links inside text

If links in your paragraphs are only a different colour from the text around them, many people can't find them. Keep the underline on links in body text. If you do remove underlines, the usual WCAG technique is a link colour with at least 3:1 contrast against the surrounding text plus an underline or other visual change on hover and keyboard focus. Keeping the underline is simpler. See link text and buttons.

6. Charts, maps, allergen and "key" graphics

Pie charts, results charts, service-area maps and menu allergen icons often use a colour key: "green = vegan", "blue = zone 1". Label the parts directly ("Vegan", "Zone 1: Tulsa, Broken Arrow"), add patterns or icons with text, and give the same facts as a short list or table on the page. Don't write instructions that only use colour or position either, such as "click the green button on the right"; name the button ("select Book now") instead (1.3.3 Sensory Characteristics). See tables for prices, hours and menus.

7. Where to change this on common platforms

Settings and app names change often, so check your platform's or app's own help pages for the current option.

Common mistakes

A 5-minute check you can do today

  1. Turn on your phone's greyscale setting (iPhone: Settings, Accessibility, Display & Text Size, Color Filters, Grayscale; Android: Digital Wellbeing, Bedtime mode, or Accessibility, Color correction) and visit your best-selling product page. Can you still tell which colour is selected, what is on sale and what is in stock?
  2. In greyscale, open your booking calendar or class schedule. Can you tell full from available?
  3. Submit your contact form empty. Do errors appear in words, not just red outlines?
  4. Look at a paragraph with a link in it. Can you spot the link without colour?
  5. Tab to your colour picker and choose a different colour with the arrow keys. Does the chosen colour name change? See our keyboard test.

What a scan can and can't check here

Our scan is automated, so it finds only part of the barriers on the pages it visits. It can flag low text contrast, links in text that rely on colour with low contrast, unlabelled radio buttons and swatch buttons with no name. It can't tell whether a green dot means "in stock", whether a greyed-out date means "full", or whether shoppers can tell which swatch is selected, which is why the greyscale check above matters. Our Fix-Pack reports include copy-paste fixes for your platform for what the scan finds.

Related: colour contrast checker guide, online store checkout, reviews and star ratings, website accessibility checklist.

This is general technical guidance, not legal advice, and it doesn't certify compliance with the ADA or any law, or protect against claims.

Want the fixes written for you?

Start with a free homepage snapshot. The $149 Fix-Pack scans up to 10 pages and gives copy-paste fixes for your platform within 48 hours, with a 14-day refund promise. See a sample report first.

This is general technical guidance, not legal advice, and it does not certify compliance with the ADA or any law.

Selling from a product grid or collection page? See product grids, Load more, quick view and add to cart.

Running a Black Friday or holiday sale? See promo codes, sale prices and sale banners.

Adding heart icons or a wishlist? See wishlist, favorite and save-for-later buttons.

Related guides

All guides

This guide is general technical information, not legal advice. Following it does not certify ADA or any legal compliance. Automated checks find only part of accessibility barriers.

Check your own site, then decide

  1. Free homepage snapshot. Your top 3 issues in about a minute. No signup, no card.
  2. $149 Fix-Pack, if you want the full list. Up to 10 pages scanned, issues ranked by impact, copy-paste fixes for your platform, delivered within 48 hours, plus one re-scan after you apply them.

Get my free snapshot Order the Fix-Pack – $149

14-day refund promise. See a sample report first. A technical report, not legal advice; automated checks find only part of accessibility barriers.