Colour cards with the colours orange and purple.

Colours for Accessibility: A mini Case Study 1/2

This year a topic I would like to advocate for as a designer is the one of accessibility. I would like to share my experience in creating an accessible colour system for a service or product.

10 min readFeb 16, 2022

Currently, we find ourselves at a cross. Due to digitalization, there are a couple of things that have been happening in the market in the last few years. In 2020, 49 percent of German companies with 20 or more employees were taking certain products or services off the market as a result of digitalization, while 60 percent offered new products and services. Digital products and services are being created by new companies emerging in Germany. Established corporations must enter the digital era if they want to survive with the newer products/services. The Covid crisis acted as a tailwind for digital or internet-based business models.

Why am I bringing those details up? In my experience, designers could be working with older and newer brands; both with various levels of innovation. When building a digital product, one must keep into account the branding aspect. Whether it is an established brand or a completely new one, the psychology of colour needs to be used. It is a driving factor to build a brand’s visual identity and brand recognition. Furthermore, colours are important for marketing to position a brand. They increase brand recognition by up to 80 percent (see colour in branding).

I will show the process of setting up a colour system that is functional, contains patterns, and is as well accessible meeting double AA standards.

Initiating a colour palette

When initiating your colour palette (from scratch, no strings attached), there are various tools that can help speed up the process. I will list some examples below, but first, a quick run on the 4 types of colour palettes:

Complementary
There are colours that are opposite to each other in the colour wheel.

Monochromatic
They use different shades of the same colour. These are quite easy to make and are commonly used by many popular brands.

Triadic
They contain three main colours. These colour palettes are best for creating clearly visible contrast in designs.

Analogous
They consist of colours that are close to each other on the colour wheel. If you pick the main colour then the colours right next to it become secondary colours for this type of palette.

To get you started, here are 3 sources that can help you with inspiration:

As an example, I have taken the colours of Diconium to do a deep dive. They are working with a linea by hue colour palette. I took the orange and purple to be tested and expanded into a colour system.

Defining your colour palette

Whether you are working on something without previous history, or you need to create a system based on an existing palette. Prototype has a deeper explanation of the topic. The blog entry Basic UI Colour Guide by Designer Anna Molly expands on the foundation of Design Language. In short, you will need to set the following:

Primary Colour
This is the brand colour and essential set to your design. This colour is used most frequently across your app and components.

Secondary or Accent Colour
This colour brings emphasis to actions or certain information. Depending on how you choose to set up your colour system, an accent colour could also be within the family of your primary colour. A secondary colour will remain separate from the primary.

Semantic Colours
Semantic colours provide meaning as per their function. This is done based on the usage pattern of such said colour. These colours are used occasionally to set an intention. Warning, success, error, and information are patterns in semantic colours.

Neutral
These colours are used for text, shapes, borders, and system icons. (Black, White, Greys)

Data
These colours will help you visualize data, usually, sets of 10–20 colours will help with the task.

Expanding your colour palette

Once you have found your initial colour palette, the next step would be creating a system. This is how you expand and test whether your initial options have legs to stand on.

The following tools will help you expand your palette:

When this is not enough, getstarl.co has a large collection of resources to create your colour combos.

To develop a system around the colour palette you have at hand, create a sequential scale. Sequential scales offer an array of shades by expanding from darkest to lightest. They have the base colour somewhere in the middle. Your initial colours (primary, secondary, semantic) become the base within their respective spectrum. Each base colour needs to generate a sequential scale. They should match in hue, lightness, and saturation.

Sequential palette

The base colour will expand in various shades either in lightness or darkness. The base colour starts at 500. From there, you have steps going up or down. Depending on how you choose to set up, you will end up with 10–12 steps.

