Bummer! This is just a preview. You need to be signed in with a Pro account to view the entire video.
Don't Believe Your Eyes! How to Design for Color-Blindness38:42 with Geri Coady
We often take color for granted when choosing palettes for our designs, assuming the appearance will be the same for everyone. In reality, the choices that look good to people with good color vision could cause serious usability problems for people affected by various forms of color-blindness; a type of disability that affects the perception of color and occurs in a surprisingly large percentage of the population. If you're a web designer, app designer, or game designer, this talk is for you! Geri will teach you how to create designs that are accessible to people with color-blindness without sacrificing aesthetics.
Hi guys. 0:02 It's really great to be here. 0:03 I've been to New York a few times now, but this is my 0:05 first time speaking, so I'm pretty excited to talk to you guys today. 0:08 I'm going to do a bit of a practical talk today about designing for color blindness. 0:13 So it's filled with a lot of information that you'll be 0:20 able to use right away when you get back to work. 0:23 But first I'm gonna tell you just a little bit about myself. 0:26 So my name is Geri and I am a designer and illustrator from Newfoundland Canada. 0:30 And like most of you, I imagine, I'm a pretty creative person. 0:36 I've been designing website for about 12 or 13 0:40 years, and I've been drawing for my whole life. 0:44 But back in March, I actually quit my job in advertising. 0:48 I worked up the courage and I went freelance after 0:52 working for about six or seven years in the industry. 0:55 [SOUND] So I felt like I wasn't being challenged 0:58 enough there, and I wanted to be more creative. 1:02 I wanted to hand pick my own clients. 1:04 I wanted to work on my own schedule and I wanted to travel more. 1:07 So you could say that I wanted fewer rules to follow. 1:12 So it might surprise people when I say 1:16 that I'm a big advocate of Web accessibility. 1:18 So designing for everybody including people with disabilities. 1:22 So, it's definitely more about rules and guidelines, but I think it's an important 1:26 topic and it kind of flies under the radar when we talk about creative work. 1:32 So many designers and developers hear the word accessibility and they immediately 1:37 think that having to obey like guidelines and strict rules restricts 1:43 them from being creative, but I think that is kind of a lazy way to think. 1:48 I think that is just an excuse not 1:53 to consider accessibility in your work flow at all. 1:57 So when we think about the kinds of disabilities that could affect how 2:01 people use websites, Apps or games, we 2:05 might think about more severe disabilities, right? 2:09 Like we might think about people with total blindness. 2:11 Or we might think about somebody who can't use a 2:15 mouse because they might have some kind of physical handicap. 2:17 But there's another type of disability, and it 2:22 effects a surprisingly large number of the population. 2:24 And it's not talked about so often, and that's color blindness. 2:28 So this is a quote from Albers. 2:33 And he was a painter and teacher from Germany, and he 2:35 published a very influential course on color theory back in 1963. 2:39 And he says, in visual perception a color is almost never seen as it really is. 2:43 This fact makes color the most relative medium in art. 2:50 And he's right. 2:53 Color is relative. 2:56 Not just in the way that it appears differently across different devices. 2:58 Because of screen quality or color management. 3:03 But it can also be perceived differently by different people. 3:08 And we really need to be more mindful of that when we're designing. 3:11 So we interact with color in digital media on a daily basis. 3:16 So I'm not just talking about interaction with websites, but Apps, and television 3:20 screens, banking machines, ticket kiosks, watches, appliances. 3:25 It's everywhere so, I'm you can step outside of the theatre, and see this. 3:33 So I don't really need to explain any further what I'm 3:36 talking about, and it's only going to become more and more popular. 3:39 We can only dream of the interfaces that we're gonna interact with in the future. 3:44 So, there's often a bit 3:50 of misunderstanding about color blindness, and 3:52 it really means that you can't see any color at all. 3:55 So it doesn't mean that you saw things in gray scale. 3:59 Is actually a decreased ability to see color, or 4:02 a decreased ability to tell colors apart from each other. 4:06 So, does anybody in the audience know if they're color blind? 4:10 Yeah, I see some people, yeah, that's not surprising, because color blindness is a 4:13 sex linked trait, and it's much more common in men than it is in women. 4:19 And overall, it occurs in 8% of males, but only 0.5% of females. 4:23 So, if you just stop and think about that 4:29 for a second, that's nearly 5% of the overall population. 4:31 So, we can't ignore this demographic. 4:35 So, I'm very fortunate to have good color vision. 4:39 And like other people with good color vision I used to take it for granted. 4:43 And I never really considered the effects of color blindness 4:48 until I actually met somebody who learned to live with it. 4:51 So the first person that I met who talked 4:55 openly about his condition was my college photography instructor. 4:58 And I spoke with him last year about it again. 5:03 And he told me, my design teacher, John Solowski, pointed it out 5:06 to me in my first year in my first year in Ryerson University. 5:11 I really was quite useless as a color printer. 5:14 I guess that was why black and white photography appealed to me so much. 5:17 So, for my instructor, this meant that, he decided to 5:22 work less with color photography, and more in black and white. 5:26 But for other people the effects can be a lot more devastating. 5:30 So, has anybody seen this film? 5:35 Little Miss Sunshine? 5:37 Yeah, so you probably remember the scene with Dwayne. 5:39 So, Duane was the quiet kid and he had a dream of joining the Air Force. 5:42 And then he discovered that he was color blind and 5:47 he suddenly realized that he would never pass the screening test. 5:50 So that was his only dream in life. 5:55 And at that moment he knew that it could never happen. 5:57 So, although the movie is fiction, this is 6:00 an actual situation that many people have to face. 6:03 There's a number of industries that perform screening 6:08 tests for careers where color vision is a requirement. 6:10 So, people who become hope to become 6:15 pilots or electricians engineers and lab technicians. 6:17 They often have to complete a test before they get hired. 6:23 And sometimes as, after they spend time and money on their education. 6:26 So whether these tests are actually warranted 6:31 is like another concern that's heavily debated. 6:34 Many people feel that they face discrimination after failing the vision 6:38 tests when in reality they actually have no problem performing the task. 6:42 In any scope or any part of their job. 6:47 And I once read the personal story of a man 6:49 and he received an associate degree in medical laboratory science. 6:53 And when he was assessed for a potential job he failed the color test and 7:00 the physician actually told him it was time for him to find a new career. 7:05 And he was more than capable of performing the job's duties. 7:11 And he scored high ma, marks in all of his clinicals, 7:15 but on paper, he was considered a liability to a hospital. 7:19 So, some of you might think we're just designing websites, right. 7:24 Like why? 7:29 Why should we even bother, what does this have to do with us? 7:30 But I think it's, a simple answer. 7:32 So, we don't have any control over those 7:36 controversial rules in other industries, but as designers we 7:39 do have the ability to reduce the number of 7:44 everyday frustrations that are faced by color blind people. 7:47 So I think we should all strive to make our 7:51 work as accessible as possible, out of respect for our readers. 7:53 And I think that's the right thing to do. 7:57 And if you still aren't convinced it also makes for a handy business case. 7:58 So if a person finds they're frustrating or impossible to navigate 8:04 your website because of a color problem, they'll simply find an alternative. 8:07 So again with nearly 5% of the overall population effected, it's pretty 8:11 easy to see how it can, translate into lost readership and sales. 8:16 And on a more serious note, accessibility problems can land 8:21 you in some pretty hot water in the, legal world. 8:25 So in 2011 there were three blind women from California and Kansas. 8:29 They were given permission from a district judge 8:36 to proceed with a class action lawsuit and they 8:39 filed it against Walt Disney Company for having 8:42 a website that was inaccessible to screen reader applications. 8:45 And who do you think won? 8:49 For the women one, an out of court 8:51 settlement was reached before ever going to trial. 8:53 So, you have to ask yourself, would you be prepared 8:57 to face the consequences if something like this happened to you? 9:00 So let's talk about how color blindness happens. 9:05 So, inside the typical human retina there are 9:08 two types of receptor cells, rods and cones. 9:10 And rods are the cells that allow us 9:14 to see dark and light, and shape and movement. 9:16 And cones are the cells that allow us to perceive color. 9:19 So there's three types of cones, each responsible for 9:24 absorbing blue, red and green wavelengths in the spectrum. 9:26 Sidenote. 9:32 Does anybody like the oatmeal? 9:33 Yeah? 9:35 Okay, so hands up if you like the oatmeal! 9:36 More people? 9:40 Yeah, I thought so. 9:43 So I think the oatmeal describes the science stuff better 9:44 than I could with his comment about the Mantis Shrimp. 9:48 So, in the comic he actually mentions how 9:54 the mantis shrimp has 16 different color receptive cones. 9:56 That's 13 more colors that humans can't perceive at all. 10:00 And, I, that kinda blows my mind. 10:04 I think it's amazing. 10:06 So anyway, problems when color vision occurs when one or 10:09 more of these types of cones are defective or absent entirely. 10:12 So these defects can be inherited through genetics or they can 10:17 acquired through trauma, degeneration with age or diabetes or other factors. 10:20 Dr. Jay Neitz is a famous color 10:28 vision researcher at the Medical College of Washington. 10:31 And Dr. Knight states that a person with 10:35 fully functional color vision can distinguish up to one 10:37 million different colors, while a person missing just one 10:41 type of cone is limited to just 10,000 colors. 10:44 So with this sort of defect, it's much more likely for a 10:48 person missing a type of cone to be fully aware of their condition. 10:52 So if you think about Dwayne from Little Miss Sunshine, he likely had 10:56 faulty cones because he didn't really 10:59 realize anything until he was actually tested. 11:02 So 11:06 there's three main types of color blindness and I'm 11:08 going to show simulated images of the most severe versions. 11:10 So people with the most common types of color blindness 11:14 like protanopia and deuteranopia have 11:18 difficulty discriminating red and green hues. 11:21 So an image of a color wheel might 11:24 look like this to somebody with protanopia color blindness. 11:25 And it might look like this to somebody with 11:30 deuteranopia And although red and green color issues are 11:32 the most common there are also forms of color 11:36 blindness like tritanopia, and they affect blue and yellow hues. 11:40 So, that means their color wheel could look something like this. 11:44 So let's talk about choosing appropriate colors. 11:50 So, the ability to discriminate between colors 11:56 relies on three attributes: hue, saturation and lightness. 11:59 So, many of you guys might know this already, but a refresher doesn't hurt. 12:03 So, hue is a color property, and it's what we refer to when we say 12:07 something looks red, yellow, green, blue or purple, 12:11 you know, like the colors in a rainbow. 12:13 Saturation refers to the strength of a hue. 12:17 Where the most saturated hue is the 12:20 purest color, and the least saturated appears grey. 12:22 And value, or lightness, refers to the lightness or darkness 12:26 of a color, and is achieved by adding white or black. 12:30 So, a shade is achieved by adding black to increase the darkness. 12:34 And a tint is achieved by adding white to increase brightness. 12:37 And colors like brown are actually darker shades of orange and yellow. 12:41 And colors like pink are actually lighter tints of red. 12:44 And as an illustrator, I know that one of the most 12:49 importance keys to a good painting is effective use of contrast. 12:52 So contrast creates focus and hierarchy, and it draws your eye 12:57 to the most important areas in a painting or a design. 13:01 But contrast is also one of the most important factors 13:05 in increasing the legibility for a person with a visual impairment. 13:08 And color contrast can be achieved in numerous ways. 13:13 And some are a lot more effective than others. 13:16 The contrast between light and dark colors 13:19 is the most important when creating effective contrast. 13:22 So try not to use colors that have 13:25 a similar lightness next to each other in design. 13:28 So the sampled red and green colors on the 13:32 left share a similar lightness and they don't provide 13:34 enough contrast on their own without making some adjustments, 13:37 the version on the right is much more effective. 13:40 Remember that red and green color pair, color pairs, 13:45 can cause difficulty for the majority of color blind people. 13:48 So they should be avoided whenever possible 13:51 especially when they're placed next to each other. 13:54 So contrast can also be achieved by 13:57 choosing complementary colors other than red or green. 14:00 Which are opposite each other on the color wheel. 14:03 So, these color pairs generally work better 14:06 than choosing adjacent hues on the wheel. 14:09 And 14:10 contrast also exists between cool and warm colors on the color wheel. 14:14 So if we take a color wheel and divide 14:18 it up into cool colors, like blues, purples, and greens. 14:20 And then compared them to, warm colors like reds, oranges and yellows. 14:24 Choosing a dark shade of a cool color, paired with a light tint of 14:31 a warm color will provide better contrast than two warm colors or two cool colors. 14:35 In contrast is saturation occurs when a dull color 14:42 is placed next to a more intensely saturated color. 14:46 But this technique is not that effective, so I 14:49 wouldn't really recommend it relying on it for important information. 14:52 One of the easiest tricks to achieve a good contrast in is to actually work in 14:58 gray scale before introducing any color at all, 15:02 even if you've already got a palette in mind. 15:06 So if you can make your design look good in gray scale 15:08 chances are it's going to have a better chance of retaining the contrast. 15:11 Needs for like a wider audience once you start putting the color in. 15:16 So I'm often asked if there are any safe colors that can be seen by everyone. 15:22 And unfortunately there isn't really a one size fits all kind of answer for this. 15:28 Designing for only the most common type of color blindness 15:33 is going to leave out other types of color blindness. 15:36 And that does not mean that I'm condoning everybody go out 15:39 and make grey scale websites cuz that would be pretty crazy. 15:42 But fortunately there has been research of which colors are 15:46 most likely to be discernable by the largest number of people. 15:50 So this chart was developed by the Japan based Color Universal Design Organization. 15:55 So by avoiding pure hues of red and green wherever possible, more 16:03 of the colors are individually discernable for all three forms of color blindness. 16:07 So these colors would be ideal to 16:13 use in charts and weigh finding systems especially. 16:15 So here's an App that I discovered by mistake. 16:20 It's called Color Brewer, and it was developed by 16:23 cartographer Dr Cynthia Brewer to provide color advice for maps. 16:26 But it, it actually includes color blind friendly 16:32 schemes which can be exported as a palate. 16:35 For use in Photoshop or Illustrator for anything that you wanna use. 16:38 So although certain color combinations should be avoided wherever possible, we 16:44 shouldn't spend all of our time worrying about achieving the perfect palette. 16:49 There's tons of other tips and tricks we can use to improve user experience. 16:54 So the first thing to keep in mind, is 16:59 to make sure to include color names and give examples. 17:01 So one of the most common annoyances that I've heard from people 17:06 who are color blind is that they often have difficulty purchasing clothing. 17:09 And they'll often have to ask somebody for a second 17:14 opinion on what the actual color of the clothing might be. 17:17 So, a person with protonopia might see these 17:22 guys and think that they're pretty cool, right? 17:25 But in reality, they look sort of like this, so maybe not. 17:28 So let's say that you have a website that sells t-shirts. 17:34 So if you only show a photograph of the t-shirt, it may 17:37 be impossible for the person to tell which color the shirt really is. 17:40 So, To help avoid any confusion be sure to reference 17:43 the name of the color in the description of the product. 17:47 So United Pixel Workers does a really good job of following this rule. 17:51 So the St. John's shirt from where I'm from has a bit of a quirky palette 17:54 inspired from our local flag, and I can 18:00 imagine a lot of people not really liking it. 18:02 But the description's clear on the site. 18:05 It says, there's rose [INAUDIBLE] tower on a kelly green shirt. 18:07 So that means there should be no surprises if a colorblind person see this. 18:11 So like the pink suit guys there's a pretty big difference. 18:15 So another common problem occurs when a color 18:21 filter has been added to a product search. 18:24 So this is an example from a clothing website with unlabeled color 18:26 swatches and how that might look to somebody with deuteranopia on the bottom. 18:31 So this filter from the H and M website is a little 18:37 bit better because it removes color entirely and uses the names instead. 18:40 But this method can actually create some problems of its own. 18:45 So, this technique reminds me of a student 18:49 project a couple of years ago by Natalie Dubay. 18:52 And she re-designs colored pencils to be all white with a label 18:55 printed on each stating the color name in, both, English and French. 19:01 So, that sounds like a good idea. 19:05 But the problem here is that the assumption's 19:08 made that colorblind people can't see color at all. 19:10 So this design actually forces both colorblind people and 19:14 people with good vision to actually have to read 19:19 every single label to find the pencil that they're 19:21 looking for which is not very efficient at all. 19:24 So, if we come back to the swatch example the best 19:28 solution is to use a combination of both colors and names. 19:31 So, not only will this benefit people with good color vision but it'll give color 19:36 blind people an actual starting point to 19:40 work from along with a clearly labeled name. 19:42 So this is fashion brand Ted Baker. 19:46 And they've got a pretty robust search filter on on their website. 19:49 And they've got a good combination of color swatches 19:54 and names, which is definitely the most effective solution. 19:57 So don't forget to label the colors directly, 20:02 and not through the use of a hover state. 20:04 Like in this example from Urban Outfitters. 20:06 It's not an ideal solution because although it will work on a desktop 20:11 browser, it's not really gonna work on a touch device where hovering is impossible. 20:14 So, you'll also need to be careful when choosing names for your colors. 20:20 So creative names, like the ones that you might find, on 20:26 fancy cans of paint in an interior design store or something. 20:30 They can be just as confusing as not using a color name at all. 20:34 So using words like grape instead of purple doesn't really give 20:38 the viewer any useful information about what the actual color hue is. 20:43 So is grape suppose to be purple? 20:47 Or is it suppose to be referred to red grapes or maybe green grapes? 20:50 Or what about the names smoke? 20:55 So while you might intend for it to be gray, smoke can also 20:57 appear to be white, gray white, brown, black and colored smoke exists too so. 21:00 Stick with hue names as much as possible because there's 21:06 a greater chance that the viewer will understand that a purple 21:09 shirt is purple rather than any other number of colors and 21:12 it won't actually force them to ask another person to clarify. 21:16 So take a look at the photo on top. 21:21 So, the color combinations on these men's, sweaters are described on the super dry 21:23 website as being woodland and sky, iced coffee and apple, and ashes and coral. 21:28 And the image on the bottom is how 21:37 those sweaters might look to a person with tritanopia. 21:40 So the names are completely useless. 21:43 And this is, a huge case as of why 21:47 it's so important to be inclusive to color blind users. 21:49 So how many potential customers would you be losing do to a single design decision? 21:52 So, there's a pretty high chance it'll be 21:58 quite a few especially if you're selling menswear. 22:00 So let's move on to designing maps charts, and infographics. 22:05 So, these can be a little bit more challenging. 22:09 So if you aren't able to directly label your data 22:13 regions don't rely on color coding alone like in this chart. 22:17 Try using a combination of color and texture or pattern 22:22 along with precise labels and reflect it in the key. 22:26 So combining a background with the unique pattern will always 22:30 give the user two pieces of information to work with. 22:33 And line graphs can be difficult to read if they contain intersecting paths. 22:37 So on the right it shows how the 22:41 paths blend together for a person with dudernobia. 22:43 And you can try increasing the thickness of the 22:47 line and giving one of them a different style. 22:49 And directly labeling each. 22:53 This example is much clear. 22:54 Here's a good example, from Google analytics. 22:59 So, I'm not sure how well you can see this, but on 23:01 the left is the key and on the right is the pie chart. 23:04 With each slice directly labeled. 23:07 So, even in this color blind simulation, you can make sense of the information. 23:10 But it's not really consistent on the rest of the site. 23:14 So, in another area of the Google Analytic's website, this 23:17 is an on label chart, which can be, pretty confusing. 23:21 [BLANK_AUDIO] 23:24 And here's an iconic image. 23:27 So the map of the London subway system. 23:29 So, unfortunately, the design of this map contains colors that are 23:31 likely indistinguishable from each other for, a person with a vision problem. 23:35 So this is true, obviously, not only for the London underground. 23:40 But for any other way finding system that uses 23:44 color coding as the only key in a legend. 23:47 So there are printable versions of the map available online 23:51 in black and white using patterns and shades that are distinguishable. 23:55 But the point is there would be no need for such 23:59 a map if accessibility was in mind right from the beginning. 24:02 So, also if you happen to be a person with a physical disability as well as a 24:08 vision problem, which isn't that rare, this step-free 24:14 guide map is based on the original colored map. 24:18 So you're going to have to do a lot of cross-referencing 24:21 if you aren't already familiar with the map, and the underground system. 24:24 So this is a good example of what not to do when designing forms. 24:30 So avoid labeling required fields with colored text only. 24:34 So these fields may appear identical to a color blind person. 24:39 So it's safer to use a symbol key 24:43 like an asterisk, which is symbol sorry, color independent. 24:45 So keep in mind, that some screen readers 24:50 used by people with disabilities won't read asterisks. 24:54 So an even better solution is to use a text reference right in the forms label. 24:57 So there are many tools out there, 25:04 for simulating different types of color blindness. 25:06 And it's important to check your design and catch any potential problems upfront. 25:10 Don't forget that not all color blind people will see colors as they appear in a 25:14 simulator, because they are only meant to mimic 25:19 the vision of the most strongly affected people. 25:22 So for MAC OS Windows and Lynux users 25:26 you can use an application called Color Oracle. 25:28 This act displays common colored visual impairments 25:32 as you use applications on your own screen. 25:36 So it's a full screen filter and it works thru 25:39 out the operating system independent of any software that you use. 25:41 This one is my favorite. 25:45 But you can also proof, for the two most common types 25:48 of color blindness right in Photoshop, or Illustrator, while you're designing. 25:51 And you can find that option under the View and Proof setup menu. 25:56 I think that we, as designers, are guilty of low contrast design far too often. 26:02 So, what we might think of as a subtle and 26:08 a beautifully crafted effect could be impossible to see for others. 26:11 So the WC3's web content accessibility guidelines, are recommendations for 26:16 making content on the web more accessible to users with disabilities. 26:20 So, there's three levels of conformance. 26:25 A being the lowest. 26:28 Double A being second best. 26:30 And triple A being the highest and the most strict. 26:32 So, the minimum color contrast ratio at a double A 26:37 level for text and images of text, should be four. 26:40 five to one. 26:44 So, in other words, the lighter color in a pair, must have 26:44 four and a half times as much luminance as a darker color. 26:49 And the triple A level compliance requires a contrast ratio of seven to one. 26:54 So I'm gonna pick on square here. 27:00 So, you take a look at the text in the footer on their website. 27:03 So, even for a person with good vision, 27:07 like, this is incredibly subtle and hard to read. 27:09 So the contrast ratio here actually works out to be 2.36, which is unacceptably low. 27:12 And it doesn't meet any of the levels of compliance. 27:19 So, personally, I would recommend that all body text be triple A compliant and with 27:22 headlines and less important copy meeting double A compliance at the very minimum. 27:28 And I think that square should aim to make 27:34 the contrast of that footer content at least 4.5. 27:37 Unfortunately it's pretty easy to check to see 27:41 if your palette has this kind of sufficient contrast. 27:44 So this is a tool from developer and designer Jonathan Snook and it gives 27:47 you the option to enter a color code for a background and a color code for text. 27:53 And it'll tell you if that color contrast ratio is sufficient. 27:59 And you can use the built in sliders to 28:03 adjust the colors until we actually meet the compliant ratios. 28:05 So this is a great tool to actually test your palate before going live. 28:09 And this is another great contrast checker available from developer Leah Veru. 28:12 So I love this tool because it supports any CSS 28:19 color that the browser supports, and not just hex codes. 28:23 So, it also supports transparencies, which can really come in handy. 28:27 So you should check out. 28:30 Both of these tools and see which one you like. 28:32 So for live websites you can use an accessibility tool called Wave. 28:36 And that's available as a web-based tool or as a Firefox tool bar. 28:41 So Wave could identify contrast errors. 28:46 But just because it passes a test doesn't automatically mean that the 28:49 website is accessible in reality which is something to keep in mind. 28:53 So for example here the contrast checker doesn't 28:58 notice that our red link in the header text 29:02 isn't underlined And that could blend into the surrounding 29:05 paragraph text if you're a person with color blindness. 29:08 So, if Chrome is your preferred browser, you 29:13 can try using Google's own accessibility developer tools extension. 29:16 [SOUND] So this tool allows you to inspect. 29:22 Elements and it will show you the contrast ratio 29:25 actually there in the side bar, which is very handy. 29:28 And you can run a full page audit to so, you could have a full list of warnings. 29:31 So I know that once I started getting into the habit of checking 29:39 my work in a simulator, I'd be more mindful of any potential problem areas. 29:43 And it was easier to actually avoid them in the design stages. 29:49 And it has also kind of made me question everything I see and it sort of 29:52 sends off red flags in my head if I think it's going to be serious color blind fail. 29:57 I think we all need to be a little more like 30:03 that. 30:08 [SOUND] Well it's best to consider these issues and design your App. 30:08 to be accessible by default. 30:11 Sometimes this might not be possible. 30:13 So, providing alternate styles, or allowing users to edit 30:15 their own colors is a feature to keep in mind. 30:20 So, the iChat desktop application uses colored labels to show 30:24 whether a user is available for chat away or busy. 30:29 So as you can see here, the colors 30:34 are nearly identical to a person with Protonopia. 30:35 And if you check the iChat user 30:41 preferences, you can actually find a setting that 30:43 changes the the shape of the standard circles 30:46 to green circles, yellow triangles, and red squares. 30:49 [BLANK_AUDIO] 30:53 If the style of your website or App is low contrast by default, 30:56 You could think about adding a high contrast button in a visible location. 31:01 So Belgien designer Verla Peters, she's got a great 31:05 example of this on her blog, so she actually drops 31:10 the color backgrounds, inverts the text color and changes the 31:13 link colors, simply by not loading a new style sheet. 31:18 So, I recently asked some color blind people which medium or form 31:25 of entertainment was the most difficult for them to read or use. 31:30 And one man noted that video games absolutely needed the most improvement. 31:35 So he felt that game developers didn't seem to pay much attention to 31:40 color at all even though it's pretty essential in a lot of game play. 31:44 So there have been many petitions online 31:48 from color blind gamers asking developers to 31:52 release patches To enhance games that weren't 31:57 designed with color vision deficiencies in mind. 32:01 So Catherine Albany Ward is a founder a a UK 32:04 group of color blind awareness, and she suggested that game 32:07 developers should place warnings on the game packaging or the 32:10 game download page, if color is essential to game play. 32:15 So she says that it's, it's like it contains traces of 32:19 nuts labels so at least you know, you're not wasting your money. 32:22 So fortunately some companies are starting to listen to 32:26 this feedback and the developers of this game, created 32:28 an alternate colorblind mode and they asked for public 32:32 feedback to make sure that it passed the test. 32:35 It's called, Faster Than Light. 32:37 So not much needed to be done. 32:39 But you can see that they added stripes to the red zones. 32:40 And they changed some of the outlines to blue. 32:44 So despite wide, widespread problems, with 32:47 other aspects of gameplay during the launch. 32:50 The latest Sim City game actually supports three different color blind modes. 32:53 So, I'm just gonna show you a short video from BBC journalist, 32:59 Dave Lieber, where he talks about his experiences as a color blind gamer. 33:03 [SOUND] 33:08 I'll get it. 33:13 >> I clean a bug. 33:22 >> [SOUND] 33:23 When I play video games, sometimes even the simplest 33:26 things such as telling which team I'm on can be 33:28 made all the more difficult due to the fact that 33:31 I struggle to tell a difference between red and green. 33:32 [SOUND] 33:35 Right now, I'm playing Call of Duty Black Ops, which 33:38 is one of the biggest selling games of last year. 33:40 And when I play a multiplayer game, my friends names appear in green. 33:42 But enemy's names appear in red. 33:47 [SOUND] 33:48 We've treated the images, so you can 33:51 see what people with red-green colorblindness see. 33:52 Now you can see just how difficult it is to 33:55 tell the difference between the red and green name tags. 33:58 [SOUND] I shot one of my own players. 34:01 Now his name tag did appear above his head but, I couldn't tell which color it was. 34:08 He doesn't die in this circumstance, but what does happen is that 34:12 because I fired my weapon, I will now show up on the map. 34:15 And all the enemies were Syrian. 34:18 Fortunately, Triumph, the developers of this particular Call of Duty game, have 34:20 added an option which allows me to change certain colors in the game. 34:24 My enemies' names now appear in dark orange, 34:28 my friends sky blue. 34:33 Triumph told me that one of the reasons why this option has 34:36 been added is simply because their lead tester is, in fact, color-blind himself. 34:38 Of course, Call of Duty isn't the only game in this problem. 34:43 One of his big competitors, a game called Kill Zone, also had 34:46 complaints from gamers saying they couldn't 34:49 tell the difference between the two teams. 34:50 [NOISE] >> So I'm just gonna skip through this. 34:51 But as you can see, so, in this video, 34:55 color blindness and gaming can be a real frustration. 34:58 It's great to see many developers heading in the right direction 35:01 but there is still a long way to go for some. 35:04 So I was more than a little disappointed to hear Nintendo tell the same 35:07 journalist that as developers try to make 35:11 their games as accessible as possible, but that 35:14 it was not possible to cater to the needs of all the players 100% of the 35:17 time So here's a quote I love from developer Mark Marquis at Filament Group. 35:22 He says, when I build a website my goal is 35:27 to build a website for anyone that cares to use it. 35:30 Maybe I don't always get everything 100% right, but I'm going to keep trying. 35:34 And when someone asks me why I couldn't make something work. 35:38 I'm trying is a damn sight better answer than because I didn't have to. 35:43 So there's been a lot of talk about the future of color 35:48 blindness over the past couple of years, and Dr. Knights who I mentioned 35:51 earlier is a bit of a celebrity in the field of color vision 35:54 and, he and his colleagues actually 35:57 managed to cure color blind squirrel monkeys. 35:59 So, some squirrel monkeys have a form of color blindness 36:03 that's very similar to the color blindness that humans experience. 36:06 So, before getting treatment, the monkeys were trained to touch the 36:10 location of a colored patch hidden in a field of grey dots. 36:13 But they became frustrated whenever the dots were red or green. 36:17 So Dr. Knight's and his colleagues injected genes 36:21 with a red pigment in cone cells, and 36:24 within twenty weeks the monkeys were able to 36:26 touch the screen, and distinguish between red and green. 36:28 That's a pretty incredible discovery. 36:32 So, you also might have heard about the color 36:35 blind glasses that are available on the market these days. 36:36 So they're designed to alter the light coming into 36:40 the eye to increase the contrast between problem colors. 36:42 So to kind of give the colors a boost, but, its important to remember that these 36:44 advances in technology, do not give us an excuse to ignore color accessibility. 36:50 Laser surgery and corrective lenses for every 36:56 day vision problems have been around for years. 36:59 Yet we don't, or we shouldn't, ignore the 37:02 need for appropriate font sizes on the web. 37:04 And right now the technology is pretty expensive. 37:08 It can cost up to $800 for a pair of these glasses. 37:11 And there's already conflicting reports on whether 37:14 they actually work or not for everybody. 37:16 And as for curing it completely, who knows what the price of color blind gene therapy 37:20 could cost in the future, and surgery does not come without its own set of risks. 37:26 So these options will likely be a luxury for many 37:31 people, meaning there's always going to be people being left out. 37:33 Accessibility expert Derek Featherstone stated that we need 37:38 to aim for the stars, set a high 37:42 standard, and keep pushing ourselves to do more to include as many people as we can. 37:44 And I couldn't agree with him more, designing with color 37:49 blindness in mind isn't something that should complicate your work flow. 37:52 Don't be afraid to ask for feedback. 37:56 Finding somebody with color blindness who can test your work, and 37:58 give you their opinion is not as hard as you think. 38:02 So, reach out on Twitter, Facebook, and I think you could be surprised. 38:05 So, like elegant typography engaging content and efficient code. 38:10 Color's another powerful tool for crafting enjoyable user experience on the web. 38:15 So I really hope that these color accessibility tips, 38:21 will become an important part of every responsible designer's workflow. 38:24 And that we'll all strive towards making the web accessible to all. 38:29 And let's try to not leave anyone behind. 38:33 Thank you. 38:35 [SOUND] 38:38
You need to sign up for Treehouse in order to download course files.Sign up