A DESIGNER S GUIDE TO COLOR BLINDNESS

Transcription

1 A DESIGNER S GUIDE TO COLOR BLINDNESS Designed Written Ale Villagomez

2 i FOREWORD WHAT IS COLOR BLINDNESS? COLOR BLIND VISION LIKELIHOOD OF HAVING CVD ARE YOU COLOR BLIND? RELEVANT THINGS TO CONSIDER THE DESIGN PROBLEM WHY YOU SHOULD CARE PROBLEMATIC COLOR COMBINATIONS SUGGESTED USE OF COLOR CONTRAST IN COLOR PLACEMENT AND LAYOUT PATTERNS AND OTHER ELEMENTS THE COLOR BLIND DESIGNER ADDITIONAL METHODS OF COPING QUICK REFERENCE SOURCES

3 FOREWORD This manual has been created to aid designers in making design decisions in regards to their projects while being mindful of color blind viewers. As a color blind designer, I would like to raise awareness to the condition that affects millions of people in the U.S. alone. My hopes are that designers worldwide can create design that eases the lives of people with color blindness and removes most, if not all, of the ambiguity we face that can affect our lives severely.

4 02 Blue-Yellow Ais (b) Red-Green Ais (a) This is a simplified representation of the Lab Color Space model with Luminosity set at 50%. Luminosity controls the lightness of the color, while the a and b aes control the red-green and blue-yellow color tandems, respectively. WHAT IS COLOR BLINDNESS? The inability to perceive color vision at its fullest is known as Color Vision Disorder. This, however, does not mean that every person with CVD cannot see color at all. In fact, only a small percentage of people who are color blind are truly blind to all color, with vision that only allows for shades of gray. Only they can truly live up to the term color blind. The acceptable term to refer those who are not blind to all color is color deficient. People with color deficiency have a difficult time distinguishing certain colors. The severity of their ability to differentiate between colors depends on the individual. Inside the retina of the eye eist millions of cone-shaped color receptors, alongside rod-shaped light receptors (Bailey). There are three different kind of color receptors, one for each of the colors that make up all colors in the visible spectrum. These receptive cones correspond to different wavelengths of color: short (blue), medium (green), and long (red) (Facts About Color Blindness). When a person is color blind, one or more of the cones inside their eyes is abnormal, preventing them from seeing that specific color at its fullest. These cones can either be shifted or missing. When the cone is only slightly shifted, vision pertaining to that color wavelength is still visible, but only slightly. When the cone is not present, neither is that color. An important thing to understand is that Color Blind Deficiency is typically categorized into congenital and acquired. Congenital color blindness affects people through a recessive gene trait, whereas acquired color blindness occurs due to injury or results from an illness. Acquired Color Vision Defects can occur through chronic illnesses such as Alzheimer s disease, diabetes mellitus, glaucoma, leukemia, liver disease, chronic alcoholism, macular degeneration, multiple sclerosis, Parkinson s disease, sickle cell anemia, and retinitis pigmentosa (Acquired Colour Vision Defects). Additionally, people may lose color vision through accidents that damage the retina or the brain, medications with side-effects, harmful chemicals, and age (typically over-eposure to the sun) (Tritanomaly/Tritanopia).

5 04 Condition COLOR BLIND VISION Wavelength Short Medium Long Present Shifted Missing Normal Red Vision Normal Green Vision Normal Blue Vision Protanomaly Duetranomaly Tritanomaly Protanopia Duetranopia Tritanopia A human with normal color vision can see about 1 million distinct shades of color. For someone with color blindness, the appearance of certain color hues is reduced; they can only see part of the full color gamut (Tritanomaly/Tritanopia). For persons with tritan-type deficiency, the loss mainly affects the blue-yellow ais of color space while leaving the red-green ais intact. Obversely, protan and duetran-type deficiencies are grouped together because they affect the same color ais (redgreen). A person incapable of seeing a full range of red will have difficulty detecting the red in a color composed of it. For eample, the color violet is a miture of blue (short wave-length) and red (long wave-length). A person with Protan-type deficiency will most likely see blue only, depending on the severity of the cone distortion. When violet is placed net to blue, blue-violet and slightly different shades of violet, differentiating the colors may be impossible. The different types of color blind vision are classified by the color the viewer cannot see and classified again if the cone is shifted or missing. Above is a chart categorizing the different types of disorders.

