#1 - Accessible Style Guide | Colors - Know the 3 main mistakes and how to fix them

When we talk about accessibility, everyone who works as a designer loves to speak about colors. But, ironically, only few understand how to make them really accessible.

In this video, I’ll list some important points to work with colors in an accessible way, and also, I’ll provide some tips to avoid common mistakes which happens as the team grows and to scale the product.

〰️

➽ Support material:

We wrote an article on Medium, with a deep dive about the topics on this video. Reach it out at: https://bit.ly/accessibility4devs-support-material-colors

〰️

➽ Video Description:

The background looks like paper. Throughout the narrative, there are some animated texts and images, which gives visual aid to the speech. Besides that, there are some phrases in the video, named as “Mari’s tips”. Not all were mentioned in the audio, because the video would be too long. Given that, I will list all the tips:

- To avoid implementation remember to document all the tested and approved combinations.

- Did you see how hard it is to notice the difference only using colors? This impairs the experience for people with Achromatopsia and people with cognitive disabilities… I use the Colorblindly to make this test (link in the description). At this moment, there are some images comparing the normal visualization and greyscale for a tab component, using only colors and another color + underscore.

- Designing digital products, it’s not a fashion show to come up with the weirdest stuff! The interface must be simple and easy to use, like your working from home clothes! If you want to put out your artistic vein, look for a hobby instead. Aside from this, there is a photo of an extravagant model and the phrase: “No one uses this in the workdays”!

- Before creating thousands of internal configurations, do the basics and do it well done! Make sure all options the person has set in the device or browser are working correctly. More details in the support material.

〰️

➽ Tools to help in the color accessibility tests:

⒈ Colorblindly link, plugin to test interfaces in grayscale: https://chrome.google.com/webstore/detail/colorblindly/floniaahmccleoclneebhhmnjgdfijgg

⒉ Webhelp: Plugin to help the page customizations:: https://chrome.google.com/webstore/detail/webhelp/pjnhjelpkdoihfjeeemmahpdbmgliboo

⒊ Adobe Color: To test the color contrast: https://color.adobe.com/pt/create/color-contrast-analyzer

⒋ Stark: Figma’s plugin to test the color contrast: https://www.figma.com/community/plugin/732603254453395948/Stark

⒌ Lighthouse: Chrome Plugin to validate the accessibility basics: https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk

⒍ Storybook, Tool to document components which have an embedded validator: https://storybook.js.org/

〰️

➽ Recommendations related to colors:

WCAG, Understanding Success Criterion 1.4.1: Use of Color:

https://www.w3.org/WAI/WCAG21/Understanding/use-of-color

WCAG, Understanding Success Criterion 1.4.3: Contrast (Minimum): https://www.w3.org/WAI/WCAG21/Understanding/use-of-color

WCAG, Understanding Success Criterion 1.4.6: Contrast (Enhanced):

https://www.w3.org/WAI/WCAG21/Understanding/contrast-enhanced

GAIA, Recommendation 1 - Visual and Textual vocabulary:

http://talitapagani.com/gaia/g1-recomendacao-1/

Gaia, Recommendation 5  - Customization:

http://talitapagani.com/gaia/g2-recomendacao-5/

〰️

➽ Homework:

Review the screens of your last project and look for errors related to the color accessibility, and fix at least one of them.

Feel free to reproduce this video in an office meeting to kickstart a discussion about this theme today.

〰️

Thanks for watching. I hope this video was useful for you!