sign in sign up
<<
Home , Awareness, Color blindness, Color scheme, Color vision, Goldenrod (color), Ishihara test

A DESIGNER’S GUIDE TO BLINDNESS

Designed Written Alex Villagomez i FOREWORD 02 WHAT IS ? 04 COLOR BLIND VISION 08 LIKELIHOOD OF HAVING CVD 10 ARE YOU COLOR BLIND? 12 RELEVANT THINGS TO CONSIDER 14 THE PROBLEM 16 WHY YOU SHOULD CARE 18 PROBLEMATIC COLOR COMBINATIONS 20 SUGGESTED USE OF COLOR 22 IN COLOR 24 PLACEMENT AND LAYOUT 26 PATTERNS AND OTHER ELEMENTS 28 THE COLOR BLIND DESIGNER 30 ADDITIONAL METHODS OF COPING 32 QUICK REFERENCE 34 SOURCES FOREWORD This manual has been created to aid designers in making design de- cisions in regards to their projects while being mindful of color blind viewers. As a color blind designer, I would like to raise 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 ambi- guity we face that can affect our lives severely. 02

Red- Axis (a) WHAT IS COLOR BLINDNESS?

The inability to perceive at its fullest is known as Color . 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 . 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 distinguishing certain . The severity of their ability to differentiate between colors depends on the individual.

Inside the of the exist millions of cone-shaped color receptors, alongside rod-shaped receptors (Bailey). There are three different kind of color receptors, one for each of the colors that make up all colors in the visible . These receptive cones correspond to different of color:

Blue- Axis (b) (b) Axis -Yellow short (blue), medium (green), and long () (Facts About Col- or Blindness). When a person is color blind, one or more of the cones inside their 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 is still visible, but only slightly. When the cone is not present, neither is that color. This is a simplified representation of the Lab model with Luminosity at 50%. Luminosity controls the of the color, while the ‘a’ and ‘b’ axes control the red-green and blue-yellow color tandems, respectively. An important thing to understand is that Color Blind Deficien- cy is typically categorized into congenital and acquired. Con- genital color blindness affects people through a recessive 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, diabe- tes mellitus, , leukemia, disease, chronic alco- holism, , multiple sclerosis, Parkinson’s disease, sickle cell anemia, and pigmentosa (Acquired Colour Vision Defects). Additionally, people may lose color vi- sion through accidents that damage the retina or the , medications with side-effects, harmful chemicals, and age (typ- ically over-exposure to the sun) (Tritanomaly/Tritanopia). 04

Condition COLOR BLIND VISION

Present Shifted Missing A with normal color vision can see about 1 million dis- tinct shades of color. For someone with color blindness, the appearance of certain color is reduced; they can only see part of the full color (Tritanomaly/Tritanopia). For Normal persons with tritan-type deficiency, the loss mainly affects the Red Vision Protanomaly Protanopia “blue-yellow” axis of color space while leaving the “red-green” Long axis intact. Obversely, protan and duetran-type deficiencies are grouped together because they affect the same color axis (red- green).

A person incapable of seeing a full range of red will have diffi- Normal culty detecting the red in a color composed of it. For example, Green Vision Duetranomaly Duetranopia the color is a mixture of blue (short wave-length) and

Medium red (long wave-length). A person with Protan-type deficiency will most likely see blue only, depending on the severity of the

Wavelength cone distortion. When violet is placed next to blue, blue-violet and slightly different shades of violet, differentiating the colors may be impossible. Normal Blue Vision Tritanomaly Tritanopia Short

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. Anatomy of

Ciliary Body = Cones = Rods

Iris Retina

The eye functions much like a and vice versa. Light comes through the 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.

Optic Lens Nerve Fovea

Anterior Chamber

Vitreous Body 08

X-Linked Recessive Gene Inheritance LIKELIHOOD OF HAVING CVD

The recessive gene for color blindness is carried in the X chro- X X mosome (Bailey). Since women are born with two X chromo- Y X somes (men have one X 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 Unaffected Father Carrier Mother color blind trait to her son, and have normal vision herself. Likewise, the mother’s male siblings can all be color blind.

X X X X The probability of a male having any degree of color blindness Y X X Y is 8%, where only .5% of women are affected (Types of Colour Blindness). Approximately 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 moder- Unaffected Son Unaffected Daughter Carrier Daughter Affected Son ate or severe anomalous conditions (severely shifted or missing cone). Tritanopia, Tritanomaly, and Achromacy (absence of all color) are extremely rare, affecting less than 1 out of 30,000 Unaffected Affected Unaffected people (Types of Colour Blindness). X X X Y Y Chromosome Digging even further, these figures rise in areas where there is a This is an example of the likelihood of parents of four children passing greater number of (Caucasian) people per head of popu- on the recessive color blind trait, which is located in the X-chromosome. lation, so in Scandanavia the figures increase to approximately 10-11% of men. By contrast, in sub-Saharan Africa there are few color blind people. Countries such as and Brazil have a relatively high incidence of color vision deficients because of the large numbers of people with mixed race in their genetic history (Types of Colour Blindness). 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 ? If not, then you are affected by red-green color blindness.

Graphic generated at franciscouzo.github.io/ishihara/ 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 reti- na help perceive color in different light).

