Design Guide

Colour Blind Friendly Design for Websites

Most people with colour vision deficiency see plenty of colour. What they lose is the ability to tell certain colours apart, usually reds from greens. A website is colour blind friendly when nothing on it depends on that ability: every link, error, status, chart and selected state also has a word, a shape, a pattern or a lightness difference. This guide covers who is affected, what WCAG asks for, the practical rules with good and bad examples, the palettes that hold up, and how to check your own pages in a few minutes.

Reviewed by Khushwant Parihar, CPACC

Updated October 2026W3C: Understanding 1.4.1 Use of Color

Free tool: Website Vision Simulator

Enter a web address or upload a screenshot and see the page with protan, deutan or tritan colour vision deficiency, achromatopsia, blurred vision or low contrast sensitivity, next to the original. It is the fastest way to find links, errors and charts that only colour tells apart.

Open the Website Vision Simulator

Colour Vision Deficiency: Types and How Common It Is

Colour blindness, more accurately called colour vision deficiency (CVD), usually means that one of the three types of cone cell in the eye is missing or responds differently from normal. Very few people see no colour at all. The common forms affect the red and green cones, and because the genes for those cones are carried on the X chromosome, inherited red-green deficiency is far more common in men than in women. Colour Blind Awareness estimates that it affects about 1 in 12 men and 1 in 200 women, around 3 million people in the UK.

Types of colour vision deficiency, the cones affected, what people confuse, and approximate prevalence
Type	Cones affected	What gets confused	Approximate prevalence
Deuteranomaly	Green cones shifted	Reds, greens, oranges and browns, from mildly to strongly	About 5% of men, the most common form
Deuteranopia	Green cones missing	The same colours, more strongly	About 1% of men
Protanomaly	Red cones shifted	Reds, greens and browns; reds look duller and darker	About 1% of men
Protanopia	Red cones missing	As above; dark reds can look close to black	About 1% of men
Tritanomaly and tritanopia	Blue cones shifted or missing	Blues with greens, yellows with pinks	Rare: together perhaps 1 in 30,000 to 50,000 people; achromatopsia about 1 in 33,000
Achromatopsia	No working colour vision	Every colour of similar lightness; often with light sensitivity and reduced sharpness

Figures for men are the breakdown by Colour Blind Awareness of the main types of colour blindness of the 8% of men with inherited red-green deficiency; the rare types are its estimates. Dark reds appearing near black for protanopes is noted by Okabe and Ito, who are both protanopes themselves.

Be precise about the headline number

The “1 in 12 men” figure matches surveys of people of European ancestry, and the rate varies between populations. Colour Blind Awareness notes it rises to about 10 to 11% of men in Scandinavia. A 2012 meta-analysis by Birch in the Journal of the Optical Society of America A put red-green deficiency at about 8% of men and 0.4% of women among European Caucasians, but between 4% and 6.5% among Chinese and Japanese men. So the rate in your audience depends on who your audience is. At any realistic scale, though, it is far too many people to design around.

Colour vision can also change during life. The NHS page on colour vision deficiency lists glaucoma, diabetes, multiple sclerosis, a stroke, an eye or head injury and some medicines among the causes, and Colour Blind Awareness suggests acquired deficiencies could affect as many as 3% of people while noting that reliable figures are hard to find. Add everyone reading a phone in bright sunlight or on a greyscale e-reader, and colour-only design fails more people than any prevalence table shows.

What WCAG Asks For: 1.4.1, 1.4.3 and 1.4.11

Three WCAG 2.2 success criteria cover colour blind users. Only one of them is about colour as such; the other two are about lightness contrast, which is the part of colour that colour vision deficiency mostly leaves intact.

