Colors accessibility — Know the top 3 problems and how to fix them…
Written by: Marília Gabriele Suzart
Translated by: Diego Duarte
When we talk about accessibility, everyone who works as a Designer likes to talk about colors. But, ironically, few of them understands how to make them really accessible.
It’s a common mistake that accessibility of colors are only intended to colorblind people. The WCAG criteria associated to the colors, are also, fundamental for the people with Cognitive or Learning disabilities.
The misuse of the colors can impair the comprehension of people with Cognitive or Learning disabilities, and become stressful and uncomfortable.
On this article, I’ll tell you a little about my experience working with product teams, what were my main mistakes related to the colors, the learnings and how to work along with colors.
This is intended to be a support material of our YouTube video about the colors:
Tip: This video is short and didactic, ideal for playing in a meeting. You can use it to start a conversation with the Design and Branding teams.
The top 3 mistakes
They are from my experience in product teams, where I acted as an accessibility “ambassadress”.
➀ Set a color palete based on a minimum contrast checking of 3:1
In 2020, I was working as a developer in a Foodtech. And someday I was studying about the colors and made some contrast checks. That’s when I realized the primary color of the website had a contrast checking of 3.37:1. I chatted with the team designer and I let him now which that color wasn’t accessible for small font texts. He told me that around three months ago, he did a analysis of the colors e done all the contrast checkings, but he decided to move further with this color thinking about using it only on large font texts, as titles, graphic components. However, he forgot about it and used this color for everything over the page. After that, we replaced the color on every place.
➁ Make the contrast checking only with a white background
In 2021, I started as a volunteer at a NGO and of the very first things we made was to check the colors. To avoid the same mistake as the case 1, we’ve settled the minimum contrast of 4.5:1 and we built a wonderful color palete, at least that was we thought. The time has passed, some changes in the team happened, the product evolved… When I got the prototypes, I found many accessibility issues on the contrast. We had pink cards with gray text, the text had an opacity which made ir clearer. We had screens with black background and purple text and also, low contrast ratio. The design team had to change many things in the prototype before deploying it to the development.
➂ Use the color as the only one source of truth
Over 2 years of experience with accessibility, no one absolutely knew about the importance to use other elements as a visual aid, besides the color. We had to dispatch a lot of reviews to fix this.
Working with the color accessibility
Now, I’m going to explain quickly some basic premises I have to work with color accessibility.
Use the minimum contrast as 4.5:1 as a base.
Make a color palette, where all the combinations should be with the minimum contrast of 4.5:1 (or, 4 dot 5 to 1). With that, we’ll increase our audience, because more people will have access to the page content, and we’ll meet the WCAG conformity level AA (double A) for every font.
There are a lot of tools to test the color contrast. For example, the Adobe Color, the Figma Stark plugin. The Lighthouse plugin for Google Chrome makes lots of basic accessibility validations. And, we have also the Storybook, which serves to document the Design System and enters in some accessibility validations.
Give a try and pick up one which is best for your work routine. Here we have a contrast test on Adobe Color:
WCAG, success criterion 1.4.3 Contrast (Minimum) (Level AA): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1
GAIA, Recommendation 1 — Visual and Textual Vocabulary (link in Portuguese only): The background color must be different enough from the forefront object color and have a proper contrast. Prefer clearer colors for backgrounds or white to highlight foreground objects or texts.
Register and document all the tested and approved combinations
When we are developing the Style Guide, we should mind that many people in a team shall use this documentation as a reference, and during the project evolution, many information can be lost.
To assure that any team fellow, even the future hirings, know which combinations are accessible, make sure that everything will be very well documented! The image below illustrates the documentation of a color made by a designer from my team, after our talks about color accessibility.
Be aware it’s impossible for only one color to match all the needs of the background colors. Do a contrast test, make the so needed adjustments and document all the combinations which are necessary for the product.
In addition of colors, use other elements to give information
Colors are important, but can’t be the only one way to highlight component states on your screen. We need to think about the people who only sees in grayscale and with cognitive difficulties.
Get to know how it’s frustrating for a user with Acromatopsia to break this barrier when navigating through digital products and how the solution is VERY simple. As she said: “A simple underscore would be enough”. Watch the TikTok of Jess Fontoura when using the Amazon Prime Video:
In order to test the grayscale, I use the plugin Colorblindly. I enable the mode Monocromacy / Achromatopsia and check the screens verifying if its possible to differentiate the component states, such as selected, checked, unchecked, enabled, disabled and also the error feedbacks and alerts. Example:
It’s also possible to directly test it on iPhone, going to the “color filters” options. The path is:Accessibility > Display & Text Size > Color Filters > Greyscale.
WCAG, success criterion 1.4.1 Use of Color (Level A): Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
GAIA, Recomendation 1 — Visual and Textual vocabulary: Colors shouldn’t be the only way to convey content.
Provide ways to customize colors
Most devices provide options for the device customization to the user. Before starting a new internal setup to choose the color palete, do the drill, make sure every pre-selected setting in the device are being respected and working as expected.
Some settings on mobile phones related to colors are: Reduce transparency, increase contrast, differentiate.
A good start point is to develop the screens for the dark and light mode, and make sure that every plugin on the page is working just fine.
To the the customization, I use the a Chrome plugin called WebHelp, which aside the text and background color customization, it also sets the font style, line spacing, paragraph spacing, text align and some others.
Tip to devs: Avoid using
!importanton CSS, because it affects the customization on some CSS plugins.
Gaia, Recomendation 5 — Customize: Allow color schema changes in the page by the user, including a high contrast mode.
Reduce the cognitive effort
Some very common concepts, but no less important: Try to keep a consistency of colors, for example, keep all links with the same color. Use intuitive colors, for example red for error, green for success, and so on.
GAIA, Recomendation 1 — Visual and Textual vocabulary: You an use colors to differentiate pages in a site and match similar contents
Thanks for reading so far. I hope this article is useful to you ☺
