Color Blindness Considerations for Designers and Content Managers

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
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)
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.

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.


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

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


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

Red box around placeholder text

Don’t use the following colors or color combinations

· Red on any dark color


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.



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
Sheri Byrne-Haber, CPACC

Sheri Byrne-Haber, CPACC

LinkedIn Top Voice for Social Impact 2022. UX Collective Author of the Year 2020. Disability Inclusion SME. Sr Staff Accessibility Architect @ VMware.