WCAG 2.2 success criteria that protect colour blind users, their level, what each requires and what it means in practice
Criterion	Level	What it requires	What it means for colour blind users
1.4.1 Use of Color	A	Colour is not the only visual way of conveying information, indicating an action, prompting a response or distinguishing an element.	The core rule. Colour can stay, but another cue has to carry the same meaning.
1.4.3 Contrast (Minimum)	AA	Text has at least 4.5:1 contrast with its background, or 3:1 for large text (18 point, or 14 point bold).	Red or green text stays readable because its lightness, not its hue, sets it apart from the background.
1.4.11 Non-text Contrast	AA	Control boundaries, states, focus indicators and graphics needed to understand the content have at least 3:1 against adjacent colours.	Icons, chart marks and input borders remain visible when their hue is lost.

The key idea is that contrast and colour are different things. Colour vision deficiency takes away hue differences; lightness differences mostly survive. That is why the W3C’s Understanding document for 1.4.1 accepts a lightness difference of at least 3:1 as a cue that does not depend on seeing colour. It is also why passing 1.4.3 is not enough on its own. Red #D32F2F and green #2E7D32each have about 5:1 against white, so both are fine as text, yet the contrast between them is only about 1.03:1. Used as the only difference between “failed” and “passed”, they fail 1.4.1.

1.4.1 does not discourage colour. The Understanding document welcomes colour coding as long as something else carries the same meaning. For the full criterion text, techniques and failures, see the 1.4.1 Use of Color reference.

1. The Core Rule: Never Use Colour Alone

Every time colour carries meaning, add a second cue that works without colour vision. You have plenty to choose from:

Text: a label, a word such as “Error” or “Required”, or a value.
Shape: icons that differ in outline, not just fill colour, such as a tick, a cross and a triangle.
Pattern and line style: hatching, dots, dashed and dotted lines, marker shapes.
Position and weight: a bar under the selected tab, bold text, a border that gets thicker.
Underlines for links in running text.
Lightness: a clear light-versus-dark difference of around 3:1 between the two colours.

A quick question to ask of any coloured element: if this were printed in black and white, would I still know what it means? If the answer is no, it needs another cue.

Fails: instructions that name a colour

“Fields shown in red are required.”

“Click the green button to continue.”

Works: instructions that name a cue anyone can see

“Required fields are marked with an asterisk (*).”

“Select Continue to go to payment.”

2. Underline Links in Running Text

A link inside a paragraph that differs from the words around it only by colour is a classic 1.4.1 problem, and WCAG lists it as failure F73. For many colour blind readers a blue link in dark grey text is just more dark text. The simple, robust fix is an underline.

Why the no-underline option rarely works

WCAG technique G183 lets a link rely on colour if the link colour has at least 3:1 contrast with the surrounding text, while both colours still meet the text contrast requirement against the background. Do the arithmetic and the room is tiny. With black body text on white, a link colour needs a relative luminance between about 0.10 and 0.18: mid blues such as #2563EB work (5.17:1 on white, 4.06:1 against black). With the very common #333333 body text, no colour works at all, because anything 3:1 lighter than the text drops below 4.5:1 on white. G183 itself notes that dark link colours can be hard to tell from black text even at 3:1.

Fails: colour is the only link cue

Body text #333333, links #2563EB with no underline. The contrast between them is 2.44:1, below the 3:1 G183 needs.

