Amirah Chamble
UX Design System Engineer

Blog

Where I share my design thoughts and discoveries with the rest of the world.

 
 

My Design Blog

Where I share my design thoughts and discoveries with the rest of the world.

 
 

Designing with the color-blind in mind

Designing with the color-blind in mind

Amirah Chamble

contrast.png

All responsible designers should strive to create experiences that can be enjoyed by as many people as possible without regard to ableness.

With that being said our design decisions should take into consideration users that are color blind or suffering from low vision by using good contrast between foreground text and background elements. 


Also, as a side note, colors are not an end-all solution for conveying information to users or indicate CTA’s (Call To Actions) in any design. Remember you always have icons and other indicators, like animations at your disposal. However, that’s not the focus of this post; we’re here to talk about color and contrast, so onward!

Color Contrast & Color-blindness

“Over-reliance on color codes in design presents a problem for users who experience color-blindness, as they may not be able to distinguish between the color of foreground text and the background if there is not enough adequate contrast.” I’m just paraphrasing myself because I want to drive this message home.

1 in 12 men (8%) and 1 in 200 women in the world suffer from color vision deficiency, also known as CVD or color-blindness. That’s 4.5% of the world's population who will perceive the content designers and developers generate differently than those of us with normal vision, and because of this, we designers must keep things like color contrast in mind when designing content that is meant to be readable for all users

Forms of Color-blindness.png

Using Enough Color Contrast? 

That depends on what colors you’re using and how seriously you plan taking individuals who have color-blindness into consideration into your design. A Nice person takes them strongly into consideration, a not so nice person doesn’t. 

 The Web Content Accessibility Guidelines (WCAG) 2.0 is set by the World Wide Web Consortium’s (W3C) Web Accessibility Initiative (WAI), which has also defined multiple levels of conformity for accessibility standards with A being the lowest, AA being mid-tier, and AAA being the highest level of conformance. We as designers should always endeavor to put our best work forward, which is why I will only be discussing Color Contrast Ratio requirements and how to measure them for levels AA and AAA.

With that being said all designers should know that there are many forms of color-blindness depending on one’s genetics or how it was acquired. The best way to solve for any design problem is to design inclusively; design for the edge case of color-blindness in order to address issues for all color-blind users. Achromatopsia, also referred to as Monochromacy or “total color blindness” should be your edge case when considering color-blind users any design, and all you have to do is make sure you’re using enough contrast in your work so color-blind users can distinguish between different elements.

When testing color palette combinations, it’s good to note that meeting AA requirements for Color Contrast Ratio this does not mean your color pairing is necessarily servicing all individuals who have color-blindness. For example, you could choose a color pairing that works for individuals who have Red-Green color-blindness, but not Blue-Yellow or Total color-blindness, which meeting AAA requirements better helps in supporting those individuals. Some Color Contrast tools will tell you what groups of people in the color-blind community your color pairing is not servicing when it comes to readability.

Color Contrast Ratios

Without going into too much detail for this blog post here’s the rule of thumb. The higher the level of contrast ratio you can achieve with your desired colors, the better and more readable your content becomes for those who have color-blindness.

The Ratio Maths

Calculating Color Contrast Ratio.png

Contrast Ratio = ( x + 0.05 ) / ( y + 0.05 ), where ‘x’ is the brightness of the lighter color and ‘y’ is the brightness of the darker color, with ratios written between 1:1 and 21: 1

Mid Level Contrast Standards (AA)

  • Text on colored backgrounds and images should have a contrast ratio of at least 4.5:1 ( this is especially for text below 18pts as they may not be readable for some users)

  • Large text on colored backgrounds and images should have a contrast ratio of at least 3:1

High-Level Contrast Standards (AAA)

  • Text on colored backgrounds and images should have a contrast ratio of at least 7:1

  • Large text on colored backgrounds and images should have a contrast ratio of at least 4.5:1

How To Measure Your Own Contrast Ratios

There’s an app for that. The Internet as a plethora of safe and friendly tools/resources that will help you check and see if the content your designing is accessible for all users.

Online Tools

Browser Addons & Extensions

Software

  • Color Oracle  [Free, color blindness simulator]

  • Stark [Sketch, Figma, and Adobe Plug-in with free and paid options]

Some Suggested Light Reading

References

  1. “Inclusive Design”, Microsoft. Accessed October 13, 2019. https://www.microsoft.com/design/inclusive/

  2. “Web Content Accessibility Guidelines (WCAG) 2.0”, Last modified December 11, 2008. Accessed October 13, 2019. https://www.w3.org/TR/WCAG20/

  3. Baker, Justin. The Science of Color Contrast - An Expert Designer’s Guide (blog). June 25, 2018. Accessed October 13, 2019. https://medium.muz.li/the-science-of-color-contrast-an-expert-designers-guide-33e84c41d156

  4. Noone, Cat. Cat Noone on designing for accessibility and inclusion (blog). November 26, 2019. Accessed October 10, 2019. https://www.invisionapp.com/inside-design/cat-noone-accessibility-inclusion/

  5. Reyna, Justin. A guide to color accessibility in product design (blog). November 8, 2018. Accessed October 10, 2019. https://www.invisionapp.com/inside-design/color-accessibility-product-design/

  6. Shaw, Allison. Designing for inclusivity: How and why to get started (blog). November 5, 2018. Accessed October 10, 2019. https://www.invisionapp.com/inside-design/designing-for-inclusivity/

  7. Tuchkov, Ivan. Color blindness: how to design an accessible user interface (blog). August 22, 2018. Accessed October 11, 2019. https://uxdesign.cc/color-blindness-in-user-interfaces-66c27331b858

  8. van Beveren, Tom. Designing with the colorblind in mind will improve your design for everyone (blog). December 3, 2018. Accessed October 12, 2019. https://www.invisionapp.com/inside-design/designing-for-colorblind-improves-design/

DesignAmirah ChambleUX, color-blindness, Design, ContrastComment