{"id":575,"date":"2013-04-30T14:57:14","date_gmt":"2013-04-30T21:57:14","guid":{"rendered":"http:\/\/pln.lanecc.net\/webteam\/?p=575"},"modified":"2013-04-30T14:57:14","modified_gmt":"2013-04-30T21:57:14","slug":"color-blindness-testing","status":"publish","type":"post","link":"https:\/\/blogs.lanecc.edu\/webteam\/2013\/04\/30\/color-blindness-testing\/","title":{"rendered":"Color Blindness Testing"},"content":{"rendered":"<p>As we prepared to launch the new design, one of the things we were sure to focus on was accessibility. While that&#8217;s been covered in previous <a title=\"Website Accessibility Improvements\" href=\"http:\/\/pln.lanecc.net\/webteam\/2013\/01\/23\/website-accessibility-improvements\/\">posts<\/a>, there&#8217;s another area of web accessibility that&#8217;s often forgotten that I&#8217;d like to highlight here: Color Blindness.<\/p>\n<p>Color Blindness is a complex condition, manifesting one at least <a href=\"https:\/\/en.wikipedia.org\/wiki\/Color_blindness\">ten different ways<\/a>, and\u00a0 affecting some<a href=\"http:\/\/www.usability.gov\/articles\/newsletter\/pubs\/022010new.html\"> ten million Americans<\/a>. Although most color blind individuals are actually color weak &#8211; meaning some vision of a color, but trouble distinguishing it from nearby colors &#8211; we chose to do our tests on the more severe form, rationalizing that if we can design a website that works for true color blindness, it will also work for weakness.<\/p>\n<p>Here&#8217;s some simulations of different areas of our site for different types of color blindness:<\/p>\n<h3>Homepage:<\/h3>\n<div id='gallery-1' class='gallery galleryid-575 gallery-columns-2 gallery-size-thumbnail'><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/blogs.lanecc.edu\/webteam\/2013\/04\/30\/color-blindness-testing\/future-tritanopia\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/blogs.lanecc.edu\/webteam\/wp-content\/uploads\/sites\/25\/2013\/04\/future-tritanopia-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" aria-describedby=\"gallery-1-592\" \/><\/a>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-1-592'>\n\t\t\t\tTritanopia\n\t\t\t\t<\/figcaption><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/blogs.lanecc.edu\/webteam\/2013\/04\/30\/color-blindness-testing\/homepage-protanopia\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/blogs.lanecc.edu\/webteam\/wp-content\/uploads\/sites\/25\/2013\/04\/homepage-protanopia-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" aria-describedby=\"gallery-1-595\" \/><\/a>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-1-595'>\n\t\t\t\tProtanopia\n\t\t\t\t<\/figcaption><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/blogs.lanecc.edu\/webteam\/2013\/04\/30\/color-blindness-testing\/homepage-deuteranopia\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/blogs.lanecc.edu\/webteam\/wp-content\/uploads\/sites\/25\/2013\/04\/homepage-deuteranopia-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" aria-describedby=\"gallery-1-594\" \/><\/a>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-1-594'>\n\t\t\t\tDeuteranopia\n\t\t\t\t<\/figcaption><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/blogs.lanecc.edu\/webteam\/2013\/04\/30\/color-blindness-testing\/homepage\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/blogs.lanecc.edu\/webteam\/wp-content\/uploads\/sites\/25\/2013\/04\/homepage-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" aria-describedby=\"gallery-1-593\" \/><\/a>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-1-593'>\n\t\t\t\tno color vision deficiencies\n\t\t\t\t<\/figcaption><\/figure>\n\t\t<\/div>\n\n<h3>Future Students:<\/h3>\n<div id='gallery-2' class='gallery galleryid-575 gallery-columns-2 gallery-size-thumbnail'><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/blogs.lanecc.edu\/webteam\/2013\/04\/30\/color-blindness-testing\/current-tritanopia\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/blogs.lanecc.edu\/webteam\/wp-content\/uploads\/sites\/25\/2013\/04\/current-tritanopia-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" aria-describedby=\"gallery-2-588\" \/><\/a>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-2-588'>\n\t\t\t\tTritanopia\n\t\t\t\t<\/figcaption><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/blogs.lanecc.edu\/webteam\/2013\/04\/30\/color-blindness-testing\/future-protanopia\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/blogs.lanecc.edu\/webteam\/wp-content\/uploads\/sites\/25\/2013\/04\/future-protanopia-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" aria-describedby=\"gallery-2-591\" \/><\/a>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-2-591'>\n\t\t\t\tProtanopia\n\t\t\t\t<\/figcaption><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/blogs.lanecc.edu\/webteam\/2013\/04\/30\/color-blindness-testing\/future-deuteranopia\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/blogs.lanecc.edu\/webteam\/wp-content\/uploads\/sites\/25\/2013\/04\/future-deuteranopia-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" aria-describedby=\"gallery-2-590\" \/><\/a>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-2-590'>\n\t\t\t\tDeuteranopia\n\t\t\t\t<\/figcaption><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/blogs.lanecc.edu\/webteam\/2013\/04\/30\/color-blindness-testing\/future\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/blogs.lanecc.edu\/webteam\/wp-content\/uploads\/sites\/25\/2013\/04\/future-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" aria-describedby=\"gallery-2-589\" \/><\/a>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-2-589'>\n\t\t\t\tno color vision deficiencies\n\t\t\t\t<\/figcaption><\/figure>\n\t\t<\/div>\n\n<h3>Current Students:<\/h3>\n<div id='gallery-3' class='gallery galleryid-575 gallery-columns-2 gallery-size-thumbnail'><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/blogs.lanecc.edu\/webteam\/2013\/04\/30\/color-blindness-testing\/current\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/blogs.lanecc.edu\/webteam\/wp-content\/uploads\/sites\/25\/2013\/04\/current-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" aria-describedby=\"gallery-3-584\" \/><\/a>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-3-584'>\n\t\t\t\tno color vision deficiencies\n\t\t\t\t<\/figcaption><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/blogs.lanecc.edu\/webteam\/2013\/04\/30\/color-blindness-testing\/current-protanopia\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/blogs.lanecc.edu\/webteam\/wp-content\/uploads\/sites\/25\/2013\/04\/current-protanopia-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" aria-describedby=\"gallery-3-587\" \/><\/a>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-3-587'>\n\t\t\t\tProtanopia\n\t\t\t\t<\/figcaption><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/blogs.lanecc.edu\/webteam\/2013\/04\/30\/color-blindness-testing\/current-deuteranopia\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/blogs.lanecc.edu\/webteam\/wp-content\/uploads\/sites\/25\/2013\/04\/current-deuteranopia-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" aria-describedby=\"gallery-3-585\" \/><\/a>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-3-585'>\n\t\t\t\tDeuteranopia\n\t\t\t\t<\/figcaption><\/figure>\n\t\t<\/div>\n\n<h3>Community:<\/h3>\n<div id='gallery-4' class='gallery galleryid-575 gallery-columns-2 gallery-size-thumbnail'><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/blogs.lanecc.edu\/webteam\/2013\/04\/30\/color-blindness-testing\/community\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/blogs.lanecc.edu\/webteam\/wp-content\/uploads\/sites\/25\/2013\/04\/community-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" aria-describedby=\"gallery-4-576\" \/><\/a>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-4-576'>\n\t\t\t\tno color vision deficiencies\n\t\t\t\t<\/figcaption><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/blogs.lanecc.edu\/webteam\/2013\/04\/30\/color-blindness-testing\/community-tritanopia\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/blogs.lanecc.edu\/webteam\/wp-content\/uploads\/sites\/25\/2013\/04\/community-tritanopia-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" aria-describedby=\"gallery-4-579\" \/><\/a>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-4-579'>\n\t\t\t\tTritanopia\n\t\t\t\t<\/figcaption><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/blogs.lanecc.edu\/webteam\/2013\/04\/30\/color-blindness-testing\/community-protanopia\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/blogs.lanecc.edu\/webteam\/wp-content\/uploads\/sites\/25\/2013\/04\/community-protanopia-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" aria-describedby=\"gallery-4-578\" \/><\/a>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-4-578'>\n\t\t\t\tProtanopia\n\t\t\t\t<\/figcaption><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/blogs.lanecc.edu\/webteam\/2013\/04\/30\/color-blindness-testing\/community-deuteranopia\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/blogs.lanecc.edu\/webteam\/wp-content\/uploads\/sites\/25\/2013\/04\/community-deuteranopia-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" aria-describedby=\"gallery-4-577\" \/><\/a>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-4-577'>\n\t\t\t\tDeuteranopia\n\t\t\t\t<\/figcaption><\/figure>\n\t\t<\/div>\n\n<h3>Content Page:<\/h3>\n<div id='gallery-5' class='gallery galleryid-575 gallery-columns-2 gallery-size-thumbnail'><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/blogs.lanecc.edu\/webteam\/2013\/04\/30\/color-blindness-testing\/content\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/blogs.lanecc.edu\/webteam\/wp-content\/uploads\/sites\/25\/2013\/04\/content-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" aria-describedby=\"gallery-5-580\" \/><\/a>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-5-580'>\n\t\t\t\tno color vision deficiencies\n\t\t\t\t<\/figcaption><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/blogs.lanecc.edu\/webteam\/2013\/04\/30\/color-blindness-testing\/content-tritanopia\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/blogs.lanecc.edu\/webteam\/wp-content\/uploads\/sites\/25\/2013\/04\/content-tritanopia-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" aria-describedby=\"gallery-5-583\" \/><\/a>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-5-583'>\n\t\t\t\tTritanopia\n\t\t\t\t<\/figcaption><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/blogs.lanecc.edu\/webteam\/2013\/04\/30\/color-blindness-testing\/content-protanopia\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/blogs.lanecc.edu\/webteam\/wp-content\/uploads\/sites\/25\/2013\/04\/content-protanopia-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" aria-describedby=\"gallery-5-582\" \/><\/a>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-5-582'>\n\t\t\t\tProtanopia\n\t\t\t\t<\/figcaption><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/blogs.lanecc.edu\/webteam\/2013\/04\/30\/color-blindness-testing\/content-deuteranopia\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/blogs.lanecc.edu\/webteam\/wp-content\/uploads\/sites\/25\/2013\/04\/content-deuteranopia-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" aria-describedby=\"gallery-5-581\" \/><\/a>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-5-581'>\n\t\t\t\tDeuteranopia\n\t\t\t\t<\/figcaption><\/figure>\n\t\t<\/div>\n\n<p>The primary thing to look for in those images is contrast. Do the color choices of our design ever create a situation where a color blind person wouldn&#8217;t be able to find some of the text? For example, if the design had adjacent green and orange elements, a person with Protanopia would probably be unable to tell them apart. From what I can see, we&#8217;re in pretty good shape. And just to make sure, I double checked with a colorblind coworker.<\/p>\n<p>Another thing to think about with Color Blindness is the use of color to convey important information. For example, say you receive a message on a website, &#8220;The email was not sent&#8221;. If that message is in red, most of us would assume that it was a bad thing &#8211; the email we were trying to send didn&#8217;t make it. But if that message was in green, then most of us would assume it was a good thing &#8211; the message we desperately didn&#8217;t want to send was canceled. For this reason, Drupal includes a checkbox next to &#8220;good&#8221; messages, and an X next to &#8220;bad&#8221; messages, so that the intent of the message is always clear, even if the color isn&#8217;t apparent.<\/p>\n<p>Although we tried our best to test a few regular content pages (like <a href=\"http:\/\/www.lanecc.edu\/esfs\">http:\/\/www.lanecc.edu\/esfs<\/a>, or <a href=\"http:\/\/www.lanecc.edu\/finaid\">http:\/\/www.lanecc.edu\/finaid<\/a>), with over 4000 pages, it isn&#8217;t possible for me to hand check every one. For that reason, if you&#8217;re a content editor, please try to keep contrast and intent in mind when you&#8217;re working on your pages.<\/p>\n<p>I created those images using GIMP, a free software program, using the Color Deficiency Filter (under Views). If you&#8217;d like to try seeing your page, there&#8217;s a number of color blindness simulators online. I&#8217;d recommend <a href=\"http:\/\/www.etre.com\/tools\/colourblindsimulator\/\">http:\/\/www.etre.com\/tools\/colourblindsimulator\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>As we prepared to launch the new design, one of the things we were sure to focus on was accessibility. While that&#8217;s been covered in previous posts, there&#8217;s another area of web accessibility that&#8217;s often forgotten that I&#8217;d like to highlight here: Color Blindness. Color Blindness is a complex condition, manifesting one at least ten &hellip; <a href=\"https:\/\/blogs.lanecc.edu\/webteam\/2013\/04\/30\/color-blindness-testing\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Color Blindness Testing&#8221;<\/span><\/a><\/p>\n","protected":false},"author":43,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":"","_wpscppro_dont_share_socialmedia":false,"_wpscppro_custom_social_share_image":0,"_facebook_share_type":"","_twitter_share_type":"","_linkedin_share_type":"","_pinterest_share_type":"","_linkedin_share_type_page":"","_instagram_share_type":"","_medium_share_type":"","_threads_share_type":"","_google_business_share_type":"","_selected_social_profile":[],"_wpsp_enable_custom_social_template":false,"_wpsp_social_scheduling":{"enabled":false,"datetime":null,"platforms":[],"status":"template_only","dateOption":"today","timeOption":"now","customDays":"","customHours":"","customDate":"","customTime":"","schedulingType":"absolute"},"_wpsp_active_default_template":true},"categories":[3],"tags":[6,19],"class_list":["post-575","post","type-post","status-publish","format-standard","hentry","category-drupal","tag-accessibility","tag-templates"],"_links":{"self":[{"href":"https:\/\/blogs.lanecc.edu\/webteam\/wp-json\/wp\/v2\/posts\/575","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.lanecc.edu\/webteam\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.lanecc.edu\/webteam\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.lanecc.edu\/webteam\/wp-json\/wp\/v2\/users\/43"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.lanecc.edu\/webteam\/wp-json\/wp\/v2\/comments?post=575"}],"version-history":[{"count":0,"href":"https:\/\/blogs.lanecc.edu\/webteam\/wp-json\/wp\/v2\/posts\/575\/revisions"}],"wp:attachment":[{"href":"https:\/\/blogs.lanecc.edu\/webteam\/wp-json\/wp\/v2\/media?parent=575"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.lanecc.edu\/webteam\/wp-json\/wp\/v2\/categories?post=575"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.lanecc.edu\/webteam\/wp-json\/wp\/v2\/tags?post=575"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}