Driving, however, is one important day-to-day activity that is reliant on color. Street , signs, brake lights, and emergency vehicles are red, making it difficult for people with red-green color blindness to see. Some countries such as and Tur- key even restrict Protanomalists from driving at all. Becoming an airplane pilot is also an occupation that requires perfect col- or vision. In the past, anyone with full or partial color blindness was disqualified from joining the U.S. (Newsweek).

Other day-to-day activities that are difficult for people with CVD include: noticing sunburns, knowing when food is proper- ly 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 (Hexadecimal #00FF00) on an iMac screen with a Samsung laptop, for example, you will notice the are completely different. This adds another factor in that color will almost always look different depending on the person, the medium, and even juxtaposition with another color. 14

Color-Reliant Games THE DESIGN PROBLEM

So how exactly is color deficiency a problem for designers? The problem is that designers often choose colors arbitrarily in their , which can negatively affect the of the color blind viewer. This is even more critical in the presen- tation 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 fix 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 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 con- scious of the colors used in your designs, which are often over- looked. One common example is hypertext links on a website. Let’s say you have a nice color on your site and you decide to change the ugly, default blue to something more fit- ting 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 juxtaposed on a page and have a similar 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. Realistical- ly, 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. 18

Red-Green Color Blindness PROBLEMATIC COLOR PAIRINGS

I mentioned that for a person with color deficiency, telling apart School Bus Azalea Dark Dark Green certain colors can be very troublesome or even nearly impossi- Vivid Violet Yellow ble to some. Colors of equal saturation and lightness can be es- pecially difficult to discriminate. Analagous colors tend to be a problematic combination. If you are designing with usability as Laurel the priority, avoid a palette composed of similar shades and col- Light Gray Blue Gem Denim Blue Green Rum Green or build-up, such as all cool colors (deeply saturated with blue).

As a designer, you will have the most difficulty designing for a person with or tritan-type deficiency, since so many colors are lost. If this is the case, avoid using a large Blue-Yellow Color Blindness color palette.

Cornflower Process Hot Pink Red Blue Yellow Color Confusion Protan Duetran Tritan red//yellow/green x x brown/green x x Pale Orange Red-Violet Goldenrod threshold green to white x x threshold red to white x x blue/violet x Red and green color deficiencies are usually grouped together since many of the colors people with color blindness cannot see share the same color axis. gray/pink x Likewise, blue and yellow share an axis. These swatches have been juxtaposed to show the close comparison to people with the given colorblindness. Color blue-green//red-violet x names are based off real web color names. green/gray/blue-violet x brown/gray x red/ x green/black x blue/yellow x violet/yellow-green x red/red-violet x dark blue/black/gray x yellow/white x blue/white x pink/orange x violet/brown x

Some information from this chart borrowed from color-blindness.com/2009/03/15/color-blind-which-are-your-blind-colors/ 20

Color Blind Safe Palette SUGGESTED USE OF COLOR

Black Orange Blue-Green Now that we know which colors are troublesome for color blind viewers, let’s talk about what colors are typically okay HEX: #00000 HEX: #F7931D HEX: #00B9F1 HEX: #00A875 RGB: 0,0,0 RGB: 230, 159, 0 RGB: 86, 180, 233 RGB: 0, 158, 115 to work with. The general rule of thumb when it comes to se- CMYK: 0, 0, 0, 100 CMYK: 0, 50, 100, 0 CMYK: 80, 0, 0, 0 CMYK: 97, 0, 75, 0 lecting colors is that a palette with variety in both saturation HUE: -° HUE: 41° HUE: 202° HUE: 164° and hue will be easier to differentiate than a palette with an affinity of these properties. The fewer colors used will present Yellow Blue Vermillion Pale Violet fewer issues as well. HEX: #ECDE38 HEX: #0072BC HEX: #F15A22 HEX: #DA6FAB RGB: 240, 228, 66 RGB: 0, 114, 178 RGB: 213, 94, 0 RGB: 204, 121, 167 An excellent tool in selecting a three-color palette that is both CMYK: 10, 5, 90, 0 CMYK: 100, 50, 0, 0 CMYK: 0, 80, 100, 0 CMYK: 10, 70, 0, 0 scientific and color blind-friendly is the triad color palette pick- Hue: 56° HUE: 202° HUE: 27° HUE: 326° er on paletton.com or similar building websites.

This color palette has been tested with all the major types of color blindness. It was found that Remember, you do not necessarily have to change every single red-green color blind viewers see this palette almost exactly as a person with perfect vision. color in your design to accomodate a color blind user. Most Tritan- blind users (blue deficient) still see some difference in saturation and hue, but not nearly as much. of the time it does not matter if they confuse one shade with another. However, color is critical when it comes to presenting Information taken from cookbook-r.com/Graphs/Colors_(ggplot2)/ 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 down- loaded and installed onto your computer. Colororacle.org has an easy-to-use feature that will simulate some of the most se- vere 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. 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 mis- take 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 informa- tion. 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 text should be clearly visible and should not get lost among a patterned or textured background. Avoiding colors that vibrate such as red- blue 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. 24

Impoving Line Graph Usability PLACEMENT AND LAYOUT

50 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 40 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 30 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. 20 At , it is also worth placing colors in a way that is logical 10 enough for a person to guess what they are. For instance, we know that traffic lights have three lights, with the exception of the turning lights. In every street light, red is on top, yellow in the middle, and green on bottom. By remembering that green 1 2 3 4 5 6 7 8 9 is the bottom light, color blind drivers can proceed driving without having to worry too much about what the actual color Alpha Beta Charlie Delta of the light is.

The key is to be consistent with the order of objects or a person 50 Charlie will likely be thrown off when the placement is changed. When Delta applicable, arranging colors by the order of the also 40 helps with remembering. Think of this technique as a mnemonic Alpha device and consider all the ways you can arrange your colors to Beta provide further usability. 30

20

10

1 2 3 4 5 6 7 8 9

Alpha Beta Charlie Delta

The graph on top presents many problems that can easily be fixed. 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. 26

Indistguishable Versus Clear 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 maximize 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 A A to view. This defeats the whole purpose for creating the graph B B and in many cases, can give people the wrong information. I C C recommend sticking to the color blind-friendly color palette when working with these types of graphs. If you are willing to Yearly Expenses Yearly Expenses go the extra mile, do not use color at all. Patterns serve as ex- cellent alternatives to using color to represent data.These pat- Designers often overlook the importance of having clearly identifiable vari- terns can be as simple as stripes and polka dots that will help ables in graphs because the majority of them are not color blind. Simply distinguish elements on a graph more than color can. subsitituting color for something of high visibility will help tremendously. Aside from patterns, other small but effective elements may help bring 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 Clarity Through Response 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. 28

Color Name & Hue Tool 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 de- signers at all. The way I see it, great design should be a result of hierarchy and consistent 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 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 Hexadecimal code. The found on many Adobe programs will identify any color by giving you RGB color percentage make-up and give you the Hex code. This is essential when borrowing a color from a pho- tograph 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 Hex code that will generate a Web Color name and what This online-based tool, found on color-blindness.com, helps people identify the corresponding Web Color name to any color based on Hexadecimal code. hue it falls under: color-blindness.com/color-name-hue This other website works similarly, but allows you to select Image taken from color-blindness.com/color-name-hue from a list of color names: chir.ag/projects/name-that-color

Building color blind-friendly color palettes is made easy by us- ing 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 exact 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. 30

FURTHER METHODS OF COPING

Scientists are still researching ways to treat people with CVD. Unfortunately, not much has been discovered because research- ers are not currently taking the risk to test human subjects. They are, however, conducting studies on , which are the only other 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 vision- aiding glasses. EnChroma has launched a line of 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 se- lection 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 al- low you to use your phone’s camera to select an object and pinpoint its exact color name. A Google Chrome extension, Chrome Daltonize!, will expose details of images that color blind users may otherwise not be able to see.

In some cases, I simply use my , visual cues, or previ- ous knowledge to help me guess what color something is. For example, 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

Lastly, don’t be afraid to ask for help. Always get another per- son’s opinion when in doubt of your color choices. After all, nobody sees color the exact same, so it’s good practice anyway Photograph over-dramatized for effect. Not actual EnChroma glasses. to have another person look at your work. 32

QUICK REFERENCE

Color Blind-Assisting Applications Ledscope (Android) Chromatic Glass (iOS) Color Inspector (iOS) ColorAssist (iOS) Chrome Daltonize (Google Chrome extension)

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 34

SOURCES

“Acquired Colour Vision Defects.” Colour Blind Awareness. Accessed June 05, 2016. http://www.colourblindawareness. org/colour-blindness/acquired-colour-vision-defects/.

Bailey, Gretchyn. “Color Blindness.” All About Vision. Accessed June 05, 2016. http://www.allaboutvision.com/ conditions/colordeficiency.htm.

“Facts About Color Blindness.” National Eye Institute. Accessed June 05, 2016. https://nei.nih.gov/health/color_ blindness/facts_about.

“In the Eye | Causes of Color.” In the Eye | Causes of Color. Accessed June 05, 2016. http://www.webexhibits.org/ causesofcolor/1G.html.

“A New Cure!?” Color Blindness. 2010. Accessed June 05, 2016. http://www.colour-blindness.com/solutions/a-new- cure/.

“Newsweek.” Newsweek. Accessed June 05, 2016. http:// newsweek190.rssing.com/browser.php?indx=25073648.

“Tritanomaly/Tritanopia | EnChroma.” EnChroma. Accessed June 05, 2016. http://enchroma.com/test/result/tritan/.

“Types of Colour Blindness.” Colour Blind Awareness. Accessed June 05, 2016. http://www.colourblindawareness. org/colour-blindness/types-of-colour-blindness/.