Andrée Lange has almost ten years of experience working as a digital designer at several agencies. At heart she is a true UX and visual designer. In recent years she has specialised in web accessibility. And more specific: in accessible design.
As designers we have a responsibility when it comes to designing an inclusive web experience for all people. One of the most important things to take into account when designing is colour contrast. Colour is an important part of design, but we have to remember that some people may not experience colour in the same way or even see colours at all. When you design your colour palette there are a few things to keep in mind. Let’s go through them.
Mistake #1: Using colour contrast that is too high
So you might think that the higher the contrast between colours, the better it is for your end user because it’s the most visible. But there can actually be a thing as too much contrast. This can cause a strain on the eyes because the colour contrast is too high. For example; when you use pure black #000000 text on a pure white #FFFFFF background.
How can you fix this? Try not to use colours that are too contrasting such as the given example. For instance, try to weaken the colour of the text a bit to make it less contrasting, but still contrasting enough. You can try to use a #282828 text on a off-white background #FBFBFB. For your design these changes might not mean much, but the colours are better to process for the eyes.
Mistake #2: Using 50 shades of grey
One of the most common mistakes is the use of a lot of shades of grey for UI interface elements. Though there is no limit in the amount of shades you can use, it might be hard to track if all your used colours have enough colour contrast.
If you use shades of grey for your UI elements, try to define some colours and describe when and how you can use them. For instance; which colours can you use for graphical elements, like the border of an input field. But also; which colours are suitable for text, for example a shade of grey which is used for a description text.
Mistake #3: Using colour to convey meaning
Another common mistake is that sometimes colour is used to convey meaning in design. For example; when designing form errors. A lot of times form errors are designed keeping only colour in mind. The designer has come up with a form error that only changes by colour, for instance by creating a red outline on the input field. Because colour isn’t experienced in the same way for a lot of users, the message of the form error can’t always be understood by everyone.
It’s better to create a form error not only with means of using a different colour, but also with a change of form. For example; create a changing outline of an input field that not only changes by colour, but also by thickness of the border. In this way you will incorporate form as well. And also don’t forget that an error message next to the field is mandatory as well! This also makes it easier for the user to understand what kind of error is happening. You can also make use of an icon to create extra emphasis on the changed input field to communicate to the user that something is happening with that specific input field.
Mistake #4: Thinking every colour has to pass the WCAG guidelines
Not everything has to pass the minimum colour contrast ratio requirement of 4.5:1. This is an AA requirement for normal text. However if you use large text, the area of the surface colour against the background colour is much larger which affects the minimum contrast ratio that is necessary. Keep this list in mind:
- Normal text up to 24 pixels, use 4.5:1
- Bold text which is at least 19 pixels or higher, use 3:1
- Normal text which is at least 24 pixels or higher, use: 3:1
- Icons and background, use: 3:1
- Border and form elements like checkboxes, radio buttons etc, use: 3:1
- Navigational components like arrows, use 3:1
Graphic components that are not meant to be understood by the user but are pure ornamental do not need to meet the colour contrast requirements.
Mistake #5: Not using sufficient colour contrast for placeholder text
It is easy to forget that elements in your design that disappear, such as placeholder text in an input field, need to comply with the colour contrast ratio standards as well. For placeholder text (which is usually smaller than 24 pixels) it is acceptable to use a minimum contrast ratio of 4.5:1
“The only real mistake is the one from which we learn nothing”
Henry Ford
Mistakes are easily made when you don’t think of your end user in the process of designing. But it is not hard to design with good colour contrast for accessibility in mind. Try to incorporate accessible colour in an early stage in your design. Want to learn how to do that? Check our Accessible Design, the basics course and learn how you can change your workflow to design a more accessible website!