*Base-Colour* 500 — ie. Purple-500 (#8502FF) will increase and decrease with a respective ratio to achieve its lightest and darkest form. These steps are then labelled from 100 until reaching 900 in 100 increments. These numbers are the relative lightness/darkness or hue of the colour. One can have extra lighter shades if needed, then the lower number can go to -75 & -50. The percentage of lightness within the light colours will have to be greater. This will allow contrast between the lighter forms.

Colour System

Once you have defined your sequential palette for the primary colour it is time to define the usage. Each tone will have specific values for communication purposes within the colour system. These colours show a certain action or behaviour as they serve as visual cues to the user. They become patterns used across any interactive elements you will create. These visual cues can be states within your elements. To define the purpose of each colour, you will have to make sure each has a distinct affordance. The following are some examples of the most common states:

Default
This is your 500 level. In some cases, 600 could also be your default level.

Hover
This state needs to have a difference against your default state. Going 2 steps darker will help you achieve more contrast for this visual cue.

Pressed
This state doesn’t have to be so prominent as the hover. Pressed states show on click and serve as a transition between your default mode and hover. The colour has to be somewhere between your default and hover.

Focus
The focus state needs to stand out as this works as a visual cue for those navigating with a keyboard or voice. The Focus state should have a high emphasis, this is because this state has no other visual cues. A level up from your default state will serve the purpose.

Accent
This colour is used for very few elements/instances. This colour also serves as your base colour when creating a dark mode. A level 200 will have a high contrast to differentiate it from your default state.

Light Mode vs Dark Mode

After you have defined your sequential palette for the default mode, tested it and are content with the results, you can start setting up your dark mode.

The system on dark mode in comparison to the default mode shift towards the light tones. Their function should mimic the importance, ie. the focus state should have the most contrast for accessibility in comparison to a hover or pressed state. Prototyper’s ultimate guide on how to set up a colour palette for dark themes goes in-depth on the topic. It focuses on Android app design.

Colour System

In the initial default palette, level 200 becomes the base within the dark mode. The level 500 of your default theme becomes the accent colour in the dark theme. Or, if you have a secondary colour palette, your accent colour will be level 200.

The accent within the dark theme can be used for certain elements/interactions, such as a FAB button. It is not recommended to use this colour in more than a couple of instances. The light and desaturated colours should be the ones used within the dark theme.

It could be that your colours don’t quite work against the dark background due to their saturation level. Using desaturated colours will allow more contrast. This is because they are more luminous against the dark backgrounds.

Why are desaturated colours necessary? That’s because saturated colours fail WCAG’s accessibility standards. They don’t reach the 4.5:1 for body text against dark surfaces.

Tokens & Taxonomy

Using tokens will help you to allocate values based on the purpose of the colour. There are many ways to set up the use of tokens. The way you handle it will depend on the product you are working on, and the language your team uses. Within my series of setting up your design system, you will find more information on tokens. Additionally, 8shapes’ article provides a deep dive on the topic of tokens.

Example of a colour system in Light Mode.

When naming your colours you can think of the following naming patterns:

Base

Composed of category and property. They are the foundation, that combined can form an element ie. colour + concept (action) + property (size).

Category: Colour is a category (at the same level of typography and space).
Property: Categories can be pared with properties. Ie. The colour of text, background. or border.
Concept: This is the way in which colours can be grouped. Such as semantic colours: The patterns of success, warning, error, and information.

Modifiers

Modifier levels refer to one or more variants (primary), state (hover), scale (100), and mode (on-dark). The following fall under modifiers:

Variant: .ie Primary, Secondary, Success, Error, New, Sale etc.
State: Hover, Pressed, Focus, Visited, etc.
Scale: In the case of the colour it will depend on your lightness scale naming convention.
Mode: Dark or Light Truncated: On-Light, On-Dark (used to avoid assumptions)

Looking at various design systems, there is no one right way on naming your tokens. This will depend on your product and the language used within your team. Asana’s Design System use of tokens divides them as follow:

Sentiment: Default, Success, Warning, Danger, Upsell etc. In their product, there is a strong correlation between their product and the hue of the colour. Ie. Default is a neutral palette.
Usage: background, text icon, border
Prominence: default, weak, medium, strong
Interaction: default, hover, active, disabled etc.

As a result, all these are combined to make their tokens. Ie. a button could be ‘selected-text-default-hover’. To learn about Asana’s handling of tokens in a colour-driven design system, watch their video Design Tokens on Asana’s Design Systems.

Example of a colour system in Dark Mode.

Conclusion

Colours within a Design System become an extension of a brand’s style guide. The style guide (or CI) informs about the overarching visual identity of a service or product. These guides do not always go in-depth about the usage of colours within the digital realm. As well, many of these style guides had a different intent when created.

In the past, the focus of branding was often based on print, TV, and advertising purposes. These days the digital field is a very strong touchpoint. Brands should not compromise nor neglect colour usage in the digital form. But why are colours so important in the digital world? That is because they provide a design language. The use of colours is key to those using a product or service. Colours serve as communication patterns. Furthermore, they need to have visual accessibility. This is how they provide a user experience that is welcoming to everyone.

So far, I have been able to expand on the colour palette using the primary colours of Diconium as an example. In the following post on the accessibility part of this deep dive, you will find out why I chose the colour purple.