CINXE.COM

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>WebAIM: Visual Disabilities - Color-blindness</title> <link rel="shortcut icon" href="/media/favicon.ico"> <link rel="home" href="/"> <link rel="search" href="/search/"> <link rel="alternate" href="https://webaim.org/blog/feed" type="application/rss+xml" title="WebAIM Blog"> <script async src="https://www.googletagmanager.com/gtag/js?id=G-Y41PF8WV9X"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-Y41PF8WV9X'); </script> <link href="/styles/main.css" rel="stylesheet" type="text/css"> <link href="/styles/print.css" rel="stylesheet" type="text/css" media="print"> <script src="/media/scripts/jquery.js"></script> <script src="/media/scripts/main.js"></script> <link href='https://fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Kameron:400,700' rel='stylesheet' type='text/css'> <link href="/styles/documents.css?ver=2" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700" rel="stylesheet">  </head> <body> <div id="headcontainer" class="clearfix" style="background-image: url(/media/banners/articles.jpg)"> <header> <div id="skiptocontent"><a href="#maincontent">skip to main content</a></div> <h2><a href="/"><img src="/media/logo.png" width="315" height="83" alt="WebAIM - Web Accessibility In Mind"></a></h2> <nav> <h2 class="hidden">Main Navigation</h2> <ul> <li><a href="/services/">Services</a></li> <li class="current"><a href="/articles/">Articles</a></li> <li><a href="/resources/">Resources</a></li> <li><a href="/projects/">Projects</a></li> <li><a href="/community/">Community</a></li> </ul> </nav> <div id="search"> <form method="get" role="search" action="/search/" id="sitesearch"> <p class="search"><span><label for="q">Search:</label> <input type="text" name="q" id="q"><input type="image" src="/media/template/search.svg" alt="Submit Search"></span></p> </form> <p class="intro"><a href="/intro">Introduction to Web Accessibility</a></p> <p class="training"><a href="/services/training">WebAIM Training</a></p> </div> </header> </div> <main id="maincontainer" class="clearfix"> <article id="maincontent"> <h1>Visual Disabilities<br><span class="subtitle">Color-blindness</span></h1> <p id="breadcrumbs"><span class="hidden">You are here: </span><a href="/">Home</a> > <a href="/articles/">Articles</a> > <a href="./">Visual Disabilities</a> > Page 4: Color-blindness</p> <nav role="navigation"> <h2>Article Contents</h2> <ol> <li>Page 1: <a href="./">Introduction</a></li> <li>Page 2: <a href="blind">Blindness</a></li> <li>Page 3: <a href="lowvision">Low Vision</a></li> <li class="currentpage"><span class="hidden">Current page: </span>Page 4: Color-blindness <ol> <li><a href="#types">Types of Color-blindness</a> <ol> <li><a href="#redgreen">Red-green deficiencies</a></li> <li><a href="#other">Other deficiencies</a></li> </ol> </li> <li><a href="#designing">Designing for Color-blindness</a></li> </ol> </li> </ol> </nav> <div class="section" id="types"> <h2>Types of Color-blindness</h2> <p><span class="inlinemediaobject floatright"><img class="border" src="media/crayons.jpg" alt="Several coloring crayons displayed without color" width="200" height="176" /></span>Color-blindness or color vision deficiency is the inability to distinguish certain shades of color. It is a fascinating topic because of its complexity. The human eye has three types of photoreceptors, each of which is responsible for detecting different color wavelengths. Additionally, photoreceptors called rods detect light intensity. Color-blindness can occur if any of these types of photoreceptors is missing or functioning incorrectly.</p> <p>Color deficiency makes certain color combinations difficult to differentiate. The colors with which they have difficulty distinguishing depend upon their type of color-blindness, but red-green deficiencies are the most common, meaning that certain shades of the colors red and green may appear very similar.</p> <div class="section" id="redgreen"> <h3>Red-green deficiencies</h3> <p>Individuals with a red-green deficiency have difficulty distinguishing between some shades of reds and greens, but they can still differentiate between a light color and a dark color. A dark red and a light green will be easy to distinguish because of their luminance difference. People with red-green color-blindness may see reds and greens as yellows, oranges, and beiges. This means that yellows, oranges, and beiges can be confused with greens and reds. Blue is not affected by this type of color blindness.</p> <div class="section" id="protonopia"> <h4>Protanopia and protanomaly (red deficiencies)</h4> <p>Protanopia and protanomaly occur when the cones in the eye primarily responsible for detecting red are missing or malfunctioning. The greens tend to look like the reds. Protanomaly is milder than protanopia, but the result is similar. Many people with protanomaly can distinguish some reds and greens with some difficulty, and, as with protanopia, reds tend to look darker as well.</p> <div class="example"> <div class="title">Example</div> <div style="float: left; width: 50%;"> <p style="margin: 0px; text-align: center;">Normal<br /> <span class="inlinemediaobject"><img class="border" src="media/normal.jpg" alt="Drawing with reds, blues, greens, and yellows." width="167" height="250" /></span></p> </div> <div style="border-left: 4px dashed rgb(153, 0, 0); margin-left: 50%;"> <p style="margin: 0px 0px 1em; padding: 0px; text-align: center;">Protanopia<br /> <span class="inlinemediaobject"><img class="border" src="media/protanopia.jpg" alt="The same drawing, with indistinguishable reds and greens, with reds that are slightly darker in contrast than in the original." width="167" height="250" /></span></p> </div> </div> </div> <div class="section" id="deuteranopia"> <h4>Deuteranopia and deuteranomaly (green deficiencies)</h4> <p>Deuteranopia and deuteranomaly occur when the cones primarily responsible for detecting green are missing or malfunctioning, but the result is very similar to protanopia, with the exception that reds do not appear as dark. Deuteranomaly is the less serious of the two conditions. Individuals with deuteranomaly can often distinguish between the shades of reds and greens relatively accurately.</p> <div class="example"> <div class="title">Example</div> <div style="float: left; width: 50%;"> <p style="margin: 0px; text-align: center;">Normal<br /> <span class="inlinemediaobject"><img class="border" src="media/normal.jpg" alt="drawing with reds, blues, greens, and yellows" width="167" height="250" /></span></p> </div> <div style="border-left: 4px dashed rgb(153, 0, 0); margin-left: 50%;"> <p style="margin: 0px 0px 1em; padding: 0px; text-align: center;">Deuteranopia<br /> <span class="inlinemediaobject"><img class="border" src="media/deuteranopia.jpg" alt="same drawing with indistinguishable reds and greens" width="167" height="250" /></span></p> </div> </div> </div> </div> <div class="section" id="other"> <h3>Other deficiencies</h3> <div class="section" id="tritanopia"> <h4>Tritanopia and tritanomaly (blue deficiencies)</h4> <p>Tritanopia and tritanomaly are much less common than the other types. Tritanopia is when the cones primarily responsible for detecting blue are missing or malfunctioning. Blues and greens may appear very similar, and yellows may appear as lighter shades of red or may seem to disappear completely.</p> <div class="example"> <div class="title">Example</div> <div style="float: left; width: 50%;"> <p style="margin: 0px; text-align: center;">Normal<br /> <span class="inlinemediaobject"><img class="border" src="media/normal.jpg" alt="drawing with reds, blues, greens, and yellows" width="167" height="250" /></span></p> </div> <div style="border-left: 4px dashed rgb(153, 0, 0); margin-left: 50%;"> <p style="margin: 0px 0px 1em; padding: 0px; text-align: center;">Tritanopia<br /> <span class="inlinemediaobject"><img class="border" src="media/tritanopia.jpg" alt="same drawing with blues and greens that are difficult to distinguish" width="167" height="250" /></span></p> </div> </div> </div> <div class="section" id="achromacy"> <h4>Rod monochromacy or achromatopsia (no color)</h4> <p>This group constitutes an extremely small minority among people who are color-blind. All three types of cones or either missing or non-functional, so the rods (the photoreceptors which can only differentiate between light and dark) are the only available source of visual information. Individuals with achromatopsia (or achromacy) see the world as if in grayscale—everything will appear in black, white, and shades of gray. This often creates poor visual acuity and an aversion to bright light.</p> <p>The term "color blindness" is most true for this type of deficiency, since these individuals entirely lack the ability to see any color, whereas the term "color vision deficiency" is most accurate when people only lack part of the color spectrum.</p> <div class="example"> <div class="title">Example</div> <div style="margin: 0px; padding: 0px; float: left; width: 48%;"> <p style="margin: 0px; padding: 0px; text-align: center;">Normal<br /> <span class="inlinemediaobject"><img class="border" src="media/normal.jpg" alt="Drawing with reds, blues, greens, and yellows." width="167" height="250" /></span></p> </div> <div style="border-left: 4px dashed rgb(153, 0, 0); margin-left: 50%;"> <p style="margin: 0px 0px 1em; padding: 0px; text-align: center;">achromatopsia<br /> <span class="inlinemediaobject"><img class="border" src="media/achromacy.jpg" alt="Same drawing, but without any color, and the image itself is blurrier and lighter." width="167" height="250" /></span></p> </div> </div> </div> </div> </div> <div class="section" id="designing"> <h2>Designing for Color-blindness</h2> <p>When designing web content, it is not necessary to get rid of color. It is not necessary to convert all images to black and white or get rid of images entirely. In fact, it may not be necessary to change anything at all.</p> <div class="important"> <div class="title">Important</div> <p>Make sure that colors are not the only method of conveying important information.</p> </div> <p>Most of the time, color is irrelevant in understanding content on the web. However, when colors are used to convey or differentiate information—such as a pie chart or bar graph, or using green and red text to indicate pass/fail or good/bad, etc.—this information should also be provided in another way. Consider also that anyone who is blind, is also color blind.</p> <p>For example, the image below shows a portion of the New York City public transportation system, where the routes are distinguished by the color of the lines.</p> <div class="mediaobject"> <img src="media/mapcolor.png" alt="A transportation map shows different stations and routes between the stations. The lines between the stations are different colors, which correspond to different routes." style="width:100%;" class="border"> </div> <p>When color information is removed, the routes are very difficult to differentiate.</p> <div class="mediaobject"> <img src="media/mapgreyscale.png" alt="The same transportation map shows different stations and routes between the stations, but color information has been removed." style="width:100%;" class="border"> </div> <p>Color enhances the user experience. However, when colors are not perceived by users who are blind or color-blind, are overridden by custom settings, or are not readily distinguishable, this information would need to be conveyed by annotating the image, using different styles or contrasts for each line, or by supplementing the image with text on the web page that conveys the same information.</p> </div> </article>  <aside id="articlemeta"> <div id="updated">Last updated: <time datetime="2021-08-12">Aug 12, 2021</time></div> <div id="related"> <h2>Related Resources</h2> <ul> <li><a href="/intro/">Introduction to Web Accessibility</a></li> <li><a href="/articles/pour/">Constructing a POUR Website</a></li> <li><a href="/articles/auditory/">Auditory Disabilities</a></li> <li><a href="/articles/motor/">Motor Disabilities</a></li> <li><a href="/articles/cognitive/">Cognitive Disabilities</a></li> <li><a href="/articles/seizure/">Seizure and Vestibular Disorders</a></li> </ul> </div> </aside> </main> <footer> <div id="footerresources"> <div class="footerblock"> <h2 id="copyright">©2024 WebAIM</h2> <p id="contact">Institute for Disability Research, Policy, and Practice<br> Utah State University<br> 6807 Old Main Hill<br> Logan, UT 84322-6807<br> <a class="phone" href="tel:4357977024">435.797.7024</a></p> <div id="checkpage"> <h2>Check Your Accessibility</h2> <form action="https://wave.webaim.org/report" novalidate> <label for="waveurl">Web site address:</label> <input type="url" id="waveurl" name="url" title="Web site address"> <input type="submit" value="WAVE"> </form> </div> </div> <div class="footerblock"> <h2 id="blog">From the Blog</h2> <ul><li><a href="/blog/severity-ratings/">Using Severity Ratings to Prioritize Web Accessibility Remediation</a></li><li><a href="/blog/25-tips/">25 Accessibility Tips to Celebrate 25 Years</a></li><li><a href="/blog/celebrating-webaims-25th-anniversary/">Celebrating WebAIM's 25th Anniversary</a></li><li><a href="/blog/introducing-ncademi/">Introducing NCADEMI: The National Center on Accessible Digital Educational Materials & Instruction聽</a></li></ul> </div> <div class="footerblock"> <h2 id="popular">Popular Resources</h2> <ul> <li><a href="/training/virtual">WebAIM Training</a></li> <li><a href="/standards/wcag/checklist">WCAG 2 Checklist</a></li> <li><a href="/newsletter">WebAIM Monthly Newsletter</a></li> <li><a href="/resources/contrastchecker">Color Contrast Checker</a></li> <li><a href="/resources/designers/">Web Accessibility for Designers</a></li> <li><a href="http://wave.webaim.org/">WAVE Web Accessibility Evaluation Tool</a></li> </ul> </div> <div id="footerlinks"> <ul> <li><a id="footercontact" href="/contact">Contact</a></li> <li><a id="footerabout" href="/about">About</a></li> <li><a id="footerrss" href="/community/rss">RSS Feeds</a></li> <li><a id="footertwit" href="http://twitter.com/webaim">Twitter</a></li> <li><a id="footercopyright" href="/copyright">Copyright & Terms of Use</a></li> </ul> </div> <div class="clear"></div> </div> </footer> </body> </html>