A customer emails to say they could not tell which items on your order form were out of stock. You look at the page and it seems obvious: the unavailable sizes are red, the available ones are green. For that customer, red and green look close to the same muddy shade, so the page told them nothing at all.
A color blind friendly website is not a special version of your site or a palette of “safe” colors. It is a site where color is never the only thing carrying a message. This post covers that one idea in detail: where it breaks on real business sites, the WCAG criterion behind it, and how to check your own pages in a few minutes with tools you already have.
What a color blind friendly website has to allow for
Most people with a color vision deficiency see color, just not the way a designer expects. The common forms make reds and greens hard to separate. Less common forms affect blues and yellows, and a few people see almost no color. What they all share is that two hues you picked to look different can land on top of each other.
So the risk is not that someone sees your brand in gray. The risk is that two states you meant to contrast, such as “in stock” and “sold out”, or “paid” and “overdue”, look like the same state. That is a usability problem for everyone who relies on the difference, including people on a dim phone in sunlight and anyone printing your page in black and white.
WCAG 1.4.1 Use of Color, in plain words
WCAG has a Level A criterion called 1.4.1 Use of Color. It says color must not be the only visual means of conveying information, indicating an action, prompting a response or distinguishing an element. Level A is the most basic tier, so this sits underneath the usual AA target, not on top of it.
Notice what it does not say. It does not ban color, and it does not ask you to change your brand palette. It asks you to add a second cue next to the color: a word, an icon, a pattern, an underline, a change in shape or position. Keep your red. Just do not make red do the job alone.
It is also a different question from contrast. Contrast is about whether text and controls stand out enough from their background, with set ratios to measure. If that is what you are working on, our post on contrast ratio requirements covers the numbers. A page can pass every contrast check and still fail 1.4.1, because a dark red and a dark green can both contrast well against white while looking alike to the reader.
Links that only differ by color
This is the most common 1.4.1 problem on WordPress sites. Many themes remove the underline from links inside paragraphs and rely on a blue or brand-colored word to show it is clickable. To someone who cannot pick out that hue, the link is just another word in the sentence.
The simple fix is to keep underlines on links in body text. Navigation menus and buttons are usually fine without them, because their position and shape already say “this is a control”. Running text is where the underline earns its place.
Some designers push back on underlines because they look busy. WCAG’s guidance does allow a color-only link in narrow cases, where the link color has enough contrast against the surrounding text and the link gets an extra cue such as an underline on hover and keyboard focus. In practice that is harder to get right than leaving the underline on, and on a touch screen nobody ever sees the hover cue. A thin underline with a little offset looks tidy and solves the problem.
.entry-content a {
text-decoration: underline;
text-underline-offset: 0.15em;
}While you are looking at links, check that the words themselves make sense. That is a separate topic, handled in our guide to descriptive link text.
Form fields, errors and success states
Forms lean on color more than any other part of a site. Typical examples:
- A field border turns red when the entry is wrong, with no message.
- Required fields are marked by a red label instead of a word or an asterisk explained at the top.
- A green banner appears after submitting, but the text inside it is the same as before.
- A password strength meter goes from red to green with no label.
Each of these needs words. An error should say what went wrong in text next to the field, for example “Enter a phone number with area code”. A required field should say “required”. A strength meter should say “weak” or “strong”. An icon can help as well, as long as it is not a second color-only signal. The full approach to writing and announcing error text belongs to our post on accessible error messages; for this topic, the rule is simply that a red border alone is not a message.
Charts, maps and status labels
Business sites use more charts than people think: a nonprofit’s annual report page, a donor progress bar, a service area map shaded by region, a pricing comparison with colored check marks. Here is how to make each one readable without color vision.
Charts and graphs
Label lines and bars directly instead of relying on a color legend in the corner. If a legend is unavoidable, add patterns or different line styles (solid, dashed, dotted) and distinct marker shapes. Put the key numbers in text below the chart or in a small table, which also helps screen reader users. If you can read the chart printed in grayscale, you are most of the way there.
Maps
A map that shades counties green for “we serve this area” and gray for “we don’t” fails for some readers and fails completely for screen reader users. List the areas in text next to the map. Then the map becomes a nice extra rather than the only source of the answer.
Status badges and calendars
Order status, appointment availability and event calendars often use colored dots. Add the word: “Open”, “Full”, “Waitlist”. On booking calendars, unavailable dates can be struck through or dimmed and marked as unavailable in text, not just shaded pink.
Store swatches and product filters
On an online store, color itself is sometimes the information. A shirt comes in navy, forest and burgundy, and the shopper picks a swatch. Here the swatch is fine, because the color is the product, but the name still has to be available. Show the color name when a swatch is selected, and give each swatch a text name that a screen reader can read. A shopper who cannot tell forest from olive will still want to know which one they are buying.
Also check how the selected swatch is shown. A thin colored ring around the chosen swatch is easy to miss. A thicker border, a check mark or a visible “Selected: Forest” label is clearer. The same goes for filter chips and toggles that only change color when switched on. Our post on product filter accessibility goes further into filters if your store has them.
How to design for color blindness without redesigning
You rarely need a new palette. Most fixes are small additions to the existing design. A practical order of work:
- List every place your site uses color to mean something: links, forms, required fields, stock levels, statuses, charts, maps, calendars, selected states.
- For each one, ask: if this were printed in black and white, would the meaning survive?
- Where it would not, add text first. Words are the most reliable second cue.
- Where text does not fit, use an icon, pattern, shape, underline or border weight.
- Recheck contrast of anything you added, since new icons and borders count as non-text content too.
When you are choosing colors for something new, avoid pairing red and green as the only difference between two states, and do not rely on pale tints that differ only in hue. Beyond that, palette choice matters less than you might expect: a color blind friendly website comes from the labels and icons you add, and two well-chosen hues with no label still fail.
Testing with simulators and a grayscale check
You can test this yourself in a few minutes. There are three easy methods, and they catch slightly different things.
Grayscale on your phone or computer
Both iPhone and Android phones, and Windows and Mac computers, have a grayscale or color filter setting in their accessibility options. Turn it on, open your site and walk through a purchase, a form submission and any page with a chart. Anywhere you hesitate, color was doing the work alone.
Browser simulators
Chrome and Firefox developer tools can emulate common types of color vision deficiency on the page you are viewing. This is closer to the real experience than grayscale, because it keeps the colors that remain distinguishable and merges the ones that do not. Try the red-green types first, since they affect the most people.
A quick automated scan, with limits
Automated checkers catch a slice of this. The free axe extension, for example, has a rule for links that stand out from the surrounding paragraph by color alone, and our guide to running axe DevTools shows how to read its results. But no tool can tell whether a red border means “error” on your form or whether your chart legend makes sense. This criterion is mostly a human judgment, which is why the grayscale walk-through matters more than any score.
For how this fits with alt text, headings, documents and the rest of what editors control, see our main guide to writing accessible content. The bigger picture of audits, fixes and monitoring sits in our website accessibility hub.
Frequently asked questions
Do I have to change my brand colors to be color blind friendly?
Usually not. WCAG only asks that color never works alone, so the fix is normally to add a second cue such as text, an icon, an underline or a pattern. You can keep your palette. You may still need to adjust shades if text or icons fail the separate contrast requirements.
Are red and green always a bad combination?
Red and green are fine as decoration and fine together if something else also shows the difference. The problem is using them as the only signal, for example green for available and red for sold out with no words. Add the label and the combination stops being a barrier for readers who confuse those hues.
Are links without underlines an accessibility problem?
Inside paragraphs they often are, because the reader has to spot the link by color alone. Menus and buttons are usually clear from their shape and placement. Keeping underlines on links in body text is the simplest way to meet the use of color criterion and costs nothing in design terms.
Can an accessibility plugin fix color-only information?
Not reliably. A plugin cannot know that a red border means an error or that a shaded map region means a service area. Some toolbars let visitors switch to high contrast, but that does not add the missing words. The fix has to be made in the theme, the form plugin or the content itself.
If a review like this turns up more than a few color-only patterns across your templates, it can be a sign the design needs a proper rethink rather than patches. That is the kind of decision we help with in an accessible website redesign, where these cues are built in from the first mockup.
Next in this series: Plain Language Writing for Your Website: A US Guide