6 Anatomy of Human Eye Ciliary Body = Cones = Rods Cornea Sclera Iris Retina The eye functions much like a camera and vice versa. Light comes through the lens and into the back where it hits the retinal wall. The light is then absorbed by light and color receptors which form a carpet-like layer inside of the retina (In the Eye Causes of Color).. When a person is color blind, some of their cone shaped color receptors will be either missing or tilting away from the light source. Pupil Anterior Chamber Lens Fovea Optic Nerve Vitreous Body

7 08 Y -Linked Recessive Gene Inheritance Y Unaffected Father Carrier Mother Unaffected Son Unaffected Daughter Carrier Daughter Affected Son Unaffected Chromosome Affected Chromosome This is an eample of the likelihood of parents of four children passing on the recessive color blind trait, which is located in the -chromosome. Y Y Unaffected Y Chromosome LIKELIHOOD OF HAVING CVD The recessive gene for color blindness is carried in the chromosome (Bailey). Since women are born with two chromosomes (men have one and one Y), they have a higher chance of compensating for the color blind trait that may have been inherited. This means men have a lesser chance of combating the trait and therefore are more likely to be affected by color blindness. It is quite common to see a mother pass down her color blind trait to her son, and have normal vision herself. Likewise, the mother s male siblings can all be color blind. The probability of a male having any degree of color blindness is 8%, where only.5% of women are affected (Types of Colour Blindness). Approimately 1% of those men are deuteranopes, 1% protanopes, 1% protanomalous and 5% deuteranomalous. Nearly half of color blind people will have a mild anomalous deficiency (slightly shifted cone), the other 50% have moderate or severe anomalous conditions (severely shifted or missing cone). Tritanopia, Tritanomaly, and Achromacy (absence of all color) are etremely rare, affecting less than 1 out of 30,000 people (Types of Colour Blindness). Digging even further, these figures rise in areas where there is a greater number of white (Caucasian) people per head of population, so in Scandanavia the figures increase to approimately 10-11% of men. By contrast, in sub-saharan Africa there are few color blind people. Countries such as India and Brazil have a relatively high incidence of color vision deficients because of the large numbers of people with mied race genes in their genetic history (Types of Colour Blindness).

8 10 Ishihara Plate Test ARE YOU COLOR BLIND? If your family has a history of color blindness, especially through uncles and grandfathers, your chances of either being color blind or carrying the trait are very high. A regular check up with your optometrist will determine whether you have a color deficiency. You will be asked to take a series of visual tests called Ishihara plates, which contain a randomized number of dots that vary in color and size. Within the dots is a figure of a number or letter that is visible to a person with normal color vision, but difficult to distinguish or simply hiding in plain sight to a person with CVD. To test yourself online for color blindness, visit: enchroma.com/test/instructions/ Can you identify the number within this Ishihara test? If not, then you are affected by red-green color blindness. Graphic generated at franciscouzo.github.io/ishihara/

