Guest Geri Coady explains the ins and outs of color blindness, discusses its impact on UX, and offers advice on how to create beautiful and accessible designs.
Right everybody. So let’s get started. Hopefully everybody can hear me at the minute. If you can and you can see my slides, let me know. Welcome to today’s webinar: Color Is Relative. My name is Shelly, and I work here at Monotype, and I’m going to be your host for the next hour—broadcasting from our offices here in what is an unusually warm and sunny Belfast, Northern Ireland. Now you’re just going to have to believe me because we’re all dying. We’re not used to it. I hope it’s as nice where you are today, because we’ve got a completely full house. So far we’ve got over 500 people in, and the numbers keep rising, so we’ve clearly hit on a really popular topic. And we have folks from literally all over the world logging in as we speak.
So those of you who’ve tuned in before, you know that each month we’re going to be tackling a new design issue or challenge—bringing in an expert to shine a light into those areas of design and typography where we sometimes stumble or get slowed down or just want to understand better. So some of you may know Monotype from our typefaces, and others are maybe used to using our design tools and services like Typecast, SkyFonts, MyFonts, Fonts.com. And hopefully when we’re finished today, you’ll all think of us as the folks who introduced you to the very talented and the very clever Geri Coady, who’s joining us today from her new home in Nottingham, England. You want to say hello Geri?
Hi. Hi Shelly. Hi everybody.
So Geri is a freelance web designer and illustrator, and for the past few years she’s been on a mission to make the design community more aware of the issues around color and accessibility. Geri are you ready to get us started?
Yeah, I’m ready.
Okay, I’m going to hand over here so that you can have control of the screen.
Okay, perfect. Okay thanks Shelly, thanks for that introduction. I’m really excited to talk to everybody today. This is a practical talk about designing for color blindness, and it’s filled with a lot of information that you will be able to use right away when you get back to work. Whether you’re a designer, a developer, a content strategist, it doesn’t matter. This is something that you can always keep on your radar for any project you work on. So I’m going to tell you a little bit about myself first. I’m a designer and illustrator originally from Newfoundland in eastern Canada, and I now live in the UK. And like most of you out there I would imagine, I’m a pretty creative person. And I’ve been designing websites for about 15 years or so, and I’ve been drawing and illustrating for my entire life.
Two years ago in March I worked up the courage to quit my job in advertising, and I finally went freelance after working in the industry for about seven years or so. I felt like I wasn’t really being challenged enough there. I wanted to be more creative, and I wanted to handpick my own clients. I wanted to work on my own schedule, and I wanted to travel more. So you could say that I wanted fewer rules to follow, so it might surprise people when I say that I’m also a big advocate of web accessibility—designing for everyone, including people with disabilities. It’s definitely more about rules and guidelines, but it’s an important topic that flies under the radar when we talk about creative work. Many designers and developers hear the word accessibility and they immediately think that having to obey guidelines restricts them from being creative.
And to me I think that’s just a little bit lazy, I think that’s just an excuse for not considering accessibility in your workflow. So when we think about the kinds of disabilities that can affect how people use websites, apps, or games, or even in print design, in newspapers—anything where color is involved and vision—we might think of more severe disabilities. We might think about people who are totally blind, or people who can’t use a mouse because they have some kind of physical disability. But there is another type of disability that affects a surprisingly large percentage of the population, and it isn’t talked about so often, and that’s color blindness. This is a quote from Albers, and he was a painter and teacher from Germany who published a very influential course on color theory back in 1963. “In visual perception a color is almost never seen as it really is…this fact makes color the most relative medium in art.“
He’s right. Color is relative. Not just in the way that it appears differently across different devices due to screen quality and color management, but it can also be perceived differently by different people. We really need to be more mindful of that when designing. We interact with color in digital media on a daily basis. I’m not just talking about interaction with websites, but also with apps, TV screens, banking machines, ticket kiosks, watches of course, even appliances. And the list goes on. It’s absolutely everywhere. And it’s only going to become more and more popular. We can only dream of the interfaces that we’re going to interact with in the future. Color is a powerful tool, but too many of us design with only one type of color vision in mind. So there’s often a bit of misunderstanding about color blindness. Color blindness very rarely means that you can’t see any color at all.
It doesn’t mean that people see things in greyscale. It’s actually a decreased ability to see color or a decreased ability to tell colors apart from each other. So some people may have taken the poll that Shelly posted earlier asking how many of you have some form of color blindness. So Shelly do we have any results from that poll?
Yeah, it looks like about 3% of the respondents here in the session today have some form of color blindness.
Yes, that’s not really surprising. Color blindness is a sex-linked trait and is much more common in men than in women. And overall it actually occurs in about 8% of males but only 0.5% of females. So just think about it for a second. That’s nearly 5% of the overall population. That’s even more than what came back in the poll, we can’t ignore this kind of demographic.?
I’m very fortunate to have good color vision, and like many other people with good color vision, it’s something that I used to take for granted. I never really considered the effects of color blindness until I actually met somebody who learned to live with it. The first person who I met who spoke openly about his condition was my college photography instructor, and I spoke with him a couple of years ago about it. He said, “My design teacher John Solowski pointed it out to me in my first year at Ryerson University. I really was quite useless as a color printer. I guess that was why black and white photography appealed to me so much.”
So for my instructor, this meant that he decided to work less with color photography and more in black and white, but for other people the consequences can be much more devastating. I once read the personal story of a man who received an Associate’s Degree in Medical Laboratory Science. When he was assessed for a potential job he failed the color test, and the physician actually told him it was time to find a new career. Although he was more than capable of performing the job’s duties and he scored high marks in his clinicals, he was considered a liability to the hospital on paper. Some of you might say, ‘Well we’re just designing websites right? What does this have to do with us? Why should we even bother?’ And I think it’s a simple answer: We don’t really have any control over controversial rules and regulations in other industries, but as designers we do have the ability to reduce the number of everyday frustrations faced by colorblind people.
We should all strive to make our work as accessible as possible out of respect for our readers. It’s the right thing to do. But if you or your bosses still aren’t really convinced, it also makes for a handy business case. If a person finds it frustrating or impossible to navigate your website because of a color problem, they’ll simply find an alternative. And with nearly 5% of the overall population affected, it’s pretty easy to see how this can translate into lost readership and sales. On a more serious note, accessibility problems can land you in some pretty hot water in the legal world. In 2011 three blind women from California and Kansas were given permission from a district judge to proceed with a class action lawsuit. It was filed against a Fortune 500 company for having a website that was inaccessible to screen reader applications. And who do you think won? The women won. An out-of-court settlement was reached before ever going to trial. So just ask yourself, would you be prepared to face the consequences if this happened to you?
So let’s talk about how color blindness happens. Inside the typical human retina there are two types of receptor cells: rods and cones. Rods are the cells that allow us to see dark and light and shape and movement, and cones are the cells that allow us to perceive color. There’s three types of cones, each responsible for absorbing blue, red, and green wavelengths in the spectrum. Problems with color vision occur when one or more of these types of cones are defective or absent entirely. These defects can either be inherited through genetics, or acquired through things like trauma, exposure to ultra violet light, degeneration with age, effective diabetes, or many other factors. Doctor J Knights is a famous color vision researcher at the Medical College of Washington. And Doctor Knights states that a person with fully functional color vision can distinguish up to 1 million different colors, while a person missing one type of cone is limited to just 10,000 colors.
So with this sort of defect, it’s much more likely for a person missing a type of cone to be fully aware of their condition. My instructor, who I mentioned earlier, likely had faulty cones instead, since he didn’t realize anything was wrong until his twenties. So there are three main types of color blindness, and I’m going to show simulated images of the most severe versions. People with the most common types of color blindness like protanopia and deuteranopia have difficulty discriminating red and green hues. So an image of a color wheel might look like this to someone with protanopia type color blindness. It might look like this to someone with deuteranopia. And although red and green color issues are the most common, there are also forms of color blindness like tritanopia that affect blue and yellow hues, meaning our color wheel could look something like this. There’s quite a big difference.
Now if any of you have been to art or design school you’ll probably be very familiar with these terms, but a refresher doesn’t hurt. So let’s talk about some basic color theory. The ability to discriminate between colors relies on three attributes: hue, saturation, and lightness. Hue is a color property and is what we refer to when we say that something looks red, yellow, green, blue, or purple, like the colors we describe in a rainbow. Saturation refers to the strength of the hue, where the most saturated hue is the purest color, and the least saturated appears grey. Value or lightness refers to the lightness or darkness of a color, and is achieved by adding white or black. A shade is achieved by adding black to increase the darkness, and a tint is achieved by adding white to increase brightness. So colors like brown are actually darker shades of orange and yellow, and colors like pink are actually lighter tints of red. Understanding these terms will help when we discuss how to choose appropriate, accessible colors.
As an illustrator I know that one of the most important keys to a good painting is effective use of contrast. Contrast creates focus and hierarchy and draws your eye to the most important areas in a painting or design. Contrast is also one of the most important factors in increasing legibility for a person with a visual impairment. Color contrast can be achieved in numerous ways with some being more effective than others. The contrast between light and dark colors is the most important attribute when creating effective contrast. Try not to use colors that have a similar lightness next to each other in a design. The sampled red and green colors on the left share a similar lightness and don’t provide enough contrast on their own without making some adjustments, the version on the right is much more effective. Plus remember that red and green color pairs cause difficulty for the majority of colorblind people, so they should be avoided wherever possible, especially when placed next to each other.
Contrast can also be achieved by choosing complementary colors other than red and green, which are opposite each other on a color wheel. These color pairs generally work better than choosing adjacent hues on the wheel. Contrast also exists between cool and warm colors on the color wheel. Let’s take a color wheel like this and divide it up into cool colors like blues, purples and greens, and then compare them to warm colors like reds, oranges, and yellows. Choosing a dark shade of a cool color paired with a light tint of a warm color will provide better contrast than two warm colors or two cool colors. Contrast in saturation occurs when a dull color is placed next to a more intensely saturated color. But this technique is not as effective as light and dark contrast, so I wouldn’t recommend relying on it for any important information.
One of the easiest tricks to achieve good contrast is to work in greyscale before introducing any color at all, even if you already have your palette in mind. If you could make your design look good in greyscale, chances are it’ll work when you introduce color, and it’ll have the better chance of retaining the contrast necessary for the needs of a wider audience. I’m often asked if there are any safe colors that can be seen by everyone, and unfortunately there isn’t really a one-size-fits-all answer. Designing for only the most common type of color blindness is likely to leave out others, but of course that doesn’t mean I’m condoning that every website we ever build should be in greyscale, because that would be pretty crazy. Fortunately there has been some research on which colors are most likely to be discernable by the largest number of people.
This chart was developed by the Japan based Color Universal Design organization. By avoiding pure hues of red and green wherever possible, more of the colors are individually discernable for all three forms of color blindness. So these colors would be ideal choices for use in things like charts and wayfinding systems and infographics. Here’s an app that I actually discovered by mistake. It’s called ColorBrewer, and it was developed by cartographer Doctor Cynthia Brewer to provide color advice for maps. It includes colorblind-friendly schemes which can be exported as a palette for use in Photoshop and Illustrator for anything you choose. It doesn’t have to be just for maps. Although certain color combinations should be avoided whenever possible, we shouldn’t spend all of our time worrying about achieving the perfect palette.
There’s tons of other tips and tricks that we can use to improve the user experience. The first thing to keep in mind is make sure that you include color names and give examples. One of the most common annoyances I’ve heard from people who are colorblind is that they often have difficulty purchasing clothing, and they might need to ask someone for a second opinion on what the color of the clothing might actually be. So let’s say you’ve got a website that sells t-shirts, like in this example. If you only show a photo of the t-shirt it may be impossible for a person to tell which color the shirt really is. To help avoid any confusion, be sure to reference the name of the color in the description of the product. United Pixelworkers and their new company Cotton Bureau have done an especially good job of following this rule on their websites. So the St. John’s t-shirt has a bit of a quirky palette inspired from a local flag, and I can imagine a lot of people not really liking it. But the description is clear. There’s a rose Cabot tower on a kelly green shirt. That means there should be no surprises if a colorblind person sees this. There’s quite a big difference.
Another common problem occurs when a color filter has been added to a product search. Here’s an example from a clothing website with unlabeled color swatches, and how that might look to somebody with deuteranopia on the bottom. This filter from another fashion website is slightly better, since it removes color entirely and uses names instead. But this method can actually create problems too. This technique actually reminds me of a project from a student named Natalie Dubé. She redesigned colored pencils to be all white, with a label printed on each stating the color name in both English and French. This might sound good in theory, but the problem here is that the assumption is made that colorblind people can’t see color at all.
This design actually forces both colorblind people and people with good vision to read every single label to find the pencil they’re looking for. It’s not really as efficient as it could be. So if we come back to the swatch example, the best solution is to use a combination of both colors and names. Not only will this benefit people with good color vision, it’ll give colorblind people a starting point to work from, along with a clearly labeled name. Fashion Brand Ted Baker has a robust search filter on its website with a good combination of color swatches and names. This is definitely the most effective solution. Don’t forget to label the colors directly and not through the use of a hover state like in this example. This isn’t an ideal solution, because although it will work on a desktop browser, it won’t work on a touch device where hovering isn’t possible.
You’ll also need to be careful when choosing names for your colors. Creative names like the ones you might find on fancy cans of paint for redecorating your home can be just as confusing as not using a color name at all. Using words like ‘grape’ instead of ‘purple’ doesn’t really give the viewer any useful information about what the actual color hue is. Is ‘grape’ supposed to be purple, or could it refer to red grapes or maybe green grapes? And what about the name ‘smoke’? While you might intend for it to mean grey, smoke can also appear to be white, black, or brown, and colored smoke exists too. So stick with hue names as much as possible. There’s a greater chance that the viewer will understand that a purple shirt is purple, rather than any number of colors, and it won’t force them to ask another person to clarify.
Take a look at the photo here on top. The color combinations of these men’s sweaters are described on a brand’s website as woodland and sky, iced coffee and apple, and ashes and coral. The image below is how the sweaters might look to a person with tritanopia. The names are completely useless. This is a huge case for why it’s so important to be inclusive to colorblind users. How many potential customers could you be losing due to a single design decision? There’s a high chance it’ll be quite a few, especially if you’re selling menswear.
So let’s move onto designing maps, charts, and infographics. This can be a little bit more challenging. If you aren’t able to directly label your data regions, don’t rely on color coding alone like in this chart. Try using a combination of color and texture or a pattern—along with precise labels and reflect this in the key.
Combining a background with a unique pattern, will always give the user two pieces of information to work with. Line graphs can be difficult to read if they contain intersecting paths. On the right it shows how the paths blend together for a person with deuteranopia. Try increasing the thickness of the line, giving it a different style, and directly labeling each. This example is much clearer. Here’s a good example from Google analytics. I’m not sure how well you can see this, but on the left is the key, and on the right is the pie chart with each slice directly labeled. Even in this colorblind simulation, you can make sense of the information. You can see in this unlabeled chart that I created just how quickly a pie chart can become confusing when the colors look nearly identical. The same tips apply when designing any type of wayfinding system that relies on color as a guide.
This sample map I created can cause problems where lines intersect, and it can be very difficult to follow. This crop of the Tokyo subway map shows how even the most complicated systems can be easily understood when lines are directly labeled, and in this case with letters for each line name.
This is a good example of what not to do when designing forms. Avoid labeling required fields with colored text only. These fields may appear identical to a colorblind person. It’s safer to use a symbol cue like an asterisk, which is color independent. But keep in mind, though, that some screen readers used by people with disabilities won’t actually read asterisks, so an even better solution is to use a text reference right in the forms label.
There are many tools out there for simulating different types of color blindness, and it’s very important to check your design to catch any potential problems upfront. Don’t forget that not all colorblind people will see colors as they appear in a simulator. They’re only meant to mimic the vision of the most strongly affected people. For Mac OS, Windows, and Linux users, you can use an application called Color Oracle. This app displays common color visual impairments as you use applications on your own screen. It’s a full screen filter that works throughout the operating system, independent of any software you might use. You can also proof with the two most common types of color blindness right in Photoshop or Illustrator while you’re designing. And you can find this option under the View and Proof Setup menu.
I think that we as designers are guilty of low contrast design far too often. What we might think of as a subtle and beautifully crafted effect could be impossible to see for others. The W3C’s web content accessibility guidelines are recommendations for making content from the web more accessible to users with disabilities. There are three levels of conformance: A being the lowest, AA being second best, and AAA being the highest and most strict. The minimum color contrast ratio at the AA level for texts and images of text should be 4.5:1. So in other words, the lighter color in a pair must have four and a half times as much luminance as the darker color. The AAA level of compliance requires a contrast ratio of 7:1.
Here’s an example of some footer text I found online. Even for a person with good vision, it’s incredibly subtle and hard to read. The contrast ratio actually works out to be 2.36, which is unacceptably low and it meets none of the levels of compliance. Personally I would recommend that all body text be AAA compliant, with headlines and less important copy meeting AA compliance. This company should aim to make the contrast of their footer content at least 4.5. Fortunately, it’s easy to check if your palette has sufficient contrast. This tool from designer and developer Jonathan Snook, gives you the option to enter a color code for a background, and a color code for text, and it’ll tell you if the color contrast ratio is sufficient. You can use the built-in sliders to adjust your colors until they meet the compliance ratios. This is a great tool to test your palette before going live.
Another great contrast checker is available from developer Lea Verou. I love this tool because it supports any CSS color that the browser supports, not just HEX codes. It also supports transparencies, which can really come in handy. So try out both and see which one you like. For live websites you can use the accessibility tool called WAVE, which is available as a web-based tool or as a Firefox toolbar. WAVE can identify contrast errors, but just because it passes the test doesn’t automatically mean it’s accessible in reality, which is something to keep in mind. For example the contrast checker here doesn’t notice that our red link in the header text isn’t underlined, and, therefore, it could blend into the surrounding paragraph text. If Chrome is your preferred browser, try using Google’s own accessibility developer tools extension.
This tool allows you to inspect text elements and will show you the contrast ratio in the sidebar. It’s very handy. You can run a full-page audit too for a full list of warnings.
So I know that once I started getting into the habit of checking my work in simulator, I’d be a lot more mindful of any potential problem areas, and it was easier to avoid them in the design stages. It’s also made me question everything I see around me, and it sort of sends red flags off in my head if I think it’s a serious colorblind fail. I think we all need to be a little bit more like that. While it’s best to consider these issues and design your app to be accessible by default, sometimes this might not be possible. Providing alternative styles, or allowing users to edit their own colors, is a feature to keep in mind.
The iChat desktop application uses colored labels to show whether a user is available for chat, away, or busy. And as you can see here, the colors look nearly identical to a person with protanopia. If you check the iChat user preferences though, included is a setting that changes the shape of the standard circles to green circles, yellow triangles, and red squares. If the style of your website or app is low contrast by default, think about adding a high contrast button in a visible location. Belgian designer Veerle Pieters, has a great example of this on her blog. She drops the colored backgrounds, inverts the text color, and changes link colors simply by loading a new style sheet.
So it’s great to talk about all these pointers, but how exactly do you put it all together and make sure that color accessibility is considered in every project’s workflow?
I’ve been fortunate to work with Simply Accessible, a team of leading accessibility experts, to redesign not only their website but their whole brand. Simply Accessible aim to prove that meeting compliance requirements shouldn’t hinder creativity and beautiful design. But unfortunately like many company websites and internal projects, they spent so much time helping others that they didn’t spend enough time helping themselves. A solid redesign was the perfect chance for them to practice what they preached. Our first step in the redesign was to create a color game plan. There wasn’t much of an existing brand. There was no logo and no noteworthy type choices. But there was color. Even that wasn’t great. You can see in the screenshot how the oranges looked murky and the blues looked way too corporate, but it gave us a starting point to work with. We audited the existing site to round up every single color used and then dug in deep to develop the palette and inject a lot more personality.
Keeping our color contrast principles in mind, we settled on a simple two-color palette of blue and orange—a cool warm contrast color scheme. We added swatches for call to action messaging in green, error messaging in red, and body copy and form fields in black and grey. Shades and tints of blue and orange were added to illustrations and other design elements for extra detail and interest. This was by no means a final palette. You have to remain open to potential changes, as you’ll likely find that your color choices will evolve throughout the design process. Never tell your client that a palette is final. If you need to tweak the color of a headline or a button due to legibility issues, you won’t have to worry about pushback if there are complaints that it’s different from what you originally promised.
In such early stages it’s very unlikely that you’re going to know every element or feature that will appear on the site at launch time, or even which design elements could be introduced to the site later down the road. But there are of course plenty of safe places to start. For Simply Accessible I quickly mocked up these examples in Illustrator to get a handle on the elements of the website where contrast and legibility matter the most—text colors and background colors. Once these elements were laid out, I manually plugged in the HTML color code of each foreground color and background color on Lea Verou’s contrast checker. I added the results from each color pair test to my document so we could see at a glance which colors needed adjustment or which colors wouldn’t work at all.
So as you can see here a few problems were revealed in this test. While some were easy to fix, a more complicated problem was apparent with the button colors. I’d imagined that some buttons could appear over a blue background, but the contrast ratios were well under the minimum. We checked our color combinations again in Color Oracle, which only confirmed that colored buttons over blue backgrounds were simply not going to work. We needed to adjust our palette. We reconsidered our options and made the appropriate changes. As a solution, we opted to change all buttons to white when used over dark colored backgrounds. In addition to increasing the contrast, it also gave more consistency to the button design across the site instead of introducing a lot of unnecessary color variance. Putting more work into getting compliant contrast ratios at this stage would make the rest of implementation and testing a breeze.
When you’ve got those ratios looking good, it’s time to move on. Once I was happy with my contrast checks, I created a basic style guide and added all the color values from my color exploration files, introduced more tints and shades, and added pattern backgrounds. I created examples of every panel style we were planning to use on the site, with sample text, links and buttons—all with working hover states. Not only does this make it easier for the developer, it allows you to check in the browser for any further contrast issues. During the final stages of testing and before launch, it’s a good idea to do one more check for color accessibility to ensure nothing’s been lost in translation from design to code. Unless you’ve introduced massive changes to the design in the prototype, it should be fairly easy to fix any issues that arise, especially if you’ve stayed on top of updating any revisions in the style guide.
Finally, nothing beats a good round of user testing. Even evaluation tools have their flaws. Although they’re great at catching contrast errors for text and backgrounds, they aren’t going to be able to find errors in non-text elements, infographics, or objects placed next to each other where discernable contrast is very important. Our final palette, compared with our initial ideas, was quite different. But we’re proud to say it’s not just compliant but also shows Simply Accessible’s true personality. And who knows, it may not be final at all. There are so many opportunities down the road to explore and expand it further.
After what seems like a bit of a dry spell, it looks like many people are talking about accessibility again lately. It’s great to see many designers and developers heading in the right direction, but there’s still a long way to go for some.
I was more than a little disappointed to hear a very famous company tell a journalist that its developers do try to make the work as accessible as possible, but that it was not possible to cater to the needs of all viewers 100% of the time. I think that’s the wrong attitude to take. Here’s a quote I love from developer Mat Marquis at Bocoup. “When I build a website my goals is to build a website for anyone that cares to use it. Maybe I don’t always get everything 100% right, but I’m going to keep trying. And when someone asks me why I couldn’t make something work, ‘I’m trying’ is a damn site better answer than, ‘Because I didn’t have to’”. Accessibility expert Dereck Featherstone stated that we need to aim for the stars, set a high standard, and keep pushing ourselves to do more to include as many people as we can, and I couldn’t agree with him more.
Like elegant typography, engaging content, and efficient code, color is another powerful tool for crafting an enjoyable user experience on the web. I really hope that these color accessibility tips will become an important part of every responsible designer’s workflow and that we’ll all strive towards making the web as accessible as possible. Let’s try not to leave anyone behind. Thank you.
Good stuff, thanks very much Geri.
No problem. You’re welcome.
I see your book.
That’s my book, if you want to read more.
You guys, it’s a really really good book. Go to FiveSimpleSteps.com. It’s part of their Pocket Guides. They’ve actually got a number of great resources there, but Geri’s is very popular. So that is kind of the end of our formal presentation. Thank you everybody for attending. Again we had really great turnout, and we really appreciate you guys tuning in. And thank you again also to Geri for taking some time to tell us all about color and design and accessibility. It was really interesting, and I think everybody really enjoyed it. So thank you Geri.
Thanks Shelly. Thanks for having me.
And goodbye to everybody.