Color Accessibility in Web Design

My boyfriend is slightly colorblind and often complains about the contrast on our GPS devices when they switch to night mode (we use the Waze app and also a Garmin). He can’t see the magenta road highlight against a dark background (and I can see it just fine)–so we have to use day mode, or I navigate verbally. He also had a lot of trouble with the Ian’s Pizza (a local Madison fave) website before their redesign because it was dark red on black. For an idea of the scheme, see here: Ian’s Pizza site in Internet Archive

When I was adding color to a recent website assignment with CSS, it occurred to me at the end of the process that the color combinations I chose might have been [relatively] pleasing to me, but maybe not so much to someone with color vision problems. Since we weren’t designing for beauty at the time, I left it be, but later I did go out seeking solutions. While I can recognize color schemes that seem to go together, picking them is another thing!

Here’s what I found:

I really like this tool: http://paletton.com/. There’s a lot to it that is above my web design skillset at the moment, like using the widget and scripts on your page to get your color themes and the accessibility right. What I liked most is that you could pick a color and scheme and it serves up a palette for you with the hex codes. Kind of like someone handing you paint swatches that work together at Sherwin-Williams. Then you can add a colorblindness simulation and see how your choices might look to certain populations. (In fact, there are all sorts of goodies to play with–I suspect this could be a powerful tool, once you learn to work its features. Similarly, my instructor mentioned http://www.checkmycolours.com/ in one of our discussions, but I liked that you could be proactive too with Paletton and address it before it’s embedded in a live url. For kicks, I ran the Ian’s Pizza link above through it… Major fail, Ian!

color test results

In this article, Designing for Color Blindness, the author suggests not designing specifically to accommodate for colorblind people, because you’ll choose weird colors to everyone else. Instead, he says to make your pages valid, accessible and appealing. I guess, but I know someone who would have appreciated a little foresight and extra checking…

Leave a Reply