Who it helps
Website accessibility for people with color blindness
Recommended tools
Color blindness
The tools that help most. Visitors turn each one on from the panel.
- Color blindness
- Highlight links
- Smart contrast
The barriers
What makes websites hard to use?
Common problems for color blindness visitors, and the reason the tools below exist.
Color as the only signal
Red borders for errors, green for success, colored dots for stock or status, and links that differ from text only by color can all look the same.
Charts and maps with color keys
Lines, bars and map areas matched to a legend by color alone are hard to read when the colors blur together.
Weak contrast between colors
Colors that look clearly different to most people can have similar lightness, like red text on a green background. To someone who can't tell the hues apart, the text fades into the background.
Color names without labels
Instructions like "press the green button" and product swatches with no color name leave people guessing.
The tools
Which tools help?
Each one is a tile in the panel. Visitors switch it on, and it stays on as they browse.
- Color blindnessApplies a color correction filter for red-weak (protan), green-weak (deutan) or blue-weak (tritan) vision. It shifts colors that are hard to tell apart toward colors that are easier to separate.Red-weakGreen-weakBlue-weak
- Highlight linksGives every link a yellow background, an underline and an outline, so finding links never depends on color alone.On
- Smart contrastFinds text that is too faint against its background and makes it black or white, which helps when text and background colors have similar lightness.On
For site owners
What should you fix in your own code?
The tools help visitors adapt your pages, but they can't fix how your site is built. These changes make the biggest difference.
- Never use color as the only way to show meaning. Add text, icons, patterns or underlines as well (WCAG 1.4.1, Level A).
- Underline links in body text, or mark them in some other way than color.
- In charts, label lines and bars directly, and use patterns, shapes or line styles as well as colors.
- Show color names next to product swatches, such as "Forest green".
- Write instructions that don't depend on color, like "press Submit" instead of "press the green button".
- Check text and important graphics for contrast with our free contrast checker.
FAQ
Frequently asked questions
About color blindness, the tools and how they work.
Still have a question?
We read every message and reply as soon as we can.
support@example.comContact usHow common is color blindness?
About 1 in 12 men have color vision deficiency, according to the US National Eye Institute. Men are much more likely to have it than women, and it usually runs in families.
What are the types of color blindness?
The most common type makes red and green hard to tell apart. Another type makes blue and yellow look alike. In rare cases, people see no color at all.
Which color blindness filter should a visitor choose?
Red-weak is for protan types, Green-weak for deutan types and Blue-weak for tritan types. Color vision varies from person to person, so visitors can try each level and keep the one that helps.
Can a color filter make my site work for color blind visitors?
Not on its own. A filter can make some color pairs easier to tell apart, but it can't add the labels, patterns or text a page is missing. Pair color with another cue in your design so the page works without any filter.
Other visitor needs
Give every visitor the tools they need
Create an account, add your website and preview the widget in minutes.