In Nucleus, we are passionate about making our design system components as accessible as possible.

It is important to ensure that colour is used in a design system in a way that is accessible to people with visual impairments. This means considering the contrast between foreground and background colours, as well as the overall colour scheme of the design.

Here are a few tips we learnt as we designed and built our components for making sure that colours are used in an accessible way in your design system:

Use high-contrast colour combinations

There must be enough contrast between foreground and background colours to make text and other elements like icons legible and clear to the user. Use a colour contrast tool to help determine whether the contrast between two colours meets the minimum recommended level for accessibility.

A high contrast ratio keeps things legible. (Example uses Stark.)

Provide contrast in both colour and shape

Don't rely on colour alone for interactive elements and their different states – buttons, links, and other similar items should have enough contrast to be easily distinguishable from other elements on the page. In Nucleus we use a change in a border's thickness for the active state of a text inputter to help provide a change of form in this way.

Example showing a Nucleus component with a shape and colour change indicative of status.

Use a limited colour palette

It can help to ensure that colour is used consistently and in a way that is easy to understand. For people with visual impairments, it can help to reduce visual clutter and make it easier to navigate the interface.

Consider the needs of people with colour blindness

Colour blindness affects approximately 3 million people in the UK (according to Colour Blind Awareness), meaning they have difficulty distinguishing between certain colours, such as red and green.

You should consider these needs when choosing colours for a design system and test the design using a simulator. It is even better if you can test with people who have colour vision impairments to make sure that it works for them. Advantageously, one of our team members in Nucleus has deuteranomaly (a form of red-green colour blindness) and helps us test and identify potential issues.

Checking the British Gas website with simulated Protonopia effect - another form of red-green colourblindness.

Overall, we should consider the needs of all users, including those with visual impairments, when creating or applying a brand's colour scheme to a design system, even if that means trying to reach a compromise with other departments such as Brand or Marketing. The aim is to create a user interface that is accessible and easy to use for everyone.

How many people in the UK have some form of visual impairment?

According to statistics from the Royal National Institute of Blind People (RNIB), in the United Kingdom (UK), approximately 2 million people are living with sight loss, which is defined as a visual acuity of worse than 6/18 or a visual field of less than 20 degrees in the better eye. This represents approximately 3.3% of the UK population. When added to the 3 million people who are colour blind, that's a significant total of approximately 5 million people!

Consider the needs of people with other visual impairments, such as colour blindness or difficulty with contrast, as well as people with cognitive or developmental disabilities that may affect their ability to perceive and interpret colour. By designing for accessibility, you can create products and interfaces that are usable and accessible to a wide range of people.

What are the contrast ratio requirements of the WCAG?

The Web Content Accessibility Guidelines (WCAG) provide recommendations for making web content more accessible to people with disabilities. One of the recommendations is to ensure that the contrast between foreground and background colours meets a certain level, depending on the context and the importance of the information.

Choosing a brand's colours for inclusion in a design system could mean that the digital palette may need slight alterations to remain compliant and discussion may need to be held with the brand guardians to achieve agreement.

The WCAG provides recommendations for contrast ratio:

  • WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
  • WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders).
  • WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text. AAA is an ideal to strive for, whereas AA is the minimum level to remain compliant.

Large text is defined as 14 point (typically 18.66px) and bold, and 18 point (typically 24px) or larger in regular weight.

Comparison of a passing and failing colour contrast ratio.

It is important to note that these recommendations are for the main content of the page and do not apply to decorative elements or logos. In addition, these recommendations may not apply to certain situations, such as when the text is part of a logo or illustration. In these cases, the contrast ratio may be lower, as long as the text is still legible.

What tools are available to help you check colour contrast?

There are a number of colour contrast tools that can help you determine whether the contrast between two colours meets the minimum recommended level for accessibility. Some of these tools include:

WebAIM Color Contrast Checker

This is a free online tool that allows you to enter the foreground and background colours in a variety of formats (e.g., RGB, HEX, HSL) and determine the contrast ratio between the two colours.

webAIM Colour Contrast Checker

Color Contrast Analyzer (CCA)

This is a free tool developed by the Paciello Group that allows you to determine the contrast ratio between two colours by hovering over elements on a webpage or by selecting colours from a colour picker. The CCA is available as a browser extension for Chrome, Firefox, and Safari.

CCA - Chrome Extension

Stark

Partially free, with premium features to be paid for. A tool developed by Stark Co that allows you to test the contrast of colours on a webpage or within a design tool (e.g., Sketch, Adobe XD). Stark is available as a browser extension for Chrome and Firefox. It has some great additional features such as suggesting the next nearest colour matches that are compliant as well as a blurred vision simulator.

getstark.co

Adobe Color

This is a free tool developed by Adobe that allows you to select colours from a colour wheel or enter colours in a variety of formats and determine the contrast ratio between the two colours.

Adobe Colour Contrast Analyzer

Choose a tool that meets your needs and you find easy to use. Each of these tools has its strengths and limitations – see which one works best for you.

Accessibotly (Slack App)

This one is special to us as it is a little bot we created a few years ago for our Slack workspace. It allows you to bring the colour accessibility check into the conversation via a simple command, so you don't have to leave Slack to use a website and bring back the results with a link or a screenshot.

Get Accessibotly for your Slack workspace

What if someone says to you that accessibility is not important?

We hope that most people can clearly see the importance of designing for accessibility, but occasionally, you might come across someone who seems to wilfully dismiss it.

It is important to remember that accessibility is a fundamental part of creating inclusive and equitable products and services. Here are a few points you could consider when responding to someone who says that accessibility is not important (feel free to copy and use as appropriate):

Accessibility benefits everyone

While accessibility is particularly important for people with disabilities, it can also benefit people without disabilities. For example, a website with good colour contrast can be easier to read for everyone, not just people with visual impairments. Similarly, a website with clear and concise language can be easier to understand for people who are not native speakers of the language.

Accessibility is a legal requirement

In many countries including the UK, accessibility is required by law for public sector websites and services, as well as for private sector websites and services that serve a public function. Failing to meet these requirements can result in legal action and fines.

Accessibility is good for business

Making products and services accessible can lead to increased customer satisfaction and loyalty, as well as a larger potential customer base. In addition, companies that prioritise accessibility may be seen as more socially responsible and may attract more positive attention from consumers and the media.

Accessibility is a matter of human rights

Everyone has the right to access information and participate in society, regardless of their abilities or disabilities. By making products and services accessible, we can help to ensure that everyone has an equal opportunity to participate and succeed.

Ultimately, accessibility is about creating products and services that are inclusive and equitable for everyone, and it is an important consideration for any product or service. By understanding the benefits of accessibility and the impact it can have on people's lives, you can help to make the case for the importance of accessibility.

References