How we use colour in the design of a website can lead to accessibility problems. Although these seem easy to fix in principle, they can involve a lot of work if they were not taken into account from the very beginning of the design process.
There are two aspects that are most important when evaluating whether we have issues with colour: contrast and the use of colour.
Contrast
This is the most frequent issue, and we can find websites where almost no page is free of this type of problem.
The principle is very simple: the contrast between the text and the background must be at least 4.5:1 for body text, or 3:1 for large text (generally 18pt or larger, or 14pt or larger if bold, or equivalent sizes for Chinese, Korean, and Japanese alphabets) for Level AA, and 7:1 and 4.5:1 respectively for Level AAA.
It sounds as though choosing suitable colours for the design would be enough, but that is not always so straightforward.
The easiest problem to solve is to stop trying to hide or disguise certain parts of the content. For example, with legally required text or confirmations for accepting terms and conditions. We create an entire design thinking about what we want to communicate and we might fall into the temptation of using a less prominent colour for the parts we feel do not fit the general tone of our site.
If we do that, we are not removing the content or the obligation to have it; we are simply making it harder to read for aesthetic reasons. However, we must be capable of designing websites that are both visually appealing and functional at the same time.
Another problem that frequently occurs is that corporate or brand colours do not have good contrast. For instance, when we adapt colours from a brand that was designed for print to a screen, the colours are not always suitable. Print colours are subtractive, meaning that mixing colours results in a darker outcome, whereas screen colours are additive, and the opposite occurs. This is why trying to copy a colour exactly onto a screen does not always work, even if it does on paper. This error is easy to correct at a technical level, but it requires more work from a design perspective.
Use of colour
In addition to using colours with good contrast, we cannot use colour to convey information or distinguish elements.
For example, in a form. Marking a field in red if there is an error is fine, because we point out the error where it occurs, but we cannot use that red as the sole indication of the error. We must use text or other visual elements to indicate it.
Or if we have a list of options, indicating which ones are selected only with a change in background colour is not enough. We must use elements such as additional icons (for example) to be able to distinguish it even if we cannot perceive colour.
This rule is often a bit harder to understand because, sometimes, a change or information through colour is visually very clear and easy to perceive, and it seems obvious. But some people cannot perceive colour, or they do so differently, so the interpretation of the use of colour is not always as obvious as it might seem to us.
Conclusion
The use of colour affects the accessibility of a website both through the qualities of the chosen colours and the intentionality of their use to display information. Solving this involves, at times, rethinking which colours we use and how; this can be a complex task. But in the end, we always achieve a better design, which is more useful and appropriate for a wider section of our audience.
Fran Rosa, Senior Developer & Advocate specializing in people-first development