body { color: #333333; }

/* F73: links only differ from text by colour */
p a {
  color: #2563eb;
  text-decoration: none;
}

Works: an underline that every reader can see

The underline identifies the link for every type of colour vision, and hover and focus change something other than colour.

p a {
  color: #1d4ed8;           /* 6.7:1 on white */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

p a:hover,
p a:focus-visible {
  text-decoration-thickness: 3px;
}

The rule matters most for links inside paragraphs, lists and table cells. Links in a navigation bar, a card title or a button are already identified by their position and shape, so they do not need an underline to meet 1.4.1. The 1.4.1 Understanding document also confirms that visited and unvisited links may differ by colour alone.

3. Form Errors and Required Fields

Turning a field’s border red, or a label red, is the classic way to mark an error, and on its own it is WCAG failure F81. To someone with deuteranopia, a red border and a mid-grey border can look like two similar dull outlines. Errors need words, and ideally an icon and a heavier border too, so the state reads in any colour vision and in greyscale.

Fails: a red outline is the only signal

<label for="email">Email address</label>
<input id="email" type="email"
       class="border-red">

<!-- Nothing says what is wrong,
     and only colour says anything is -->

Works: text, icon and border weight

<label for="email">Email address (required)</label>
<input id="email" type="email"
       aria-invalid="true"
       aria-describedby="email-error">
<p id="email-error" class="field-error">
  <svg aria-hidden="true"><!-- warning icon --></svg>
  Error: enter an email address
  like name@example.com
</p>

/* The state shows in three ways, and colour is only one of them */
input[aria-invalid="true"] {
  border: 2px solid #b91c1c;   /* thicker than the 1px default */
}
.field-error {
  color: #b91c1c;              /* 6.5:1 on white, so it also passes 1.4.3 */
  display: flex;
  gap: 0.5rem;
}

For required fields, put the word “required” in the label, or use an asterisk and explain it once at the top of the form. The 1.4.1 Understanding document gives exactly this pattern as a passing example: required labels in red that also carry an icon. The error message itself, with aria-invalid and aria-describedby, also serves screen reader users under 3.3.1 Error Identification. The accessible form validation guide covers timing, error summaries and focus.

4. Status Indicators, Badges and Selected States

Dashboards are full of green, amber and red dots, and they are exactly the colours that red-green colour vision deficiency merges. The same goes for a tab that shows it is selected only by turning blue, or a toggle that goes from grey to green.

Fails: status dots that differ only in colour

<span class="dot dot-green"></span> Payments API
<span class="dot dot-amber"></span> Search
<span class="dot dot-red"></span>   Email

Works: shape and words carry the status

<span class="status status-ok">
  <svg aria-hidden="true"><!-- tick --></svg>
  Payments API: Operational
</span>
<span class="status status-warn">
  <svg aria-hidden="true"><!-- triangle --></svg>
  Search: Degraded
</span>
<span class="status status-down">
  <svg aria-hidden="true"><!-- cross --></svg>
  Email: Down
</span>

Use icons with different outlines, not the same circle in three colours. A tick, a triangle and a cross are told apart by shape alone.
Keep the word. “Operational”, “Degraded”, “Down” work for everyone, including screen reader users, and remove any need for a legend.
Show selection with more than colour. A selected tab gets a thick bar underneath and bold text; a toggle shows On and Off or moves its thumb; a chosen option gets a tick.
Give icons enough contrast. If the icon is what tells people the status, it is a graphic needed to understand the content, and 1.4.11 asks for 3:1 against its background.

If the status changes while someone is on the page, announce it to screen reader users too; the accessible notifications guide shows how.

5. Charts, Graphs and Maps

Charts lean on colour harder than anything else on a page. Three habits make them readable without it: label each series directly on the chart instead of in a legend, give each series a second visual property such as a dash pattern or marker shape, and provide the numbers as a table. The accessible charts guide covers the markup, patterns and data table in depth; here is the colour-specific part.

Fails: red and green lines with a legend

Two solid lines in #D32F2F and #388E3C, explained by coloured squares in a legend. With deuteranopia the two lines look the same olive colour, and the legend cannot be matched to either.

Works: direct labels, line styles and a safe pair

Blue #0072B2 solid and vermillion #D55E00 dashed, each named at the end of its line. The labels and dashes carry the meaning; the colours only reinforce it.

<svg role="img" aria-labelledby="chart-title" viewBox="0 0 600 300">
  <title id="chart-title">Visits by device, January to June</title>
  <path d="M40 220 L140 200 L240 170 L340 150 L440 120 L540 90"
        fill="none" stroke="#0072B2" stroke-width="3" />
  <path d="M40 240 L140 235 L240 225 L340 210 L440 205 L540 190"
        fill="none" stroke="#D55E00" stroke-width="3"
        stroke-dasharray="8 6" />
  <!-- Direct labels: no legend to decode -->
  <text x="548" y="94">Mobile</text>
  <text x="548" y="194">Desktop</text>
</svg>

Maps and colour scales

Sequential data (low to high): use one hue that runs from light to dark, so the order is carried by lightness and survives every type of colour vision and greyscale.
Diverging data (below and above a midpoint): run from a dark blue through a light neutral to a dark orange or brown, not from red through yellow to green.
Avoid rainbow colour maps. A 2020 paper by Crameri, Shephard and Heron, The misuse of colour in science communication, shows that rainbow and red-green maps distort data through uneven brightness and are unreadable for many people with colour vision deficiency.
Use a tested scheme. ColorBrewer offers sequential, diverging and qualitative schemes for maps with a filter for colour blind safe options.
Label what matters. Put values or class names on regions where space allows, and offer the data as a list or table. The accessible maps guide treats a choropleth as the chart it really is.

One subtlety from the 1.4.11 Understanding document: series names on the chart solve 1.4.1, but they do not take the marks out of 1.4.11. Only when the chart also shows the values as text, so the bars or slices are no longer needed to read the data, do the marks stop needing 3:1. A labelled pie chart whose slices can only be told apart by faint edges still fails.

6. Colour Pairs to Avoid, and Why Lightness Matters More Than Hue

Red-green colour vision deficiency squeezes the red to green difference between colours. What remains is lightness and the blue to yellow difference. So two colours that differ mainly in hue, while sharing a similar lightness, collapse into one. Two colours that differ strongly in lightness stay apart for every type of colour vision, including achromatopsia, and in greyscale print.

The table shows real pairs run through the Machado, Oliveira and Fernandes (2009) model of deuteranopia at full strength, the same model our simulator and Chrome DevTools use. The contrast column is the WCAG ratio between the two colours, which measures their lightness difference.

Colour pairs, the contrast ratio between them, and how they look with simulated deuteranopia
Pair	Contrast between them	With simulated deuteranopia	Result
Red `#D32F2F`Green `#388E3C`	1.21:1	`#8B7C28#867A42`	Two near-identical olives
Purple `#7B1FA2`Blue `#1565C0`	1.43:1	`#07519F#005FBE`	Two similar blues: the red in the purple is lost
Grey `#9E9E9E`Green `#66BB6A`	1.13:1	`#9E9E9E#B2A56F`	Grey and a greyish khaki, easily confused
Blue `#0072B2`Orange `#E69F00`	2.30:1	`#3B67B1#CAB411`	Still a blue and a yellow: different in hue and lightness

Pairs that need a second cue

None of these is banned. Each is unsafe as the only difference between two things:

Red and green, the classic pair, at any similar lightness.
Green and brown, and green and orange.
Blue and purple, because the red in the purple disappears.
Pink and grey, and green and grey.
Light green and yellow.
Black next to very dark reds, greens, blues or purples.
For the rare tritan types: blue and green, and yellow and pink.

The working rule: vary lightness first and hue second. Where two colours must be told apart, aim for around 3:1 between them, the same figure WCAG uses for non-text contrast. Where your brand colours cannot give you that, add a label, icon or pattern instead. When you need two colours that read as clearly different to almost everyone, blue and orange is the safest pairing.

7. Palettes That Stay Distinguishable

For charts and categories you need several colours that stay apart for colour blind viewers. The best-known set comes from Masataka Okabe and Kei Ito, two researchers who are themselves strong protanopes, in their Color Universal Design guide (first published in 2002 and revised in 2008). The hex values below are the ones popularised in Bang Wong’s 2011 Nature Methods column on colour blindness. Contrast figures are our own calculations.

The Okabe and Ito colour set with hex values, contrast against white, and suitable uses
Colour	Contrast on white	On a white background, use it for
Black `#000000`	21:1	Text, lines, any mark
Blue `#0072B2`	5.19:1	Text, lines, any mark
Vermillion `#D55E00`	3.87:1	Lines, bars and icons (3:1); large text only
Bluish green `#009E73`	3.42:1	Lines, bars and icons (3:1); large text only
Reddish purple `#CC79A7`	3.06:1	Lines, bars and icons (3:1); large text only
Sky blue `#56B4E9`	2.31:1	Filled areas with a border or a direct label
Orange `#E69F00`	2.25:1	Filled areas with a border or a direct label
Yellow `#F0E442`	1.32:1	Filled areas with a dark border, or dark backgrounds

Colour blind safe is not the same as contrast safe

Three of the eight colours fall below 3:1 on white, so as the only way to see a bar or a line they would fail 1.4.11. Give them a dark outline, label them directly, or save them for dark backgrounds.
Orange and sky blue have almost exactly the same lightness (about 1.02:1 between them). They are easy to tell apart by hue for red-green colour blind viewers, but they merge in greyscale and for people with achromatopsia. Do not put them side by side without a pattern or label.
Okabe and Ito recommend the darker blue and orange, rather than sky blue and yellow, for thin lines and small objects.
Only black and blue reach 4.5:1 for normal-size text on white.

:root {
  /* Okabe and Ito colour set, hex values as published by Wong (2011) */
  --cud-black:          #000000;
  --cud-orange:         #e69f00;
  --cud-sky-blue:       #56b4e9;
  --cud-bluish-green:   #009e73;
  --cud-yellow:         #f0e442;
  --cud-blue:           #0072b2;
  --cud-vermillion:     #d55e00;
  --cud-reddish-purple: #cc79a7;
}

Your interface palette, and the tools to build it

You do not have to swap your brand for the Okabe and Ito set. Interface colours mostly need contrast and a second cue; the categorical palette matters most for charts. To build or check an interface palette:

The Accessible Palette Studio builds 11-step OKLCH colour scales, grades every token and state against WCAG 2.2 (with experimental APCA estimates beside it), and has a vision simulation switch that shows its live interface preview as protan, deutan, tritan or monochrome. Contrast scores stay computed on the real values.
The Color Palette Generator is the quick option: it generates a WCAG-aware palette and previews it on buttons, forms, alerts, links and charts in light and dark mode. It has no colour blindness simulation, so screenshot the preview and run it through the vision simulator.

For turning colours into design tokens with states and dark mode, see the accessible colour palettes guide; for perceptual colour maths, the OKLCH and APCA guide.

Is My Website Colour Blind Friendly? How to Check

You can get a reliable first answer in about fifteen minutes. Pick your home page, one form and one page with a chart or status display, and work through these checks.

1. Run each page through a vision simulator

The Website Vision Simulator takes a public web address or an uploaded screenshot (use a screenshot for pages behind a login) and shows it with protan, deutan or tritan simulation, with a severity slider from the milder anomalous forms up to the full loss of one cone type. It also covers achromatopsia, blurred vision and low contrast sensitivity, in a split or side-by-side view against the original. Look for:

links in paragraphs that disappear into the text;
error and required fields you can no longer pick out;
status dots, badges and traffic-light indicators that look alike;
selected tabs, toggles and filters whose state vanishes;
chart lines, bars or map regions you can no longer match to a legend;
pale text and borders that fade first under low contrast sensitivity.

Free tool: Website Vision Simulator

Check a page now: compare the original with deuteranopia, the simulation that catches the most problems, then switch to achromatopsia for the strictest test.

Open the Website Vision Simulator

2. Do a greyscale test

Greyscale removes every hue, so anything that still reads in greyscale is safe for every type of colour vision. Turn your whole screen grey and use your site for a few minutes:

macOS: System Settings, Accessibility, Display, then turn on Color filters and choose Grayscale.
Windows 11: Settings, Accessibility, Color filters, then turn on color filters and choose Grayscale. You can also enable a keyboard shortcut there (Windows logo key + Ctrl + C) to switch the filter on and off.
Just one page: paste the line below into the browser console.

// Greyscale the current page (reload to undo)
document.documentElement.style.filter = "grayscale(1)"

3. Use the emulation in browser developer tools

While you build, check pages in place. In Chrome and Edge, open DevTools, open the Command Menu (Ctrl+Shift+P, or Cmd+Shift+P on a Mac), run “Show Rendering”, and use Emulate vision deficiencies for blurred vision, reduced contrast, protanopia, deuteranopia, tritanopia and achromatopsia. In Firefox, the Accessibility panel has a Simulate menu with the same colour vision types plus contrast loss. Both browsers base their colour simulations on the Machado, Oliveira and Fernandes model, as Chrome’s write-up of its implementation explains.

4. Measure contrast

A simulation shows what fades; it cannot tell you whether a colour pair passes. Check text with the contrast checker (4.5:1, or 3:1 for large text), check icons, borders and chart marks against 3:1, and check text over photos with the text over image contrast checker. The text over images guide shows how to fix text that fails over a photo. To check G183 links, measure the link colour against the body text colour as well as against the background.

5. Fix the palette, then retest

Where a pair collapses, first add the missing cue (underline, icon, label, pattern). Then, if you want the colours themselves to hold up, adjust lightness in the Accessible Palette Studio with its vision simulation switched on, and run the page through the simulator again.

6. Ask colour blind people

The last and most valuable check is people. Ask colour blind colleagues or users to complete your key tasks and say where they hesitated. They will find the problems a model misses, and they will tell you which of your fixes actually helped.

What Simulations Can and Cannot Tell You

What they are good at

Finding information carried by colour alone, quickly and across a whole page.
Showing a typical result for each type, based on a published model of how cone loss changes colour signals.
Making the problem visible to colleagues who have never thought about it, which is often what gets a fix approved.
Comparing before and after, so you can see that a fix worked.

What they cannot do

Show what a particular person sees. Two people with the same diagnosis can see differently, and the anomalous forms vary widely in strength.
Account for the screen, the room lighting, or the cues a person has learned to rely on over a lifetime.
Measure contrast. Passing a simulation is not passing 1.4.3 or 1.4.11.
Represent other low vision, such as field loss or glare sensitivity, which a screenshot filter cannot show.
Prove that a design works. Only people can do that.

Okabe and Ito make the same point in their own guide: their simulated proofs are not a true picture of colour blind vision, and not every colour blind person sees what a simulation shows. Treat a simulation as a way to find problems, never as proof that they are solved.

Colour Blind Friendly Design Checklist

No colour-only meaning. Every link, error, status, selected state, chart series and map class has a second cue: text, an icon shape, a pattern, an underline or a clear lightness difference (1.4.1).
Links in text are underlined. Or, if you rely on G183, the link colour has 3:1 against the body text and both meet 4.5:1 against the background. Hover and focus change something other than colour.
Errors say what is wrong in words. Error fields get a text message, an icon and a thicker border, not just a red outline; required fields are marked with a word or an explained asterisk.
Status uses shape and text. Badges, dots and traffic-light indicators carry a label and a distinct icon; selected tabs and toggles show their state with weight, position or a marker.
Charts are directly labelled. Series are named on the chart, lines use dash patterns or marker shapes, and a data table gives the same values.
Colours that must differ, differ in lightness. Pairs such as red and green, blue and purple or green and brown are never the only distinction; aim for around 3:1 between colours that must be told apart.
The palette is checked, not assumed. Even a colour-blind-safe set such as Okabe and Ito's can fail 1.4.11 on white, and some of its colours merge in greyscale.
Contrast is measured. Text meets 4.5:1 (3:1 when large) and meaningful graphics and control boundaries meet 3:1 (1.4.3, 1.4.11).
The page passes the simulator and greyscale tests. Nothing that matters disappears under protan, deutan, tritan or achromatopsia simulation, or with the screen in greyscale.
Real people have tried it. People with colour vision deficiency have used your key flows, because a simulation is a model, not their eyes.

Then verify the rest of your colour and contrast work against the WCAG 2.2 checklist.

See Your Page Without Colour

Run your most important page through the simulator, fix anything that disappears, then confirm the numbers with a contrast check.

Try the Website Vision Simulator Check a colour pair

Frequently Asked Questions

What colours are colour blind friendly?

No single colour is colour blind friendly on its own; what matters is how colours are combined. The most reliable pairing is blue with orange, because the common red-green deficiencies leave the blue to yellow difference largely intact. Beyond that, choose colours that differ clearly in lightness, not just in hue, so they stay apart for every type of colour vision and in greyscale. For charts, the eight-colour set published by Masataka Okabe and Kei Ito is a well-tested starting point. Whatever palette you use, never let colour be the only way to tell two things apart: add a label, an icon, a pattern or an underline.

How do I check if my website is colour blind friendly?

Load the page in a vision simulator and look at it as protanopia, deuteranopia, tritanopia and achromatopsia, side by side with the original. Anything you can no longer tell apart, such as links in text, error fields, status badges, selected tabs or chart lines, depends on colour alone and needs a second cue. Then switch your screen to greyscale using the colour filter in macOS or Windows settings and repeat the check, and measure text and control colours with a contrast checker, because a simulation cannot measure contrast. Finally, ask people with colour vision deficiency to try your key pages.

Which colour combinations are hardest for colour blind people?

For the common red-green types: red with green, green with brown, green with orange, blue with purple, pink with grey, light green with yellow, and black next to very dark reds, greens or blues. For the rare tritan types, blue with green and yellow with pink. The underlying problem is the same in every case: the two colours differ mainly in hue while having similar lightness. Colours that differ strongly in lightness stay distinguishable even when their hues collapse together.

How many people are colour blind?

Colour Blind Awareness estimates about 1 in 12 men and 1 in 200 women have a colour vision deficiency, around 3 million people in the UK. Those headline figures match large surveys of people of European ancestry, and rates vary between populations. A 2012 meta-analysis by Birch in the Journal of the Optical Society of America A found red-green deficiency in about 8% of European Caucasian men and 0.4% of women, and in 4% to 6.5% of Chinese and Japanese men. Most affected people have a red-green type; blue-yellow types and complete colour blindness are rare.

Does WCAG require colour blind friendly design?

Yes, in effect. WCAG 2.2 success criterion 1.4.1 Use of Color (Level A) says colour must not be the only visual means of conveying information, indicating an action, prompting a response or distinguishing an element. Two Level AA criteria support it: 1.4.3 Contrast (Minimum) sets 4.5:1 for normal text and 3:1 for large text, and 1.4.11 Non-text Contrast sets 3:1 for controls, focus indicators and graphics needed to understand the content. WCAG does not require any particular palette; it requires that meaning never depends on telling colours apart.

Do links have to be underlined for colour blind users?

Not strictly, but underlining links in running text is the simplest way to meet WCAG 1.4.1. The alternative WCAG technique, G183, lets a link rely on colour only if the link colour has at least 3:1 contrast against the surrounding text and both colours still meet text contrast against the background. That leaves very few usable colours: with dark grey body text such as #333333 on white, no colour can satisfy both conditions. Links in navigation bars, buttons and card titles are already identified by their position and shape, so the rule matters most for links inside paragraphs.

Can I still use red and green in my design?

Yes. WCAG does not ban any colour, and red and green carry useful meaning for many people. The rule is that they must not be the only signal. Pair a red error with an error icon and the word Error, pair a green success state with a tick and a message, and choose shades that also differ in lightness, such as a dark green with a lighter orange-red, so the difference survives for people who cannot see the hue.