The importance of contrast in interface design

You know them very well; the ubiquitous grey buttons used all over the Web. Designers use them often as generic actionable elements, not because they want to confuse users, but because grey is a “neutral” colour. It stays indifferent to the context in which it is placed, and it does not attract unnecessary attention.

But as with many things, overuse of one colour can lead to problems with contrast. Google was notorious for this before Material Design became a thing. Their “perfect blue” could be found in everything, from buttons, to labels, links, ornaments, you name it.

It. Was. There.

Some of their interfaces became saturated with blue and grey to a point, where users couldn’t tell primary actions from secondary ones and begun having trouble interacting with Google’s software. An example of this was Gmail, and there was only one culprit at play:

The lack of contrast.

Anatomy of a button

The colour of a given button is just one thing, there is also the colour and prominence of its label or its border (if such exists). All of this as a composition is able to give people an impression of its state. When the contrast is clear, it’s also clear whether a given element is clickable, active, or disabled, and which type of action it signifies: primary or secondary.

If every button was to be blue when there is more than one action available, it would create confusion, because each action would now be visually equal. Once we add other UI elements that also use the same colour the eye gets accustomed to those elements and stops giving them the attention it was intended to give in the first place. This effect is what I like to call “element blindness”, because it can happen to any element, not only to a button.

It’s a similar story with every group of elements. Information architecture and prioritisation of elements based on user goals is the key to designing interfaces that are not just usable, but also achieve great performance user testing (people don’t have to actively look for cues, their eyes follow contrasting elements). This leads to great results in Click-Through-Rate (CTR) benchmarks, which in turn make marketing departments very happy.

Colour? What colour?

Colour isn’t the only tool we can use to achieve contrast in interface design. By definition, contrast means something that is strikingly different to something else, a juxtaposition, so it doesn’t have to be colour. In terms of accessibility, colour is actually a poor choice of a tool for designing with contrast in mind. People with vision deficiencies, such as colour blindness, have trouble perceiving colours as they were designed and this can impact their perception of contrast between colours of similar HSL properties (Hue, Saturation, Luminosity).

We can use a variety of tools other than colour at our disposal, to help people notice the differences between elements we lay out in our UIs. A quick reference list of properties we can differentiate elements with:

• weight , style, and size of the typeface (if used);
• border colour, its roundness and thickness;
• size, shape, and symmetry of shape;
• proximity to other elements;
• affordances (shadows, outlines, etc);
• movement/transitions;

You have an entire range of Gestalt principles at your disposal in addition to more conventional element styles, so use them wisely while not trying to rely on colour alone. This way, you’ll make sure to avoid most visual caveats.

How to test contrast in UI design?

There are several ways to do contrast testing. One of the most common practices is to desaturate your artboards and run them through a static heatmap generation tool. Such a tool will analyse your designs and point out the perceived hierarchy of your artboard’s information architecture, as it can simulate how human eyes react to differences in contrast.

Another way to validate contrast in your designs could be to run them through a quick user testing session, where the only objective would be to point out the most important element on the page, section, window, etc. Another version of this experiment could be a user flow scenario, where you observe subjects interacting with your desaturated UI.

You can do preliminary accessibility assessment using WCAG2.0 guidelines, and there are many browser extensions and plugins for major design apps that will help you incorporate those tests into your workflows. Accessibility testing should not be considered as an afterthought; make it an integral part of your daily workflow and you’ll make your audience very happy.

One important thing to keep in mind is that these are just guidelines and they don’t always work with branding, colour styles, etc, but are there to help you steer your designs in the right direction.

If your design works well greyed out, it’ll very likely perform well when you restore the saturation of colours, that’s why I consider it a good practice to create desaturated wireframes and test them early, before you apply visual styles.

Why are we even doing this?

Contrast is one of the basic states we use to make decisions about interacting with the world, and by extension with digital user interfaces. It’s especially important to people who experience temporary or permanent vision deficiencies, because they do not perceive colours the same way others do.

Without an appropriate level of contrast your audience will have difficulties with completing basic tasks, which will lead to mistakes, frustration, or even resentment towards the product they attempted to use.

While it’s hard to create an interface that will stay for a while on Dribbble’s Popular page, because it uses a matching bright colour palette, fancy typography and blending backgrounds (or superfluous transitions and animations), it’s even harder to create an interface that will be accessible for the variety of people with different backgrounds that visit our websites or use our apps every day.

---

How do you make sure your designs have enough contrast? What methodology or toolkit have you found to be working for you? HMU on Twitter.