This makes it easy to immediately tell regular text and anchor text apart. Someone with monochromacy wouldn’t be able to differentiate between text and anchor text at all and would have to hover over the text to see if it their cursor changes to a pointer.įor this reason, it’s a good idea to add an underline to text links. While it may be possible for someone with deuteranomaly, protanopia, or tritanopia to distinguish anchor text from regular text, it’s certainly not ideal due to the low contrast ratio. #4: Underline linksĪ lot of the time we use font color or font weight to denote links. For example, white, off-white, and light grey are often difficult to differentiate between on monitors. Depending on the type of color blindness, users might find it difficult to differentiate between different colors (or shades) without some sort of descriptive text.įor example, without the descriptive text label on Amazon, color blind users wouldn’t be able to tell a red shirt apart from an orange or green one.Īdding text labels to color filters improves accessibility for people with normal vision, as well. #3: Use text labelsĪdding text labels to color filters and swatches improves accessibility for color blind users. Using icons and symbols in forms to let the user know that they’ve made an error improves accessibility and helps them correct their mistake faster. Here’s a look at Facebook’s sign up form with symbols and error messages attached: If the form relied on color alone to let users know they had made a mistake on a particular field, it might look something like this for a red-blind (protanopia) user: Let’s take a look at Facebook’s sign up form for example. You shouldn’t rely solely on color to communicate errors or convey information through your UI. Here’s what it would look like if you labeled each segment instead of using patterns: Let’s take a look at how a color blind person with tritanopia might see a blue-green bar graph versus how they’d see the same graph with patterns and textures. Add text labels to segments to make them even easier to understand.Use patterns and textures to make it easy for users to differentiate different segments.Choosing colors that have a low contrast ratio can make your chart difficult to interpret for color blind users. #1: Use patterns and texturesĬolor differences are incredibly important with data visualization e.g., graphs and pie charts. Here, we’ll take a look at some of the ways you can design a more accessible UI keeping color blind users in mind. While you might think that your website’s aesthetic appeal might suffer if you design for accessibility, that’s certainly not the case. 7 Ways you can improve color accessibility for color blind usersĭesign elements and techniques that improve color accessibility for color blind users are generally considered to be good design practices. You can use the Coblis Color Blindness Simulator to see what your site looks like to color blind users. What this means from a design standpoint is that relying on color alone for readability and affordance would make your website difficult to use for someone who is color blind. Similarly, to people with red color blindness (protanopia), all red colors look dull. People with red-green color blindness (deuteranopia) have difficulty distinguishing between red and green. There are different types of color blindness deuteranopia and protanopia color blindness are the most common. Although color blind people can see things just as clearly as everyone else, they aren’t able to fully discern red, green or blue light. Color blindness in a digital worldĪccording to studies, approximately 1 in every 12 men (and 1 in every 200 women) are color blind. With this in mind, in this article, we’ll share some tips on how you can improve your site’s accessibility and the experience it delivers for color blind people. While the science behind color blindness is pretty complex, the gist of it is that color blind people have difficulty seeing color clearly or differentiating between some colors. So, how do you design effective, accessible, and aesthetically pleasing interfaces for color blind users? When done right, it improves user experience, influences purchasing decisions, and reflects the brands voice. Color plays an integral role in UI design.
0 Comments
Leave a Reply. |