{"id":297,"date":"2024-02-20T11:00:00","date_gmt":"2024-02-20T12:00:00","guid":{"rendered":"https:\/\/fdswebdesign.com\/?p=297"},"modified":"2024-10-15T23:26:47","modified_gmt":"2024-10-15T23:26:47","slug":"a-practical-guide-to-designing-for-colorblind-people","status":"publish","type":"post","link":"https:\/\/fdswebdesign.com\/index.php\/2024\/02\/20\/a-practical-guide-to-designing-for-colorblind-people\/","title":{"rendered":"A Practical Guide To Designing For Colorblind People"},"content":{"rendered":"<p>              <title>A Practical Guide To Designing For Colorblind People<\/title><\/p>\n<article>\n<header>\n<h1>A Practical Guide To Designing For Colorblind People<\/h1>\n<address>Vitaly Friedman<\/address>\n<p>                  2024-02-20T12:00:00+00:00<br \/>\n                  2024-10-15T23:05:45+00:00<br \/>\n                <\/header>\n<p>Too often, accessibility is seen as a checklist, but it\u2019s much more complex than that. We might be using a good contrast for our colors, but then, if these colors are <strong>perceived very differently<\/strong> by people, it can make interfaces extremely difficult to use.<\/p>\n<p>Depending on our color combinations, people with color weakness or who are colorblind won\u2019t be able to tell them apart. Here are <strong>key points for designing with colorblindness<\/strong> &mdash; for better and more reliable color choices.<\/p>\n<p>.course-intro{&#8211;shadow-color:206deg 31% 60%;background-color:#eaf6ff;border:1px solid #ecf4ff;box-shadow:0 .5px .6px hsl(var(&#8211;shadow-color) \/ .36),0 1.7px 1.9px -.8px hsl(var(&#8211;shadow-color) \/ .36),0 4.2px 4.7px -1.7px hsl(var(&#8211;shadow-color) \/ .36),.1px 10.3px 11.6px -2.5px hsl(var(&#8211;shadow-color) \/ .36);border-radius:11px;padding:1.35rem 1.65rem}@media (prefers-color-scheme:dark){.course-intro{&#8211;shadow-color:199deg 63% 6%;border-color:var(&#8211;block-separator-color,#244654);background-color:var(&#8211;accent-box-color,#19313c)}}<\/p>\n<p class=\"course-intro\">This article is <strong>part of our ongoing series<\/strong> on <a href=\"\/category\/design-patterns\">design patterns<\/a>. It\u2019s also a part of the video library on <a style=\"font-weight:700\" href=\"https:\/\/smart-interface-design-patterns.com\/\">Smart Interface Design Patterns<\/a>&nbsp;\ud83c\udf63 and is available in the <a href=\"https:\/\/smashingconf.com\/online-workshops\/workshops\/interface-design-course-vitaly-friedman-spring\/\">live UX training<\/a> as well.<\/p>\n<h2 id=\"colorweakness-and-colorblindness\">Colorweakness and Colorblindness<\/h2>\n<p>It\u2019s worth stating that, like any other disability, colorblind users are on the <strong>spectrum<\/strong>, as <a href=\"https:\/\/www.linkedin.com\/in\/belagaytan\/\">Bela Gayt\u00e1n<\/a> rightfully noted. Each experience is unique, and different people perceive colors differently. The grades of colorblindness <strong>vary significantly<\/strong>, so there is no consistent condition that would be the same for everyone.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/blog.datawrapper.de\/colorblindness-part1\/\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"405\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Different kinds of color weaknesses with the percentage of people having these anomalies.\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/designing-for-colorblindness\/1-color-weakness-statistics.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      <a href=\"https:\/\/blog.datawrapper.de\/colorblindness-part1\/\">Different people perceive colors differently<\/a>. Around 300 million people are affected by color weakness or colorblindness. (<a href=\"https:\/\/files.smashing.media\/articles\/designing-for-colorblindness\/1-color-weakness-statistics.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>When we speak about colors, we should distinguish between two different conditions that people might have. Some people experience <strong>deficiencies<\/strong> in <em>\u201ctranslating\u201d<\/em> light waves into red-ish, green-ish or blue-ish colors. If one of these translations is not working properly, a person is at least <em>colorweak<\/em>. If the translation doesn\u2019t work at all, a person is <em>colorblind<\/em>.<\/p>\n<p>Depending on the color combinations we use, people with color weakness or people who are colorblind won\u2019t be able to tell them apart. The most common use case is a red-\/green deficiency, which <strong>affects 8% of European men<\/strong> and <strong>0.5% of European women<\/strong>.<\/p>\n<p><em>Note<\/em>: the insights above come from \u201c<a href=\"https:\/\/blog.datawrapper.de\/colorblindness-part1\/\">How Your Colorblind And Colorweak Readers See Your Colors<\/a>,\u201d a wonderful three-part series by Lisa Charlotte Muth on how colorblind and color weak readers perceive colors, things to consider when visualizing data and <strong>what it\u2019s like to be colorblind<\/strong>.<\/p>\n<h2 id=\"design-guidelines-for-colorblindness\">Design Guidelines For Colorblindness<\/h2>\n<p>As <a href=\"https:\/\/www.linkedin.com\/in\/garethrobins\/\">Gareth Robins<\/a> has kindly noted, the safe option is to either give people a <strong>colorblind toggle with shapes<\/strong> or use a friendly ubiquitous palette like <a href=\"https:\/\/cran.r-project.org\/web\/packages\/viridis\/vignettes\/intro-to-viridis.html\">viridis<\/a>. Of course, we should never ever ask a colorblind person, \u201cWhat color is this?\u201d as they can\u2019t correctly answer that question.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/blog.datawrapper.de\/colorblindness-part1\/\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"452\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"How red- and green-blind people perceive pink, turquoise, and grey\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/designing-for-colorblindness\/2-red-and-green-blind-palettes.jpeg\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      For red- and green-blind people, red and green might look like grey. Designed by Lisa Charlotte Muth. (<a href=\"https:\/\/files.smashing.media\/articles\/designing-for-colorblindness\/2-red-and-green-blind-palettes.jpeg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>\u2705 <strong>Red-\/green deficiencies<\/strong> are more common in men.<br \/>\n\u2705 <strong>Use blue<\/strong> if you want users to perceive color as you do.<br \/>\n\u2705 Use any 2 colors as long as they <strong>vary by lightness<\/strong>.<br \/>\n\u2705 Colorblind users <strong>can tell red and green apart<\/strong>.<br \/>\n\u2705 Colorblind users <strong>can\u2019t tell dark green and brown apart<\/strong>.<br \/>\n\u2705 Colorblind users <strong>can\u2019t tell red and brown apart<\/strong>.<br \/>\n\u2705 The safest color palette is to <strong>mix blue with orange or red<\/strong>.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/blog.datawrapper.de\/colorblindness-part1\/\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"472\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"How red- and green-blind people perceive purple and blue\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/designing-for-colorblindness\/3-purple-blue-colorblindness.jpeg\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      For red- and green-blind people, red-purple looks like blue. Designed by Lisa Charlotte Muth. (<a href=\"https:\/\/files.smashing.media\/articles\/designing-for-colorblindness\/3-purple-blue-colorblindness.jpeg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>\ud83d\udeab <strong>Don\u2019t mix red, green and brown<\/strong> together.<br \/>\n\ud83d\udeab <strong>Don\u2019t mix pink, turquoise and grey<\/strong> together.<br \/>\n\ud83d\udeab <strong>Don\u2019t mix purple and blue<\/strong> together.<br \/>\n\ud83d\udeab Don\u2019t use green and pink if you use red and blue.<br \/>\n\ud83d\udeab Don\u2019t mix green with orange, red, or blue of the same lightness.<\/p>\n<h2 id=\"never-rely-on-colors-alone\">Never Rely On Colors Alone<\/h2>\n<p>It\u2019s worth noting that the safest bet is to <strong>never rely on colors alone<\/strong> to communicate data. Use labels, icons, shapes, rectangles, triangles, and stars to indicate differences and show relationships. Be careful when <strong>combining hues and patterns<\/strong>: patterns change how bright or dark colors will be perceived.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/www.whocanuse.com\/\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"633\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"WhoCanUse.com, showing how different people with visual impairments see the same color palette\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/designing-for-colorblindness\/4-whocanuse-tool.jpeg\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      <a href=\"https:\/\/www.whocanuse.com\/\">WhoCanUse?<\/a>, a fantastic little tool to quickly see how a color palette affects different people with visual impairments. (<a href=\"https:\/\/files.smashing.media\/articles\/designing-for-colorblindness\/4-whocanuse-tool.jpeg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p><a href=\"https:\/\/www.whocanuse.com\">Who Can Use?<\/a> is a fantastic little tool to quickly see how a color palette affects different people with visual impairments \u2014 from reduced sensitivity to red, to red\/green blindness to cataracts, glaucoma, low vision and even situational events such as direct sunlight and night shift mode.<\/p>\n<p><strong>Use lightness to build gradients<\/strong>, not just hue. Use different lightnesses in your gradients and color palettes so readers with a color vision deficiency will still be able to distinguish your colors. And most importantly, always include colorweak and colorblind people in usability testing.<\/p>\n<h3 id=\"useful-resources-on-colorblindness\">Useful Resources on Colorblindness<\/h3>\n<ul>\n<li>\u201c<a href=\"https:\/\/www.theverge.com\/23650428\/colorblindness-design-ui-accessibility-wordle\">How I Live With Color Blindness<\/a>,\u201d by Andy Baio<\/li>\n<li><a href=\"https:\/\/www.whocanuse.com\/\">Who Can Use This Color Combination?<\/a>, by Corey Ginnivan<\/li>\n<li><a href=\"https:\/\/colorblindaccessibilitymanifesto.com\/\">Colorblind Accessibility Manifesto<\/a>, by Federico Monaco <\/li>\n<li>\u201c<a href=\"https:\/\/medium.com\/queer-design-club\/going-beyond-color-9d3830559e10\">Designing for Colorblind Access<\/a>,\u201d by Alex Chen<\/li>\n<li>\u201c<a href=\"https:\/\/uxdesign.cc\/the-importance-of-colorblind-friendly-design-case-study-among-us-dcd042c87b9\">The UX of Among Us: The Importance of Colorblind-friendly Design<\/a>,\u201d by Unma Desai<\/li>\n<li>\u201c<a href=\"https:\/\/blog.datawrapper.de\/colors\/\">How To Choose Colors For Data Visualization<\/a>,\u201d by Lisa Charlotte Muth<\/li>\n<li>\u201c<a href=\"https:\/\/www.smashingmagazine.com\/2016\/06\/improving-ux-for-color-blind-users\/\">Improving The UX For Color-Blind Users<\/a>,\u201d by Adam Silver<\/li>\n<li>\u201c<a href=\"https:\/\/www.smashingmagazine.com\/2023\/06\/testing-sites-apps-blind-users-cheat-sheet\/\">How To Test With Blind Users: A Cheatsheet<\/a>,\u201d by Slava Shestopalov, Eugene Shykiriavyi<\/li>\n<\/ul>\n<h3 id=\"useful-colorblindness-tools\">Useful Colorblindness Tools<\/h3>\n<ul>\n<li><a href=\"https:\/\/www.color-blindness.com\/coblis-color-blindness-simulator\/\">Coblis, Color Blindness Simulator<\/a><\/li>\n<li><a href=\"https:\/\/www.toptal.com\/designers\/colorfilter\/\">Colorblindness Web Page Filters<\/a><\/li>\n<li><a href=\"https:\/\/www.figma.com\/community\/plugin\/733343906244951586\/Color-Blind\">Color Blindness Simulator Figma Plugin<\/a>, by Sam Mason de Caires<\/li>\n<li><a href=\"https:\/\/chrome.google.com\/webstore\/detail\/colorblindly\/floniaahmccleoclneebhhmnjgdfijgg\">Colorblindly Chrome Extension<\/a>, by Andrew Van Ness<\/li>\n<\/ul>\n<h2 id=\"meet-smart-interface-design-patterns\">Meet Smart Interface Design Patterns<\/h2>\n<p>If you are interested in similar insights around UX, take a look at <a href=\"https:\/\/smart-interface-design-patterns.com\/\"><strong>Smart Interface Design Patterns<\/strong><\/a>, our <strong>10h-video course<\/strong> with 100s of practical examples from real-life projects \u2014 with a <a href=\"https:\/\/smashingconf.com\/online-workshops\/workshops\/interface-design-course-vitaly-friedman-spring\/\">live UX training<\/a> starting March 7. Everything from mega-dropdowns to complex enterprise tables &mdash; with 5 new segments added every year. <a href=\"https:\/\/www.youtube.com\/watch?v=aSP5oR9g-ss\">Jump to a free preview<\/a>.<\/p>\n<figure style=\"margin-bottom: 0\"><a href=\"https:\/\/smart-interface-design-patterns.com\/\"><img loading=\"lazy\" decoding=\"async\" style=\"border-radius: 11px\" width=\"950\" height=\"492\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Smart Interface Design Patterns\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/archive.smashing.media\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7cc4e1de-6921-474e-a3fb-db4789fc13dd\/b4024b60-e627-177d-8bff-28441f810462.jpeg\"><\/a><figcaption class=\"op-vertical-bottom\">Meet <a href=\"https:\/\/smart-interface-design-patterns.com\/\">Smart Interface Design Patterns<\/a>, our video course on interface design &amp; UX.<\/figcaption><\/figure>\n<div class=\"btn--lined btn--lined--white-border\" style=\"margin-top: 0.75em;margin-bottom: 0.75em\"><a class=\"btn btn--large btn--green btn--text-shadow\" href=\"https:\/\/smart-interface-design-patterns.com\/\">Jump to the video course&nbsp;&rarr;<\/a><\/div>\n<\/p>\n<p class=\"ticket-price__desc\" style=\"font-size: .8em!important;text-align: center;line-height: 1.5;margin: 0\">100 design patterns &amp; real-life<br \/>\nexamples.<br \/>10h-video course + live UX training. <a href=\"https:\/\/www.youtube.com\/watch?v=aSP5oR9g-ss\">Free preview<\/a>.<\/p>\n<div class=\"signature\">\n  <img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Smashing Editorial\" width=\"35\" height=\"46\" loading=\"lazy\" class=\"lazyload\" data-src=\"https:\/\/www.smashingmagazine.com\/images\/logo\/logo--red.png\"><br \/>\n  <span>(yk)<\/span>\n<\/div>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>A Practical Guide To Designing For Colorblind People A Practical Guide To Designing For Colorblind People Vitaly Friedman 2024-02-20T12:00:00+00:00 2024-10-15T23:05:45+00:00 Too often, accessibility is seen as a checklist, but it\u2019s much more complex than that. We might be using a good contrast for our colors, but then, if these colors are perceived very differently by&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[],"class_list":["post-297","post","type-post","status-publish","format-standard","hentry","category-accessibility"],"_links":{"self":[{"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/posts\/297","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/comments?post=297"}],"version-history":[{"count":1,"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/posts\/297\/revisions"}],"predecessor-version":[{"id":298,"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/posts\/297\/revisions\/298"}],"wp:attachment":[{"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/media?parent=297"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/categories?post=297"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/tags?post=297"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}