July 21, 2016 Sid No Comments on UX Design for the Color-Blind
UX Design for the Color-Blind
Around one in 12 men and one in 200 women in the world are affected by color blindness. Color blindness makes people affected by it unable to fully ‘see’ some colors (usually reds, greens, and blues), get colors mixed up, and unable to differentiate between particular colors.
Color-blind people can experience difficulty in using a website, especially one that relies only on color for readability and affordance. Smashing Magazine’s Adam Silver provides tips on how to enhance a website’s UX design for color-blind users. These tips not only benefit the color-blind, but also people with normal vision – since the way we see colors are also affected by certain conditions in the environment such as low-quality monitors, screen glare, distance, bad lighting, and screen size.
Text readability is affected by the combination of text color and the background color, as well as the size of the text. According to WebAim Color Contrast Checker:
WCAG 2.0 level AA requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text. Level AAA requires a contrast ratio of 7:1 for normal text and 4.5:1 for large text. Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.
You can use the Color Contrast Checker to see if your preferred text and background color combination passes or fails the Web Content Accessibility Guidelines.
Typography and Overlays
Text overlaid on an image is a current design trend and mostly used on hero images. But when using this style, make sure to apply the correct contrast to make the text easier to read.
You can reduce the background opacity to increase the contrast of the image in relation to the text, or adjust the text to make it more legible.
Labels and Descriptions
When you own an online store that sells items available in different colors, such as clothing, it is better to accompany your color filters or pickers with descriptive text. This also helps people with normal vision, as some colors with shades that are not too far from each other are sometimes hard to differentiate on screen.
As for the description of the product itself, go for the specific description of the color, and avoid ambiguous descriptions such as “leaf” which comes in different colors of greens, yellows, and browns, and sometimes even reds.
Most websites rely on color to distinguish links. This can be difficult for a color-blind person who will have to resort to hovering their mouse on a text and seeing if the cursor will change to a pointer which means that the text is a link.
Best practice for easier link recognition is to use a hyperlinked icon or place them beside the hyperlinked text; this is common with social media and email links. For links within a body of text, best practice is to underline the links.
Success and error messages are often associated with the colors green and red, respectively. But despite this common practice, even people who don’t suffer color-blindness can get alert messages mixed up. Putting a prefix text such as “Success” and “Error” can help readability, as well as adding icons such as the check mark for success alerts and an exclamation point for error alerts.
Think about your existing or future website and consider Adam Silver’s tips as a checklist, alongside other website optimization dos and don’ts, to improve your website’s UI and UX as well as increase readership and sales. Furthermore, we at MicroCreatives are also open to all your queries on web design and web development and how we can help create and improve your website to work for a wider audience.