{"id":566939,"date":"2023-03-22T16:31:07","date_gmt":"2023-03-22T13:31:07","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/a-quick-guide-to-color-blind-design-how-to-present-data-to-everyone\/"},"modified":"2023-03-22T16:31:07","modified_gmt":"2023-03-22T13:31:07","slug":"a-quick-guide-to-color-blind-design-how-to-present-data-to-everyone","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/a-quick-guide-to-color-blind-design-how-to-present-data-to-everyone\/","title":{"rendered":"#A Quick Guide to Color Blind Design: How to Present Data to Everyone"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a2eeb7cc5b00\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #dd3333;color:#dd3333\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #dd3333;color:#dd3333\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a2eeb7cc5b00\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/buradabiliyorum.com\/en\/a-quick-guide-to-color-blind-design-how-to-present-data-to-everyone\/#%E2%80%9CA_Quick_Guide_to_Color_Blind_Design_How_to_Present_Data_to_Everyone%E2%80%9D\" >&#8220;A Quick Guide to Color Blind Design: How to Present Data to Everyone&#8221;<\/a><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/a-quick-guide-to-color-blind-design-how-to-present-data-to-everyone\/#Color_blindness_explained\" >Color blindness explained<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/buradabiliyorum.com\/en\/a-quick-guide-to-color-blind-design-how-to-present-data-to-everyone\/#Importance_of_Color_in_Presenting_Data\" >Importance of Color in Presenting Data<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/buradabiliyorum.com\/en\/a-quick-guide-to-color-blind-design-how-to-present-data-to-everyone\/#Designing_for_Inclusion\" >Designing for Inclusion<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/buradabiliyorum.com\/en\/a-quick-guide-to-color-blind-design-how-to-present-data-to-everyone\/#The_Guide_to_creating_an_inclusive_design\" >The Guide to creating an inclusive design<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/buradabiliyorum.com\/en\/a-quick-guide-to-color-blind-design-how-to-present-data-to-everyone\/#1_Create_a_color_palette_in_advance\" >1. Create a color palette in advance.<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/buradabiliyorum.com\/en\/a-quick-guide-to-color-blind-design-how-to-present-data-to-everyone\/#2_Choose_the_color_scheme\" >2. Choose the color scheme.<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/buradabiliyorum.com\/en\/a-quick-guide-to-color-blind-design-how-to-present-data-to-everyone\/#3_Employ_textures_and_patterns\" >3. Employ textures and patterns.<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/buradabiliyorum.com\/en\/a-quick-guide-to-color-blind-design-how-to-present-data-to-everyone\/#4_Keep_contrasting_colors_to_a_minimum\" >4. Keep contrasting colors to a minimum.<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/buradabiliyorum.com\/en\/a-quick-guide-to-color-blind-design-how-to-present-data-to-everyone\/#5_Create_a_monochrome_chart\" >5. Create a monochrome chart.<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/buradabiliyorum.com\/en\/a-quick-guide-to-color-blind-design-how-to-present-data-to-everyone\/#6_Keep_your_design_simple_and_straightforward\" >6. Keep your design simple and straightforward.<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h1><span class=\"ez-toc-section\" id=\"%E2%80%9CA_Quick_Guide_to_Color_Blind_Design_How_to_Present_Data_to_Everyone%E2%80%9D\"><\/span>&#8220;A Quick Guide to Color Blind Design: How to Present Data to Everyone&#8221;<span class=\"ez-toc-section-end\"><\/span><\/h1>\r\n<div class=\"entry-inner\"> \n                            \n<p class=\"wp-block-paragraph\">Reduced color perception or the capacity to distinguish between colors are symptoms of color blindness. <a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/www.colourblindawareness.org\/colour-blindness\/\">Color blindness<\/a> affects 1 in 200 women and 1 in every 12 men. Do digital resources like websites and educational materials affect color blindness?\u00a0<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Absolutely! Consider accessibility best practices when creating online documents to ensure that your website or online products are accessible to all visitors.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Color_blindness_explained\"><\/span>Color blindness explained<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A widespread myth is that color-blind people can only see the world in black and white, a different condition termed monochromacy. In actuality, color blindness affects everyone differently, ranging from being unable to distinguish between two or three colors to having trouble with certain tints.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This X-chromosome mutation caused this neurological anomaly. Women are less likely to inherit the illness because they have two X-chromosomes, one of which serves as a backup to offset probable problems. The disorder normally shows itself in one of three ways.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Red\/green color blindness is the most prevalent type, when victims confuse all colors that contain either red or green as a component of the entire hue. Those with Protan color blindness are less sensitive to red light, whereas Deuteranopia patients are less sensitive to green light.\u00a0<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For instance, a protanope will mistake blue for purple because they are unable to distinguish the red component of the color purple. Tritanopia, the third type of color blindness, is the least prevalent and affects those who have trouble telling whether a light is blue or yellow.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Importance_of_Color_in_Presenting_Data\"><\/span>Importance of Color in Presenting Data<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The use of color is crucial for data visualization. To begin with, colors are used to draw attention to significant information and to show connections between different sorts of data. Furthermore, it is important in directing the viewer&#8217;s eye to color.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Though understanding color theory and design composition is crucial, there are other factors to take into account when optimizing for accessibility.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Designing_for_Inclusion\"><\/span>Designing for Inclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">What h<a href=\"https:\/\/buradabiliyorum.com\/en\/category\/download-scripts-themes-apps\/\" data-internallinksmanager029f6b8e52c=\"9\" title=\"Download Scripts &amp; Themes &amp; Apps\" target=\"_blank\" rel=\"noopener\">app<\/a>ens when a design is interpreted differently than it was intended? If your workplace is still not using an inclusive design approach, there is a good possibility that this is already taking place.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Keep in mind that we don&#8217;t want you to work twice as hard on your designs\u2014quite the opposite. Instead of developing specifically for this group, the objective is to take their needs into account when creating a product that is accessible to all.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This approach should be used when creating additional visuals, such as flow charts, mind maps and graphs, all of which frequently rely on color to convey distinct information, rather than only when developing website layouts.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can rely on online tools such as an <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/venngage.com\/\">infographic maker<\/a> or an <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/venngage.com\/templates\">infographic template<\/a> library to create inclusive visuals.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"The_Guide_to_creating_an_inclusive_design\"><\/span>The Guide to creating an inclusive design<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Create_a_color_palette_in_advance\"><\/span>1. Create a color palette in advance.<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Utilizing accessible colors and a colorblind-friendly palette doesn&#8217;t need you to sacrifice aesthetics or completely exclude color from your charts. By doing your research in advance, you can make sure that a color blind-friendly palette enhances rather than detracts from your design.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There are a variety of 8- and 15-color palettes available if you&#8217;re starting from scratch. You can see some of the best contrasting colors for colorblind persons in these palettes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Choose_the_color_scheme\"><\/span>2. Choose the color scheme.<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Consider all the different ways contrast may be used in your designs to increase color-blind accessibility. Employ vivid hues rather than subdued alternatives.\u00a0<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Use colors that are as dissimilar from one another as you can when you need to employ two colors next to one another. Also, you must examine how to optimize contrast among dynamic elements while thinking about color blindness and online design.\u00a0<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Which hues are used for buttons and hyperlinks? And what happens to these colors when a site visitor moves their mouse over the element? In these circumstances, you might need to draw attention to the element by surrounding it with color.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Employ_textures_and_patterns\"><\/span>3. Employ textures and patterns.<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A fantastic technique to include visual aspects in your design that don&#8217;t rely on color is to use patterns and textures. For instance, color-blind users could find it challenging to understand graphs and charts. In this instance, it&#8217;s preferable to employ contrasting patterns and, whenever it&#8217;s practical, to use text in its place.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Those who are colorblind might not trust colors as much as those with normal vision. They frequently perceive colors differently from how others do, hence they frequently rely on non-color cues to confirm hues or decipher meanings.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_Keep_contrasting_colors_to_a_minimum\"><\/span>4. Keep contrasting colors to a minimum.<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The use of problematic color combinations, some of which can render your charts or infographics totally inaccessible to color-blind individuals, is another reason why you should think out your color strategy in advance.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Avoid the following color combinations to protect people with color blindness:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Green and red<\/strong>: The red-green kind of color blindness is the most prevalent. Protanopiacs are unable to see any &#8220;red&#8221; light, while deuteranopiacs are incapable of seeing &#8220;green&#8221; light because they lack green cones.<\/li>\n\n\n\n<li><strong>Brown and green<\/strong>: For people who have red-green <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.colorblindguide.com\/post\/colorblind-friendly-design-3\">colorblindness<\/a>, the light brown can resemble the green color and the dark green might be perceived as brown. Hence, colorblind individuals are unable to tell the two hues differently.<\/li>\n\n\n\n<li><strong>Blue and green<\/strong>: When it comes to the red-green variety, light green appears as yellow and dark green as brown. Turquoise or blue-green is seen as gray.<\/li>\n\n\n\n<li><strong>Gray and blue<\/strong>: A person who is red-green colorblind might not be able to distinguish the green hue of turquoise and instead see it as gray.\u00a0<\/li>\n\n\n\n<li><strong>Purple and blue<\/strong>: Those who suffer from protanopia cannot see the color purple; instead, they perceive it as a deep blue.<\/li>\n\n\n\n<li><strong>Gray and green<\/strong>: It is best to avoid this color combination depending on the hue of the blue and gray.<\/li>\n\n\n\n<li><strong>Black and green<\/strong>: Protanopes are more likely to mistake various colors of red for black.<\/li>\n<\/ul><h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"5_Create_a_monochrome_chart\"><\/span>5. Create a monochrome chart.<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Consider making your chart monochromatic because color blindness has no effect on the capacity to discern between various shades. Naturally, using a limited color palette will result in less opportunities to apply unfavorable color combinations.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"6_Keep_your_design_simple_and_straightforward\"><\/span>6. Keep your design simple and straightforward.<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Your infographics should be as straightforward and organized as feasible when creating for accessibility. Whether or not your audience is color blind, taking a minimalistic approach will assist make your presentations easier to understand.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Featured Image by <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/unsplash.com\/@denmychan?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">Denise Chan<\/a> on <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/unsplash.com\/photos\/pXmbsF70ulM?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">Unsplash<\/a><\/em><\/p>\n                            <\/div><br><div class=\"author-inner\">\n<p class=\"bio-name\">Melis Bayram<\/p>\n<div class=\"bio-desc\">\n    <\/div>\n<!-- social-link -->\n<div class=\"clear\"><\/div>\n<\/div>\r\n<blockquote><strong><span style=\"color: #ff6600;\">If you liked the article, do not forget to share it with your friends. Follow us on\u00a0<span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/news.google.com\/publications\/CAAqBwgKMLG0nwswvr63Aw\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google News<\/a><\/span>\u00a0too, click on the star and choose us from your favorites.<\/span><\/strong><\/blockquote>\r\n<blockquote>\r\n<p style=\"text-align: center;\">For forums sites go to <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/forum.buradabiliyorum.com\/\" target=\"_blank\" rel=\"noopener\">Forum.BuradaBiliyorum.Com<\/a><\/span><\/strong><\/p>\r\n<\/blockquote>\r\n<blockquote>\r\n<p style=\"text-align: center;\"><strong>If you want to read more <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/news\/\" data-internallinksmanager029f6b8e52c=\"2\" title=\"News\" target=\"_blank\" rel=\"noopener\">News<\/a> articles, you can visit our <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/en.buradabiliyorum.com\/general\/\" target=\"_blank\" rel=\"noopener\">General <\/a><\/span>category.<\/strong><\/p>\r\n<\/blockquote>\r\n\r\n<span style=\"color: black;\"><a style=\"color: #ff9900;\" href=\"https:\/\/www.noupe.com\/design\/a-quick-guide-to-color-blind-design-how-to-present-data-to-everyone.html\" target=\"_blank\" rel=\"noopener\">Source<\/a><\/span>","protected":false},"excerpt":{"rendered":"<p>&#8220;A Quick Guide to Color Blind Design: How to Present Data to Everyone&#8221; Reduced color perception or the capacity to distinguish between colors are symptoms of color blindness. Color blindness affects 1 in 200 women and 1 in every 12 men. Do digital resources like websites and educational materials affect color blindness?\u00a0 Absolutely! Consider accessibility&#8230;<\/p>\n","protected":false},"author":1,"featured_media":566940,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/www.noupe.com\/wp-content\/uploads\/2023\/03\/denise-chan-pXmbsF70ulM-unsplash-scaled.jpg","fifu_image_alt":"","footnotes":""},"categories":[1],"tags":[79296,78078,82565,76732],"class_list":["post-566939","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-general","tag-accessibility","tag-color","tag-color-palettes","tag-design"],"_links":{"self":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/566939","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/comments?post=566939"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/566939\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/566940"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=566939"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=566939"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=566939"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}