Color Blindness Considerations for Designers and Content Managers

I recently read a Medium article on negative space published by a top design agency. The article had 5000 claps, so it was widely read. Unfortunately, the article’s primary example of good use of dark negative space was completely inaccessible to people who are color blind.

Image for post
Image for post
Calendar app where background color is black and important actionable components are red. Good use of negative space, but red on black is almost invisible to people who are color blind
Image for post
Image for post
Calendar app where background color is black and important actionable components are red. This is what someone with the most common form of color blindness sees. (Coblis Color blindness simulation)
Image for post
Image for post
Paciello Group Colour Contrast Analyser results for the Calendar example above. For normal vision, the color choice barely passes at 3.1 (and even then only for large text) and fails across the board for the most common type of color blindness at 2.4

Run all templates in the style guide through a color blindness simulation

The corporate style guide is the bible for an app or website. The style guide may be what the people in branding want things to look like, but it might not be accessible to people with color related disabilities. A color blindness simulation on all style guide templates will demonstrate to a person with unimpaired vision what something looks like to a person who is color blind. If you don’t have a style guide, then you can do the same simulation on your comps.

Check what’s in production (currently) and re-check every time a content update is performed

It is important to review all final content and subsequent updates to see whether the relevant content is meeting the minimum color ratio requirements.

Image for post
Image for post
White text on light green background fails the WCAG color ratio minimums for all text sizes and compliance levels

Do a high contrast version of your site

While this is not required by WCAG, some websites have high contrast versions available. High contrast versions typically make sure that all meaningful text is on the highest contrast background possible. High contrast versions also frequently simplify the UI by removing content that is there for design purposes only, such as background images.

Never use color by itself to indicate importance or status

A few people who are color blind can’t see color at all. The most common form of color blindness interferes with the ability to see red and green which is important since it is the “stoplight” colors that are typically used to indicate OK (green) and Error (red). Augment color choices for importance and status by adding one of the following features.

Icon with Alt-text

The automotive emergency icon or a dark red X on a light background is good for indicating that something is an error, while a dark green checkmark on a light background is good for indicating that something has been successful.

Styling

Adding bold or underlined styling will help make red text stand out to people who can’t see red. Use semantic markup for styling so screen readers will call it out. The use of <b>, for example, is hidden to a screen reader user

Image for post
Image for post
4 lines each stating “emphasize this” with different forms of bold and underline styling

Box

A decorative box (make sure the alt is set to null) is one way to make text stand out

Image for post
Image for post
Red box around placeholder text

Don’t use the following colors or color combinations

· Red on any dark color

Conclusion

No one wakes up in the morning and says “I’m going to discriminate against someone today.” However, that is exactly what is happening by not reviewing text color as it appears to people with color blindness. Tell your potential colorblind and older customers that you are thinking about them by following some of the simple guidelines suggested in this article to make your content readable by everyone.

Written by

Blogger, disability advocate, nerd. Bringing the fire on ableism. A11y Architect @ VMware. Wheelchair user w/ a deaf daughter. CS, Law, and Business background

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store