Are the links on your website visible to people with color blindness? This post explores how different colors look to color blind individuals, and how you can ensure that your links are accessible.
Oh yea, there’s an app for that!
Different Types of Color Blindness #
A lot of folks think that being color blind means you see the world in grayscale. That’s typically not the case.
Individuals with three of common forms of color blindness – deuteranopia, protanopia, and tritanopia – still see colors, but they see them as different hues than people without color blindness. Red and green are the colors most often affected (PDF). And, color blindness seems to affect men far more often than women.
The problem with red links #
Red is a pretty common color in web design. Unfortunately, it also causes some problems for color blind individuals. Here’s a sentence with a red link…
Here’s what that same link looks like for someone with tritanopia…
As you can see, the hue is a bit off, but it’s still quite readable. Tritanopia, however, is a very rare form of color blindness.
Deuteranopia is far more common, affecting 5% of all males. Here’s what that link looks like for individuals with this form of color blindness…
The contrast between the link and text isn’t great. A visitor could probably still make out the link, but it’s far from ideal. I’ve used a pretty dark text color in this example (
#272727). For lower-contrast sites, the effect would be even more pronounced.
Protanopia affects 2.5% of all males. Here’s what the link looks like for individuals with this form of colorblindness…
Here, you can see that the link is barely distinguishable from the text. That’s a real problem.
How to make links more accessible #
There are a few things you can do to make links more accessible for individuals with color blindness.
I test all of my designs with Color Oracle, a free, cross-platform color blindness simulator that allows you to see what your site (or any other thing you make on a computer) looks like to indviduals with the three forms of color blindness mentioned above.
The blue links on this site are easily distinguishable from plain text to all three forms of color blindness.
If you want to use a color that has contrast issues (like red or green), use more than one indicator to let people know it’s a link. You might, for example, underline links in addition to making them a different color.
With a few simple modifications, you can make your website far more accessible for color blind individuals.
- More articles on...
- Design & UX