9 12 RELEVANT THINGS TO CONSIDER The majority of people with Color Vision Disorder live normal lives and see their abnormality merely as a small hindrance. This is especially true for those who only have shifted cones. Even though the majority of people have normal color vision, everyone will see color slightly different. Color can also look much different to someone in the dark than it does in bright light (similar to the cones perceiving color, the rods in the retina help perceive color in different light). Driving, however, is one important day-to-day activity that is reliant on color. Street lights, signs, brake lights, and emergency vehicles are red, making it difficult for people with red-green color blindness to see. Some countries such as Romania and Turkey even restrict Protanomalists from driving at all. Becoming an airplane pilot is also an occupation that requires perfect color vision. In the past, anyone with full or partial color blindness was disqualified from joining the U.S. military (Newsweek). Other day-to-day activities that are difficult for people with CVD include: noticing sunburns, knowing when food is properly cooked, finding objects in a field of grass, and selecting fruits that are ripe. Note that when comparing colors, particularly in design, print in CMYK will be less saturated than on-screen graphics. Computer monitors will also vary in how they display color. If you have ever compared full green (Headecimal #00FF00) on an imac screen with a Samsung laptop, for eample, you will notice the greens are completely different. This adds another factor in that color will almost always look different depending on the person, the medium, and even jutaposition with another color.

10 14 Color-Reliant Games THE DESIGN PROBLEM So how eactly is color deficiency a problem for designers? The problem is that designers often choose colors arbitrarily in their designs, which can negatively affect the eperience of the color blind viewer. This is even more critical in the presentation of visual data such as graphs and charts. Colors which are completely unrelated to the subject matter are used in the representation of important information. There seems to be a lack of knowledge when it comes to color blindness, but the fi is quite simple for the designer. Obversely, there are many graphic designers who are color blind themselves and can have an equally negative impact on designs without realizing it. Tips for handling design for both color blind and non-color blind designers will be covered in the later chapters. Bubble Shooter, a popular online game, requires the user must shoot the current bubble in line to hit a matching bubble on top to knock them off until they are all gone. To people with CVD, matching the colors can result in a color mismatch and ultimately, a disadvantage. Image sampled fromshooter-bubble.com

11 16 WHY YOU SHOULD CARE If you care about your designs at all, there should be at least some consideration for viewers with mild disabilities such as color blindness. There are plenty of reasons to be more conscious of the colors used in your designs, which are often overlooked. One common eample is hypertet links on a website. Let s say you have a nice color palette on your site and you decide to change the ugly, default blue to something more fitting with your design - like a deep red. This link will be nearly invisible to a person with Protanopia. It may seem perfectly fine to you but the truth is, a lot of valuable web traffic will be lost due to this design choice. Likewise, buttons on a page that generate actions should be properly colored. When two or more buttons are jutaposed on a page and have a similar hue and saturation, or just look the same to a person with CVD, it can cause them to mistakenly click on the wrong button, or reduce response time. This does not necessarily mean that your entire color palette should revolve around color blindness all the time. Realistically, it does not matter if your blue-violet looks blue to a person with protanomaly. The only thing that matters is that people are able to distinguish your colors when it comes to important visual data, links, or other graphics of special interest.

12 18 Red-Green Color Blindness PROBLEMATIC COLOR PAIRINGS Azalea Pink Light Gray Vivid Violet Lilac Dark Gold Blue Gem Denim Blue Laurel Green School Bus Yellow Lime Green Dark Green Rum Brown I mentioned that for a person with color deficiency, telling apart certain colors can be very troublesome or even nearly impossible to some. Colors of equal saturation and lightness can be especially difficult to discriminate. Analagous colors tend to be a problematic combination. If you are designing with usability as the priority, avoid a palette composed of similar shades and color build-up, such as all cool colors (deeply saturated with blue). Blue-Yellow Color Blindness As a designer, you will have the most difficulty designing for a person with monochromacy or tritan-type deficiency, since so many colors are lost. If this is the case, avoid using a large color palette. Cornflower Blue Process Hot Magenta Pink Indigo Red Yellow Color Confusion Protan Duetran Tritan red/orange/yellow/green Pale Goldenrod Chartreuse Khaki Orange Maroon Red-Violet brown/green threshold green to white threshold red to white Red and green color deficiencies are usually grouped together since many of the colors people with color blindness cannot see share the same color ais. Likewise, blue and yellow share an ais. These swatches have been jutaposed to show the close comparison to people with the given colorblindness. Color names are based off real web color names. blue/violet gray/pink blue-green/grey/red-violet green/gray/blue-violet brown/gray red/black green/black blue/yellow violet/yellow-green red/red-violet dark blue/black/gray yellow/white blue/white pink/orange violet/brown Some information from this chart borrowed from color-blindness.com/2009/03/15/color-blind-which-are-your-blind-colors/

13 20 Color Blind Safe Palette SUGGESTED USE OF COLOR Black HE: #00000 RGB: 0,0,0 CMYK: 0, 0, 0, 100 HUE: - Yellow Orange HE: #F7931D RGB: 230, 159, 0 CMYK: 0, 50, 100, 0 HUE: 41 Blue Sky Blue HE: #00B9F1 RGB: 86, 180, 233 CMYK: 80, 0, 0, 0 HUE: 202 Vermillion Blue-Green HE: #00A875 RGB: 0, 158, 115 CMYK: 97, 0, 75, 0 HUE: 164 Pale Violet Now that we know which colors are troublesome for color blind viewers, let s talk about what colors are typically okay to work with. The general rule of thumb when it comes to selecting colors is that a palette with variety in both saturation and hue will be easier to differentiate than a palette with an affinity of these properties. The fewer colors used will present fewer issues as well. HE: #ECDE38 RGB: 240, 228, 66 CMYK: 10, 5, 90, 0 Hue: 56 HE: #0072BC RGB: 0, 114, 178 CMYK: 100, 50, 0, 0 HUE: 202 HE: #F15A22 RGB: 213, 94, 0 CMYK: 0, 80, 100, 0 HUE: 27 HE: #DA6FAB RGB: 204, 121, 167 CMYK: 10, 70, 0, 0 HUE: 326 An ecellent tool in selecting a three-color palette that is both scientific and color blind-friendly is the triad color palette picker on paletton.com or similar color scheme building websites. This color palette has been tested with all the major types of color blindness. It was found that red-green color blind viewers see this palette almost eactly as a person with perfect vision. Tritan-type color blind users (blue deficient) still see some difference in saturation and hue, but not nearly as much. Information taken from cookbook-r.com/graphs/colors_(ggplot2)/ Remember, you do not necessarily have to change every single color in your design to accomodate a color blind user. Most of the time it does not matter if they confuse one shade with another. However, color is critical when it comes to presenting data that will be analyzed. If possible, it is recommended to test questionable graphics with people of color blindess to verify effectiveness. If you cannot get in touch with someone to help, or you want to test out your designs yourself, some design softwares allow the designer to view a soft-proof of what the design looks like with simulated color blindness. In Adobe programs, it can be found in proof setup under the view menu. Additionally, many colorblind simulators are available online that can be downloaded and installed onto your computer. Colororacle.org has an easy-to-use feature that will simulate some of the most severe types of color blindness. Vischeck.com provides a simulator in the form of a Photoshop plug-in that can add a color blind filter to a photo.

14 22 Low Contrast Palettes CONTRAST IN COLOR If you are going to include a large color palette in your designs, be aware of the fact that it becomes increasingly difficult to distinguish once more than about 8 color swatches are used. If there is not enough color contrast between the swatches themselves, people with color blindness will definitely mistake them. This happens far too often in mobile and computer games such as the previously mentioned Bubble Shooter, Two Dots, Bejeweled, Shades, and many more. Luckily some games and even cell phones have a color blind-friendly setting within the interface preferences. A color palette consisting of lowly saturated colors, or pastels, is fine aesthetically but is not optimal for important information. Try to vary to the saturation and hue in your colors, but avoid dark luminosity or very light luminosity. When choosing a background color, remember that tet should be clearly visible and should not get lost among a patterned or tetured background. Avoiding colors that vibrate such as redblue is also a good idea. Vary your palette so that you have swatches in different ends of the color spectrum. Change the saturation, hue, and luminosity for optimal palettes. Avoid muddy colors such as brown or gray.

15 24 Impoving Line Graph Usability PLACEMENT AND LAYOUT Alpha 7 Beta 8 Charlie Delta 9 Colored objects that are not solely for decorative purposes should always be at a reasonable size for visual contrast. It is much more difficult for a person to differentiate two or more colors if they are too small to observe. Objects that are very far from each other are also difficult to tell apart. This is why when creating a graph, it is better to place a label on the peak or in another visible area instead of coloring the variables in accordance to a legend far off to the side. At times, it is also worth placing colors in a way that is logical enough for a person to guess what they are. For instance, we know that traffic lights have three lights, with the eception of the turning lights. In every street light, red is on top, yellow in the middle, and green on bottom. By remembering that green is the bottom light, color blind drivers can proceed driving without having to worry too much about what the actual color of the light is Alpha Charlie Beta Delta The key is to be consistent with the order of objects or a person will likely be thrown off when the placement is changed. When applicable, arranging colors by the order of the rainbow also helps with remembering. Think of this technique as a mnemonic device and consider all the ways you can arrange your colors to provide further usability Alpha Beta Charlie Delta The graph on top presents many problems that can easily be fied. Very thin hallow, or small colored objects are difficult for people to distinguish. By making the graph more visible, the data is presented in a more efficient way.

16 26 Indistguishable Versus Clear A B C Yearly Epenses Clarity Through Response A B C Designers often overlook the importance of having clearly identifiable variables in graphs because the majority of them are not color blind. Simply subsitituting color for something of high visibility will help tremendously. Yearly Epenses PATTERNS AND OTHER ELEMENTS As mentioned earlier, some games have color blind-friendly user interface settings which eases their usability. This may be in the form of easier color contrast, or completely replacing the colors with shapes. The mobile game Two Dots inserts math symbols within the colored dots along with a more visible color palette to maimize the distinctness of the dots. It s important to remember that often times designers choose colors for bar and line graphs that are difficult for some users to view. This defeats the whole purpose for creating the graph and in many cases, can give people the wrong information. I recommend sticking to the color blind-friendly color palette when working with these types of graphs. If you are willing to go the etra mile, do not use color at all. Patterns serve as ecellent alternatives to using color to represent data.these patterns can be as simple as stripes and polka dots that will help distinguish elements on a graph more than color can. Aside from patterns, other small but effective elements may help bring attention to an object so it does not rely only on color. Changing opacity, adding a stroke, overlapping graphics, backgrounds, and drop shadows are just some of the ways that elements can be made to stand out even more. Click to Enter Click to Enter Including hover actions on a webpage that trigger a change in the look of the content is helpful. However, aesthetics and consistency will sometimes suffer when designing for usability.

17 28 Color Name & Hue Tool This online-based tool, found on color-blindness.com, helps people identify the corresponding Web Color name to any color based on Headecimal code. Image taken from color-blindness.com/color-name-hue THE COLOR BLIND DESIGNER It is widely regarded that a designer should have great vision and attention to detail. True, color blindness has some effect on a designer, but it does not people with CVD from being designers at all. The way I see it, great design should be a result of hierarchy and consistent flow and shouldn t use color as a crutch to help something look more appealing. Colors tend to change completely from the initial stages of a design until the very end (especially when it gets ready for print). As a color blind designer, the only times I really faced a problem with my disorder are when a client asked me to match a color with a tangible item and when they ask me to pick a shade of color and we have a different perception of that color. With technology as advanced as it is, it has never been easier to get around these drawbacks. When a client asks me to give them a specific shade of color such as chartruese, a simple web seach will help me identify the Headecimal code. The color picker found on many Adobe programs will identify any color by giving you RGB color percentage make-up and give you the He code. This is essential when borrowing a color from a photograph or graphic element (such as a client s logo). Photos can be digitally scanned with high resolution and no background suppression to ensure you get a close match. I often couple the color picker with a helpful online tool that allows you type in the He code that will generate a Web Color name and what hue it falls under: color-blindness.com/color-name-hue This other website works similarly, but allows you to select from a list of color names: chir.ag/projects/name-that-color Building color blind-friendly color palettes is made easy by using colorbrew2.org. It will help choose the most distinguishable palette by the given number of swatches, hues, and even takes into account print-friendly palettes. A smart phone application called Adobe Color lets users build color schemes from a photograph. This eliminates the guessing game and gives you the eact color you need. The ultimate color distinguishing tool is the color rotation tool in Photoshop. If two colors are very similar to you, take a sceenshot, open it up in Photoshop, and simply rotate the hue or invert the colors. At least this way you know that two colors are different.

18 30 FURTHER METHODS OF COPING Scientists are still researching ways to treat people with CVD. Unfortunately, not much has been discovered because researchers are not currently taking the risk to test human subjects. They are, however, conducting studies on primates, which are the only other mammals capable of seeing fully-colored vision (A New Cure!?). Even though we may be years away from some sort of medical breakthrough, progress has been made in the form of visionaiding glasses. EnChroma has launched a line of sunglasses which boost saturation to help a person with color blindness perceive color better. These sunglasses may be purchased on their website: enchroma.com/shop Labeling and arranging objects in the ROYGBIV order helps tremendously and cuts down time in figuring out what is what. I worked in a copy shop for several years where we had a selection of colored paper for customers from which to choose. It became much easier and efficient to label and arrange these colors in a logical manner. There are many simple phone applications such as Ledscope, Chromatic Glass, Color Inspector, and ColorAssist that will allow you to use your phone s camera to select an object and pinpoint its eact color name. A Google Chrome etension, Chrome Daltonize!, will epose details of images that color blind users may otherwise not be able to see. In some cases, I simply use my intuition, visual cues, or previous knowledge to help me guess what color something is. For eample, I know that bananas are ripe enough to eat when they begin to show spotting. There is an online community on Reddit dedicated to topics on color blindness. Users identify themselves by their type of color blindness and often help answer questions or lend advice in everyday activities. The page can be accessed here: Reddit.com/r/ColorBlind Photograph over-dramatized for effect. Not actual EnChroma glasses. Lastly, don t be afraid to ask for help. Always get another person s opinion when in doubt of your color choices. After all, nobody sees color the eact same, so it s good practice anyway to have another person look at your work.

19 32 QUICK REFERENCE Color Blind-Assisting Applications Ledscope (Android) Chromatic Glass (ios) Color Inspector (ios) ColorAssist (ios) Chrome Daltonize (Google Chrome etension) Color Blind Glasses enchroma.com/shop Color Blind Simulators colororacle.org vischeck.com Color Blind Test enchroma.com/test/instructions Color Naming Tool color-blindness.com/color-name-hue chir.ag/projects/name-that-color Color Palette Builder colorbrew2.org Online Color Blind Community reddit.com/r/colorblind

20 34 SOURCES Acquired Colour Vision Defects. Colour Blind Awareness. Accessed June 05, org/colour-blindness/acquired-colour-vision-defects/. Bailey, Gretchyn. Color Blindness. All About Vision. Accessed June 05, conditions/colordeficiency.htm. Facts About Color Blindness. National Eye Institute. Accessed June 05, blindness/facts_about. In the Eye Causes of Color. In the Eye Causes of Color. Accessed June 05, causesofcolor/1g.html. A New Cure!? Color Blindness Accessed June 05, Newsweek. Newsweek. Accessed June 05, newsweek190.rssing.com/browser.php?ind= Tritanomaly/Tritanopia EnChroma. EnChroma. Accessed June 05, Types of Colour Blindness. Colour Blind Awareness. Accessed June 05, org/colour-blindness/types-of-colour-blindness/.