Being Freed
Being Freed
Being Freed

Color blindness and website design

You want as many people as possible to be able to use your website. Color blindness is one area of accessibility that’s easy to address.
Color Blindness and your website: a graphic with Being Freed seagull logo shown through six different types of colorblindness filters.

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

The Perkins school has an excellent list of guidelines in this article, which I have adapted and added to below.

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.

A graphic with the text, "Pineapple on pizza? Yes (check mark) No (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 😉.

A pink, green, and blue graphic saying "I heart pineapple pizza", shown through no filter, with no texture in the pink.
These colors are lovely for people with most types of color vision.
A pink, green, and blue graphic saying "I heart pineapple pizza", shown through a monochromacy filter.
Pink and green look the same to someone with monochromacy, so the heart is difficult to distinguish.
A pink, green, and blue graphic saying "I heart pineapple pizza", shown through no filter, with texture in the pink to make it visible for people with monochromacy-type colorblindness.
The pink here has texture so it will be easy to distinguish from the green regardless of color sight ability.
A pink, green, and blue graphic saying "I heart pineapple pizza", shown through a monochromacy filter.
Because of the texture in the pink, the heart is much easier to distinguish.

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.

Like my posts? Toss me a tip!

digital nomad hiker drysuit diver queer woman sober ukulele player scorpio Tough Mudder goofball

Freed scuba diving with her ukulele

All content © by Freed

Want to know more about what I do?  When I have a new post?  Where I’ve been lately?  (I do get around.)  Sign up for my mailing list below.  I promise to not fill your inbox with junk.