{"id":65276,"date":"2023-01-13T14:17:56","date_gmt":"2023-01-13T19:17:56","guid":{"rendered":"https:\/\/venngage.com\/blog\/?p=65276"},"modified":"2025-12-03T03:53:41","modified_gmt":"2025-12-03T08:53:41","slug":"color-blind-design","status":"publish","type":"post","link":"https:\/\/venngage.com\/blog\/color-blind-design\/","title":{"rendered":"Color Blind Design Guidelines: How to Convey Meaning to Everyone [With Examples &#038; Templates]"},"content":{"rendered":"<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/venngage.com\/templates\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"576\" src=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2022\/12\/Color_Blind_Design_Blog_Header.png\" alt=\"\" class=\"wp-image-65309\" srcset=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2022\/12\/Color_Blind_Design_Blog_Header.png 1024w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2022\/12\/Color_Blind_Design_Blog_Header-300x169.png 300w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2022\/12\/Color_Blind_Design_Blog_Header-768x432.png 768w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2022\/12\/Color_Blind_Design_Blog_Header-730x411.png 730w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div>\n\n\n<p><a href=\"https:\/\/www.colorblindguide.com\/post\/colorblind-people-population-live-counter\" target=\"_blank\" rel=\"noreferrer noopener\">More than 360 million people<\/a> in the world are color blind, with the condition being more prevalent in men than women \u2014 8% of men and 0.5% of women worldwide have color vision deficiency.<\/p>\n\n\n\n<p>Which means you&#8217;re risking alienating 360 million people \u2014 and your customers could be one of them \u2014 if you don&#8217;t take into account color blindness when designing your brand&#8217;s visual materials.<\/p>\n\n\n\n<p>So how can you design for color blindness? Learn more in this comprehensive guide on color blind design guidelines for accessible content.<\/p>\n\n\n\n<center><a href=\"https:\/\/venngage.com\/tools\/accessible-color-palette-generator\" target=\"_blank\" rel=\"noopener\"><button class=\"btn-cta\"><b>START CREATING FOR FREE<\/b><\/button><\/a><\/center>&nbsp;\n\n\n\n<h3 class=\"wp-block-heading\" id=\"toc\"><strong>Click to jump ahead:<\/strong><\/h3>\n\n\n\n<ul>\n<li><a href=\"#what\">What is color vision deficiency &amp; how common is it?<\/a><\/li>\n\n\n\n<li><a href=\"#types\">Types of color blindness<\/a><\/li>\n\n\n\n<li><a href=\"#how\">How do you design for someone with color blindness?<\/a><\/li>\n\n\n\n<li><a href=\"#color\">Color blind design tips<\/a><\/li>\n\n\n\n<li><a href=\"#FAQs\">Color blind design FAQs<\/a><\/li>\n<\/ul>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what\"><strong>What is color vision deficiency &amp; how common is it?<\/strong><\/h2>\n\n\n\n<p>The term color vision deficiency (CVD) is the more accurate descriptor for color blindness, and that&#8217;s because most people to whom the term &#8220;color blind&#8221; is applied can see some colors. So, they&#8217;re not literally color blind in the sense of not being able to see any colors, though for the purposes of this guide, we are using those terms interchangeably. <\/p>\n\n\n\n<p>Color blindness is much more common in men than in women, and researchers estimate that <a href=\"https:\/\/www.colorblindguide.com\/post\/colorblind-people-population-live-counter\" target=\"_blank\" rel=\"noreferrer noopener\">about 360 million people<\/a> (and counting!) are color blind, though many people who are color blind have no idea. After all, who&#8217;s to say what I think of as red is the same as what you think of as red? <\/p>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" id=\"types\"><strong>Types of color blindness<\/strong><\/h2>\n\n\n\n<p>There are three major types of color blindness, and knowing the science behind them can help you when thinking about designing for color blindness:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Red-green<\/strong><\/h3>\n\n\n\n<p>Red-green color blindness, in which a person has difficulty distinguishing the color red from the color green, is the most common type, and there are <a href=\"https:\/\/www.nei.nih.gov\/learn-about-eye-health\/eye-conditions-and-diseases\/color-blindness\/types-color-blindness\" target=\"_blank\" rel=\"noreferrer noopener\">four types<\/a> of red-green color blindness:<\/p>\n\n\n\n<ul>\n<li><strong>Deuteranomaly<\/strong>: Makes green look more red. This is the most common type of red-green color blindness.<\/li>\n\n\n\n<li><strong>Protanomaly<\/strong>: Makes green look more red.<\/li>\n\n\n\n<li><strong>Protanopia<\/strong>: Unable to distinguish red and green.<\/li>\n\n\n\n<li><strong>Deuteranopia<\/strong>: Unable to distinguish red and green.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Blue-yellow<\/strong><\/h3>\n\n\n\n<p>The less common type of CVD, blue-yellow color blindness makes it difficult to tell blue from green and yellow from red, and there are two types of this form of color blindness:<\/p>\n\n\n\n<ul>\n<li><strong>Tritanomaly<\/strong>: Makes it hard to tell between blue and green or yellow and red.<\/li>\n\n\n\n<li><strong>Tritanopia<\/strong>: Unable to see the difference between blue and green, purple and red, or yellow and pink, and also makes colors appear less bright than they are.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Complete color blindness<\/strong><\/h3>\n\n\n\n<p>Also called <strong>monochromacy<\/strong>, total color blindness is <a href=\"https:\/\/www.colourblindawareness.org\/colour-blindness\/types-of-colour-blindness\/#:~:text=Monochromacy%20(achromatopsia)&amp;text=Achromatopsia%20is%20extremely%20rare%2C%20occuring,can%20make%20life%20very%20difficult.\" target=\"_blank\" rel=\"noreferrer noopener\">quite rare<\/a>, affecting about 1 in 33,000 people (vs. about 1 in 12 men for CVD in general).<\/p>\n\n\n\n<p><strong><a href=\"#toc\">Return to Table of Contents<\/a><\/strong><\/p>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how\"><strong>How do you design for someone with color blindness?<\/strong><\/h2>\n\n\n\n<p>While several products have been released in recent years to help correct for color blindness, including color-correcting glasses and contact lenses, inherited color blindness cannot be cured. That&#8217;s why it&#8217;s so important for designers to understand how to account for this in their work.<\/p>\n\n\n\n<p>This illustration shows how people with various types of color blindness perceive shades differently from those with normal vision:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"661\" height=\"569\" src=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/color-blind-friendly-palette-13.jpg\" alt=\"\" class=\"wp-image-65635\" srcset=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/color-blind-friendly-palette-13.jpg 661w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/color-blind-friendly-palette-13-300x258.jpg 300w\" sizes=\"(max-width: 661px) 100vw, 661px\" \/><\/figure><\/div>\n\n\n<p>As you can see from the illustration, there&#8217;s no one-size-fits-all color-based solution for designing for people with CVD. That&#8217;s why it&#8217;s important to use <a href=\"https:\/\/venngage.com\/blog\/design-principles\/\" target=\"_blank\" rel=\"noreferrer noopener\">design principles<\/a> other than color, including:<\/p>\n\n\n\n<ul>\n<li>Shape<\/li>\n\n\n\n<li>Size<\/li>\n\n\n\n<li><a href=\"https:\/\/venngage.com\/blog\/design-principle-proximity\/\" target=\"_blank\" rel=\"noreferrer noopener\">Proximity<\/a><\/li>\n\n\n\n<li>Pattern<\/li>\n\n\n\n<li><a href=\"https:\/\/venngage.com\/blog\/white-space-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">White space<\/a><\/li>\n<\/ul>\n\n\n\n<p><strong><a href=\"#toc\">Return to Table of Contents<\/a><\/strong><\/p>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" id=\"color\"><strong>Color blind design tips<\/strong><\/h2>\n\n\n\n<p>Designing with color blindness in mind isn&#8217;t as simple as just using black and while \u2014 color blindness can also affect people&#8217;s ability to see <a href=\"https:\/\/www.vectornator.io\/blog\/color-tone-terminology\/\" target=\"_blank\" rel=\"noreferrer noopener\">hues and shades<\/a> of colors. The best news? These tips will make your work more <a href=\"https:\/\/venngage.com\/blog\/accessible-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">accessible<\/a> to everyone, not just those with color vision deficiency.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Use more than one technique at a time<\/strong><\/h3>\n\n\n\n<p>Don&#8217;t rely <em>only<\/em> on color to convey information. Think about a stop sign; yes, it&#8217;s red, and for most people, that grabs attention immediately. But it&#8217;s also a unique shape and it says the word &#8220;STOP&#8221; in big letters. The combination of those three factors make stop signs color blind-friendly. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/pexels-pixabay-39080-scaled.jpg\" alt=\"stop sign\" class=\"wp-image-65638\" width=\"700\" srcset=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/pexels-pixabay-39080-scaled.jpg 2560w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/pexels-pixabay-39080-300x200.jpg 300w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/pexels-pixabay-39080-1024x683.jpg 1024w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/pexels-pixabay-39080-768x513.jpg 768w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/pexels-pixabay-39080-1536x1025.jpg 1536w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/pexels-pixabay-39080-2048x1367.jpg 2048w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/pexels-pixabay-39080-730x487.jpg 730w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/><figcaption class=\"wp-element-caption\">Source<\/figcaption><\/figure><\/div>\n\n\n<p>This screenshot from DOTS shows how the game&#8217;s designers created a color blind mode where simple shapes were added to the colors, allowing people with CVD to enjoy the game like their color-seeing counterparts.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"641\" height=\"1136\" src=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2022\/12\/color-blind-design.png\" alt=\"color blind design\" class=\"wp-image-65301\" srcset=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2022\/12\/color-blind-design.png 641w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2022\/12\/color-blind-design-169x300.png 169w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2022\/12\/color-blind-design-578x1024.png 578w\" sizes=\"(max-width: 641px) 100vw, 641px\" \/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\"><strong>Keep it simple<\/strong><\/h3>\n\n\n\n<p>Using as few colors as possible gives you fewer elements to keep in check, and it also has the added benefit of being simpler for you as a designer, as you have a smaller palette to choose from. And keep the design itself from being overly complex.<\/p>\n\n\n\n<p>The simple color palette, combined with large text and iconography, makes this infographic ideal for people with color blindness, even though the primary color is red, which shows how effective simple design can be for those with CVD.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/venngage.com\/templates\/infographics\/travel-editions-c5e9b311-593d-4fff-9933-4996aff8e6b3\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" loading=\"lazy\" width=\"700\" height=\"906\" src=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2022\/12\/Travel-Costs-Infographic-Template.png\" alt=\"color blind design\" class=\"wp-image-65302\" style=\"box-shadow: 0 1px 4px 0 rgb(0 0 0 \/ 10%), 0 0 6px 0 rgb(0 0 0 \/ 10%), 0 2px 2px -2px rgb(0 0 0 \/ 15%);\" srcset=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2022\/12\/Travel-Costs-Infographic-Template.png 700w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2022\/12\/Travel-Costs-Infographic-Template-232x300.png 232w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/a><\/figure><\/div>\n\n\n\n<center><a href=\"https:\/\/venngage.com\/templates\/infographics\/travel-editions-c5e9b311-593d-4fff-9933-4996aff8e6b3\" target=\"_blank\" rel=\"noopener\"><button class=\"btn-cta\"><b>CREATE THIS INFOGRAPHIC TEMPLATE<\/b><\/button><\/a><\/center>&nbsp;\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Pattern is your friend<\/strong><\/h3>\n\n\n\n<p>In situations where you can&#8217;t layer in many types of techniques to distinguish items or point out contrasts, consider patterns. Applying a simple but easily distinguishable pattern to, say, a bar graph can do wonders not just for those with CVD.<\/p>\n\n\n\n<p>With Venngage&#8217;s accessible editor, it&#8217;s easy to add patterns to a chart. Take this template as an example:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/venngage.com\/templates\/charts\/donut-chart-marketing-stats-template-7e90242e-ff3b-4303-816f-d262e8ea2e23\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/color-blind-design-example-template.png\" alt=\"Venngage donut chart color blind design\" class=\"wp-image-65639\" width=\"700\" srcset=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/color-blind-design-example-template.png 816w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/color-blind-design-example-template-300x287.png 300w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/color-blind-design-example-template-768x734.png 768w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/color-blind-design-example-template-730x698.png 730w\" sizes=\"(max-width: 816px) 100vw, 816px\" \/><\/a><\/figure><\/div>\n\n\n<center><a href=\"https:\/\/venngage.com\/templates\/charts\/donut-chart-marketing-stats-template-7e90242e-ff3b-4303-816f-d262e8ea2e23\" target=\"_blank\" rel=\"noopener\"><button class=\"btn-cta\"><b>CREATE THIS CHART TEMPLATE<\/b><\/button><\/a><\/center>&nbsp;\n\n\n\n<p>When you edit this template in Venngage, you have the option to edit it with the regular editor or the accessible one. We&#8217;ll choose the accessible editor:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/Venngage-accessible-editor.png\" alt=\"Venngage accessible editor\" class=\"wp-image-65640\" width=\"700\" srcset=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/Venngage-accessible-editor.png 820w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/Venngage-accessible-editor-300x259.png 300w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/Venngage-accessible-editor-768x663.png 768w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/Venngage-accessible-editor-730x630.png 730w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/figure><\/div>\n\n\n<p>In the editor, you can click on &#8220;Accessibility&#8221; (button on the top left corner). The Accessibility panel will appear on the right. <\/p>\n\n\n\n<p>If you click on &#8220;Simulator&#8221;, you can view the template under different color blindness filters \u2014 and here you can see that it could be difficult for people with tritanopia (blue-yellow color blindness) to distinguish the each donut slice from another:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/Venngage-color-blindness-simulator.png\" alt=\"Venngage accessible editor color blindness simulator\" class=\"wp-image-65641\" width=\"800\" style=\"box-shadow: 0 1px 4px 0 rgb(0 0 0 \/ 10%), 0 0 6px 0 rgb(0 0 0 \/ 10%), 0 2px 2px -2px rgb(0 0 0 \/ 15%);\" srcset=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/Venngage-color-blindness-simulator.png 1725w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/Venngage-color-blindness-simulator-300x167.png 300w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/Venngage-color-blindness-simulator-1024x572.png 1024w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/Venngage-color-blindness-simulator-768x429.png 768w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/Venngage-color-blindness-simulator-1536x857.png 1536w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/Venngage-color-blindness-simulator-730x408.png 730w\" sizes=\"(max-width: 1725px) 100vw, 1725px\" \/><\/figure><\/div>\n\n\n\n<p>To remedy this, we can add some patterns to the donut chart. Simply double click the chart to show the Chart Editor panel. Next, click &#8220;Setup&#8221; and you can choose to add patterns to the chart by toggle the button &#8220;Show patterns&#8221;:<\/p>\n\n\n\n<figure class=\"wp-block-gallery columns-1 is-cropped\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/venngage-accessible-editor-patterns-7.gif\"><img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"391\" src=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/venngage-accessible-editor-patterns-7.gif\" alt=\"venngage accessible editor patterns\" data-id=\"65679\" data-full-url=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/venngage-accessible-editor-patterns-7.gif\" data-link=\"https:\/\/venngage.com\/blog\/color-blind-design\/venngage-accessible-editor-patterns-7\/\" class=\"wp-image-65679\" style=\"box-shadow: 0 1px 4px 0 rgb(0 0 0 \/ 10%), 0 0 6px 0 rgb(0 0 0 \/ 10%), 0 2px 2px -2px rgb(0 0 0 \/ 15%);\"><\/a><\/figure><\/li><\/ul><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Avoid certain color combinations<\/strong><\/h3>\n\n\n\n<p>As we&#8217;ve discussed, CVD comes in many types, so there is no single color to use or to avoid, but there are some color combinations that make it notoriously difficult for people with color blindness to identify, particularly when those colors are placed in close proximity:<\/p>\n\n\n\n<ul>\n<li>Red &amp; green<\/li>\n\n\n\n<li>Blue &amp; purple<\/li>\n\n\n\n<li>Blue &amp; gray<\/li>\n\n\n\n<li>Green &amp; brown<\/li>\n\n\n\n<li>Green &amp; blue<\/li>\n\n\n\n<li>Green &amp; black<\/li>\n<\/ul>\n\n\n\n<p>You can use a <a href=\"https:\/\/venngage.com\/blog\/color-blind-friendly-palette\/\" target=\"_blank\" rel=\"noreferrer noopener\">color blind friendly palette<\/a> to guarantee that your design uses <a href=\"https:\/\/venngage.com\/blog\/accessible-colors\/\" target=\"_blank\" rel=\"noreferrer noopener\">accessible colors<\/a>. Here are some examples:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/venngage.com\/templates\/infographics\/color-palettes-for-color-blindness-0002b9e1-85d4-491a-9244-183356f42a7b\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/color-blindness-palettes-1.png\" alt=\"color blind friendly palettes\" class=\"wp-image-65642\" width=\"700\" srcset=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/color-blindness-palettes-1.png 816w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/color-blindness-palettes-1-251x1024.png 251w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/color-blindness-palettes-1-768x3133.png 768w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/color-blindness-palettes-1-502x2048.png 502w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/color-blindness-palettes-1-730x2978.png 730w\" sizes=\"(max-width: 816px) 100vw, 816px\" \/><\/a><\/figure><\/div>\n\n\n<center><a href=\"https:\/\/venngage.com\/templates\/infographics\/color-palettes-for-color-blindness-0002b9e1-85d4-491a-9244-183356f42a7b\" target=\"_blank\" rel=\"noopener\">\n<button class=\"btn-cta\"><b>CREATE THIS INFOGRAPHIC TEMPLATE<\/b><\/button><\/a><\/center>&nbsp;\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Use contrast<\/strong><\/h3>\n\n\n\n<p>Most of the combos listed above are there because the colors are too similar, so if you&#8217;re really set on using, say, blue and purple in your design, be sure to use shades that are very different from one another.<\/p>\n\n\n\n<p>Take this template as an example. There&#8217;s enough contrast among the three columns and between the bar chart and the background that it&#8217;d easy for people with color vision deficiency to understand the chart:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/venngage.com\/templates\/infographics\/diabetes-statistics-292703b8-cef1-4187-ad07-a713962dbd08\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2022\/12\/Diabetes-Statistics.png\" alt=\"color blind design\" class=\"wp-image-65304\" width=\"700\" style=\"box-shadow: 0 1px 4px 0 rgb(0 0 0 \/ 10%), 0 0 6px 0 rgb(0 0 0 \/ 10%), 0 2px 2px -2px rgb(0 0 0 \/ 15%);\" srcset=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2022\/12\/Diabetes-Statistics.png 1056w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2022\/12\/Diabetes-Statistics-300x232.png 300w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2022\/12\/Diabetes-Statistics-1024x791.png 1024w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2022\/12\/Diabetes-Statistics-768x593.png 768w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2022\/12\/Diabetes-Statistics-730x564.png 730w\" sizes=\"(max-width: 1056px) 100vw, 1056px\" \/><\/a><\/figure><\/div>\n\n\n\n<center><a href=\"https:\/\/venngage.com\/templates\/infographics\/diabetes-statistics-292703b8-cef1-4187-ad07-a713962dbd08\" target=\"_blank\" rel=\"noopener\"><button class=\"btn-cta\"><b>CREATE THIS TEMPLATE<\/b><\/button><\/a><\/center>&nbsp;\n\n\n\n<p>The <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/\" target=\"_blank\" rel=\"noreferrer noopener\">WCAG 2.1<\/a> recommends&nbsp;<strong>a minimum color contrast ratio of 4.5:1<\/strong> to make sure text and interactive elements meet the needs of colorblind or visually impaired users.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Labels can help<\/strong><\/h3>\n\n\n\n<p>I&#8217;m not usually the one to call for more text on your designs, but labels are the exception. Say you have a bar graph with so many points that using different patterns to aid readers with CVD, consider whether you can label each bar, which will make your data unmistakable. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/venngage.com\/templates\/infographics\/computer-market-shares-and-sales-infographic-2a5e306e-5b32-4582-981d-7a8b28bcdfb8\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2022\/12\/Computer-Market-Shares-and-Sales-Infographic-Template.png\" alt=\"color blind design\" class=\"wp-image-65317\" width=\"700\" style=\"box-shadow: 0 1px 4px 0 rgb(0 0 0 \/ 10%), 0 0 6px 0 rgb(0 0 0 \/ 10%), 0 2px 2px -2px rgb(0 0 0 \/ 15%);\" srcset=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2022\/12\/Computer-Market-Shares-and-Sales-Infographic-Template.png 816w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2022\/12\/Computer-Market-Shares-and-Sales-Infographic-Template-232x300.png 232w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2022\/12\/Computer-Market-Shares-and-Sales-Infographic-Template-791x1024.png 791w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2022\/12\/Computer-Market-Shares-and-Sales-Infographic-Template-768x994.png 768w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2022\/12\/Computer-Market-Shares-and-Sales-Infographic-Template-730x945.png 730w\" sizes=\"(max-width: 816px) 100vw, 816px\" \/><\/a><\/figure><\/div>\n\n\n\n<center><a href=\"https:\/\/venngage.com\/templates\/infographics\/computer-market-shares-and-sales-infographic-2a5e306e-5b32-4582-981d-7a8b28bcdfb8\" target=\"_blank\" rel=\"noopener\"><button class=\"btn-cta\"><b>CREATE THIS INFOGRAPHIC TEMPLATE<\/b><\/button><\/a><\/center>&nbsp;\n\n\n\n<p><strong>Related: <a href=\"https:\/\/venngage.com\/blog\/ada-standards-for-accessible-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">ADA Standards for Accessible Design: How to Be Compliant<\/a><\/strong><\/p>\n\n\n\n<p><strong><a href=\"#toc\">Return to Table of Contents<\/a><\/strong> <\/p>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" id=\"FAQs\"><strong>Color blind design FAQs<\/strong><\/h2>\n\n\n\n<p>Do you have more questions about designing for people with color blindness? We&#8217;ve got answers.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"faq-question-1\"><strong>Which colors are color blind-friendly?<\/strong><\/h3>\n\n\n\n<p>While there aren&#8217;t really any colors that are totally color-blind friendly, palettes relying on blue may be the most color blind-friendly, as blue-yellow color blindness is pretty rare. Color blind design is more often about avoiding combinations that are difficult for people with color blindness, including red and green, green and brown, green and blue, blue and gray, blue and purple, green and gray, and black and gray.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"faq-question-2\"><strong>What colors do color blind people not see?<\/strong><\/h3>\n\n\n\n<p>Red-green color blindness is the most common type of color vision deficiency, though it&#8217;s not exactly right to say people with this type of impairment <em>can&#8217;t<\/em> see red or green. It&#8217;s more likely they have trouble telling one from the other.<\/p>\n\n\n\n<p><strong><a href=\"#toc\">Return to Table of Contents<\/a><\/strong><\/p>\n\n\n\n\n\n<h2 class=\"wp-block-heading\"><strong>In summary: Accessible design is truly the least you can do, and creating color blind-friendly materials can help you achieve accessibility for all<\/strong><\/h2>\n\n\n\n<p>Color blindness is far more common than the average person realizes, and many people with color vision deficiencies aren&#8217;t even aware of it. The good news is that many of the techniques that can help make your designs accessible to those with color blindness can also make them easier to understand for your entire audience.<\/p>\n\n\n\n<p>To make sure your designs are accessible, you can use the Venngage editor to check for accessibility. Simply choose a template tagged with &#8220;Accessible&#8221; and start using the accessible editor. It&#8217;s free to get started.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/infograph.venngage.com\/register\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/venngage-accessible-templates.png\" alt=\"Venngage accessible templates\" class=\"wp-image-65646\" width=\"800\" style=\"box-shadow: 0 1px 4px 0 rgb(0 0 0 \/ 10%), 0 0 6px 0 rgb(0 0 0 \/ 10%), 0 2px 2px -2px rgb(0 0 0 \/ 15%);\" srcset=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/venngage-accessible-templates.png 1842w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/venngage-accessible-templates-300x133.png 300w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/venngage-accessible-templates-1024x455.png 1024w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/venngage-accessible-templates-768x341.png 768w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/venngage-accessible-templates-1536x682.png 1536w, https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2023\/01\/venngage-accessible-templates-730x324.png 730w\" sizes=\"(max-width: 1842px) 100vw, 1842px\" \/><\/a><\/figure><\/div>\n\n\n\n<center><a href=\"https:\/\/infograph.venngage.com\/register\" target=\"_blank\" rel=\"noopener\"><button class=\"btn-cta\"><b>START CREATING FOR FREE<\/b><\/button><\/a><\/center>&nbsp;\n","protected":false},"excerpt":{"rendered":"<p>More than 360 million people in the world are color blind, with the condition being more prevalent in men than women \u2014 8% of men and 0.5% of women worldwide have color vision deficiency. Which means you&#8217;re risking alienating 360 million people \u2014 and your customers could be one of them \u2014 if you don&#8217;t [&hellip;]<\/p>\n","protected":false},"author":106,"featured_media":65309,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false},"categories":[492,187],"tags":[308],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v17.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"description\" content=\"Learn how you can convey meaning to your whole audience and create accessible designs from our in-depth color blind design guidelines.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/venngage.com\/blog\/color-blind-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Color Blind Design Guidelines: A Comprehensive Guide - Venngage\" \/>\n<meta property=\"og:description\" content=\"Learn how you can convey meaning to your whole audience and create accessible designs from our in-depth color blind design guidelines.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/venngage.com\/blog\/color-blind-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Venngage\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Venngage\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-13T19:17:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-03T08:53:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2022\/12\/Color_Blind_Design_Blog_Header.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"576\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@venngage\" \/>\n<meta name=\"twitter:site\" content=\"@venngage\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jennifer Gaskin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/venngage.com\/blog\/#website\",\"url\":\"https:\/\/venngage.com\/blog\/\",\"name\":\"Venngage\",\"description\":\"Learn to Communicate with Data\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/venngage.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/venngage.com\/blog\/color-blind-design\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2022\/12\/Color_Blind_Design_Blog_Header.png\",\"contentUrl\":\"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2022\/12\/Color_Blind_Design_Blog_Header.png\",\"width\":1024,\"height\":576},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/venngage.com\/blog\/color-blind-design\/#webpage\",\"url\":\"https:\/\/venngage.com\/blog\/color-blind-design\/\",\"name\":\"Color Blind Design Guidelines: A Comprehensive Guide - Venngage\",\"isPartOf\":{\"@id\":\"https:\/\/venngage.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/venngage.com\/blog\/color-blind-design\/#primaryimage\"},\"datePublished\":\"2023-01-13T19:17:56+00:00\",\"dateModified\":\"2025-12-03T08:53:41+00:00\",\"author\":{\"@id\":\"https:\/\/venngage.com\/blog\/#\/schema\/person\/9779e23b0b6e44ac850412c1513b52ba\"},\"description\":\"Learn how you can convey meaning to your whole audience and create accessible designs from our in-depth color blind design guidelines.\",\"breadcrumb\":{\"@id\":\"https:\/\/venngage.com\/blog\/color-blind-design\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/venngage.com\/blog\/color-blind-design\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/venngage.com\/blog\/color-blind-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/venngage.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Graphic Design\",\"item\":\"https:\/\/venngage.com\/blog\/category\/inspiration\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Color Blind Design Guidelines: How to Convey Meaning to Everyone [With Examples &#038; Templates]\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/venngage.com\/blog\/#\/schema\/person\/9779e23b0b6e44ac850412c1513b52ba\",\"name\":\"Jennifer Gaskin\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/venngage.com\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/56468fd08764a3f00fc8f0b38019650a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/56468fd08764a3f00fc8f0b38019650a?s=96&d=mm&r=g\",\"caption\":\"Jennifer Gaskin\"},\"description\":\"A veteran of newsrooms and agencies, Jennifer Gaskin is a writer, editor and designer who is the only living person not to have strong feelings on the Oxford comma. She's an award-winning practitioner of journalism and information design who spent the better part of a decade as the creative director of a digital marketing shop. As a writer, Jennifer contributes to a variety of publications while working with clients as well as taking on her own projects.\",\"url\":\"https:\/\/venngage.com\/blog\/author\/jennifergaskin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"description":"Learn how you can convey meaning to your whole audience and create accessible designs from our in-depth color blind design guidelines.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/venngage.com\/blog\/color-blind-design\/","og_locale":"en_US","og_type":"article","og_title":"Color Blind Design Guidelines: A Comprehensive Guide - Venngage","og_description":"Learn how you can convey meaning to your whole audience and create accessible designs from our in-depth color blind design guidelines.","og_url":"https:\/\/venngage.com\/blog\/color-blind-design\/","og_site_name":"Venngage","article_publisher":"https:\/\/www.facebook.com\/Venngage","article_published_time":"2023-01-13T19:17:56+00:00","article_modified_time":"2025-12-03T08:53:41+00:00","og_image":[{"width":1024,"height":576,"url":"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2022\/12\/Color_Blind_Design_Blog_Header.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_creator":"@venngage","twitter_site":"@venngage","twitter_misc":{"Written by":"Jennifer Gaskin","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/venngage.com\/blog\/#website","url":"https:\/\/venngage.com\/blog\/","name":"Venngage","description":"Learn to Communicate with Data","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/venngage.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/venngage.com\/blog\/color-blind-design\/#primaryimage","inLanguage":"en-US","url":"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2022\/12\/Color_Blind_Design_Blog_Header.png","contentUrl":"https:\/\/venngage-wordpress.s3.amazonaws.com\/uploads\/2022\/12\/Color_Blind_Design_Blog_Header.png","width":1024,"height":576},{"@type":"WebPage","@id":"https:\/\/venngage.com\/blog\/color-blind-design\/#webpage","url":"https:\/\/venngage.com\/blog\/color-blind-design\/","name":"Color Blind Design Guidelines: A Comprehensive Guide - Venngage","isPartOf":{"@id":"https:\/\/venngage.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/venngage.com\/blog\/color-blind-design\/#primaryimage"},"datePublished":"2023-01-13T19:17:56+00:00","dateModified":"2025-12-03T08:53:41+00:00","author":{"@id":"https:\/\/venngage.com\/blog\/#\/schema\/person\/9779e23b0b6e44ac850412c1513b52ba"},"description":"Learn how you can convey meaning to your whole audience and create accessible designs from our in-depth color blind design guidelines.","breadcrumb":{"@id":"https:\/\/venngage.com\/blog\/color-blind-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/venngage.com\/blog\/color-blind-design\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/venngage.com\/blog\/color-blind-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/venngage.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Graphic Design","item":"https:\/\/venngage.com\/blog\/category\/inspiration\/"},{"@type":"ListItem","position":3,"name":"Color Blind Design Guidelines: How to Convey Meaning to Everyone [With Examples &#038; Templates]"}]},{"@type":"Person","@id":"https:\/\/venngage.com\/blog\/#\/schema\/person\/9779e23b0b6e44ac850412c1513b52ba","name":"Jennifer Gaskin","image":{"@type":"ImageObject","@id":"https:\/\/venngage.com\/blog\/#personlogo","inLanguage":"en-US","url":"https:\/\/secure.gravatar.com\/avatar\/56468fd08764a3f00fc8f0b38019650a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/56468fd08764a3f00fc8f0b38019650a?s=96&d=mm&r=g","caption":"Jennifer Gaskin"},"description":"A veteran of newsrooms and agencies, Jennifer Gaskin is a writer, editor and designer who is the only living person not to have strong feelings on the Oxford comma. She's an award-winning practitioner of journalism and information design who spent the better part of a decade as the creative director of a digital marketing shop. As a writer, Jennifer contributes to a variety of publications while working with clients as well as taking on her own projects.","url":"https:\/\/venngage.com\/blog\/author\/jennifergaskin\/"}]}},"_links":{"self":[{"href":"https:\/\/venngage.com\/blog\/wp-json\/wp\/v2\/posts\/65276"}],"collection":[{"href":"https:\/\/venngage.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/venngage.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/venngage.com\/blog\/wp-json\/wp\/v2\/users\/106"}],"replies":[{"embeddable":true,"href":"https:\/\/venngage.com\/blog\/wp-json\/wp\/v2\/comments?post=65276"}],"version-history":[{"count":30,"href":"https:\/\/venngage.com\/blog\/wp-json\/wp\/v2\/posts\/65276\/revisions"}],"predecessor-version":[{"id":108755,"href":"https:\/\/venngage.com\/blog\/wp-json\/wp\/v2\/posts\/65276\/revisions\/108755"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/venngage.com\/blog\/wp-json\/wp\/v2\/media\/65309"}],"wp:attachment":[{"href":"https:\/\/venngage.com\/blog\/wp-json\/wp\/v2\/media?parent=65276"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/venngage.com\/blog\/wp-json\/wp\/v2\/categories?post=65276"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/venngage.com\/blog\/wp-json\/wp\/v2\/tags?post=65276"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}