Designing websites and graphics with color blindness in mind
I’m going to be honest: when I chose my color scheme, I didn’t think about color blindness at all. It hadn’t occurred to me that there would be tools or guidelines out there for this aspect of design. I got lucky: my colors do well for all sorts of colorblind vision. If they hadn’t, I may be looking to at least partially redesign my website. Well: live and learn. Now? I check all my graphics before I publish.
There’s not a whole lot we can do to control untouched photographs or Art-with-a-capital-A: they are what they are. But choosing colors for text, backgrounds, graphics, and charts is well within our control, and we should endeavor to make them accessible.
What is color blindness?
A person has color blindness when their eyes do not detect color the way most people’s do. There are several types of color blindness, and each makes colors look different than the others. For an in-depth description of color blindness, see the American Academy of Ophthalmology’s page on colorblindness here. For our purposes, it’s enough to say that people see color differently.
So, how does that affect your website? We want everyone to be able to use your website, so it’s up to us to make sure they can. We need to build color schemes, graphics, and charts that can be seen and understood by everyone, regardless how their eyeballs work.
Color blindness affects one in every twelve men and one in every 200 women. That is to say: if a NYC Subway car is full to capacity, 13 of those people have some form of colorblindness. Designing for color blindness is important so we can get them looking at your site.
Tools for testing your graphics
Color blindness simulators
The following links will take you to color-blindness simulators for testing how graphics will look to people with different variations in sight. In the next section, you’ll see how some of my graphics fare. Upload your own graphics to these simulators to see how they appear to different types of eyes.
Color blindness test for contrast
Use this site to see how text will look over an image: you upload the image and then try different colors and sized text over it.
Some guidelines for designing
Use both colors and symbols in your designs
The graphic below uses both color (red and green) and symbols (check mark and x) to show voting options. Green means go and a check mark means yes, so synergistically, they indicate an emphatic yes. But even if someone doesn’t see the green, they still understand the meaning of the checkmark. Likewise with the red x.
Keep it minimal
This is just a good idea all around. This web page has a lot of images, with text on top of some of them, but the wide picture borders and bold, contrasting fonts and colors keep everything easy to see and read, while maintaining the rich visual landscape.
When designing graphics that are meant to convey information (as opposed to mood), outline the color fields or make sure everything you *need* shows up. Here is the same image seen through various color-blindness filters; you can see all the details across the board, so this graphic passes muster.
Use patterns and textures to show contrast
Say you have a client whose colors just don’t show up for some people. Below is a color scheme where pink and green become the same color for a person with monochromacy. I added a little texture to the pink, which made it slightly darker but kept it in the stylistic world. Just that little bit of texture makes it so the whole heart appears for everyone. And we want to be whole-hearted; just ask Brené Brown 😉.
Pay attention to colors and hues
Experiment with color – dooooo it! Just check your palette with a color blindness simulator as you go, so you know how to make those beauties shine for everyone.
