Design systems are often seen as a way to improve accessibility. Some even say that you get accessibility for free by using a design system.

But what do you have to do, to make your design system accessible?

The consumers of a design system, designers & developers, do get accessible components for free. But in reality nothing is free. The work of assuring accessibility is moved from many teams to one — the design systems team.

If you are part of the team building the components from scratch, this article is for you. We begin with understanding the disabilities users may have. This helps us understand what problems our users may be facing.

Afterwards we look into how we can make our designs address those problems. In this first article, I focus on color.

Accessible or inclusive design

Accessible or inclusive design focuses on making products consumable for people with disabilities.

Inclusive design considers the following 5 disabilities.

For users these disabilities may be permanent, temporary or situational.

• visual like color blindness or low vision
• auditory like auditory processing disorder (APD) or a noisy background
• speech like stuttering or having a soar throat
• motor like a broken arm
• cognitive attention deficit or dyslexia
• seizure and vestibular disorders

Inclusive design tries to enable everyone to interact with products and services. A common argument against it is, that products are worsened for people without disabilities. Conversely improving a product’s accessibility often benefits users with and without disabilities alike.

Color vision deficiency/color blindness

Approximately 300 million people, 1 in 12 men (8%) and 1 in 200 women (0.5%) worldwide have a form of color vision deficiency (CVD).
Source: https://www.nhs.uk/conditions/colour-vision-deficiency/

Typical color blindness is caused by one or more of the three types of eye cone cells incorrectly perceiving light. This results in three main groups of color blindness. Red-green, yellow-blue and complete color blindness.

Red-Green color bindness

Red-green color blindness is by far the most common group of color blindness. For people with this condition it is hard to differentiate reds and greens.

The four types of red-green color blindness are:

• Deuteranomaly: Most common type of red-green CVD. Reduced sensitivity for green light. Reds look more orange and greens muddy with a yellow tint.
• Protanomaly: Reduced sensitivity for red light. Reds are less bright and have an orange or purple tint. Greens have a slight yellow tint.
• Protanopia: Inability to perceive red light. Reds and greens are indistinguishable. Specific blues, reds purples and dark pinks look similar.
• Deuteranopia: Inability to perceive green light. Reds and greens are indistinguishable. Pale violets and blues, pale pinks and light greys as well as yellows and bight greens look similar.

Blue-yellow color bindness

Blue-yellow color blindness is a less common group of color blindness. It makes it hard to differentiate blues and greens as well as yellows and reds.

The two types of yellow-blue color blindness are:

• Tritanomaly: Very rare, a reduce sensitivity to blue light. Blues and greens as well as yellows and reds are hard to differentiate.
• Tritanopia: Inability to perceive blue light. Blues and greens, purples and reds and yellows and pinks are indistinguishable.

Complete color bindness

Monochromacy occurs only in about 1 in 30.000 people. It’s the complete inability to see color, everything is in shades of grey.

Impact on design

What does this all mean for you as a designer? With 8.5% of the world having CVD, chances are that this is reflected in your audience as well. It’s up to you to make your designs usable for everyone.

Don’t rely on color alone

Color is often our first choice to communicate state, hierarchy or interactivity. For users with CVD this can be an issue. With a red-green color blindness it is hard to tell which field has an error.

However, with some extra indicators we can assure that an interface is just as usable for people with CVD. A good example are links that have an underline to show they are clickable.

A trick to force yourself to use signifiers other than color is to start to design in greyscale. You can even run tests or peer reviews on your interfaces in greyscale.

It’s also helpful to check your designs with a CVD simulation tool like Sim Daltonism. Not only does it help you recognise issues, but it trains you to remember colors that you have to be careful with.

Focus on contrast

Luminance contrast is distinguishable by everyone. This makes it a key factor in creating accessible interfaces. The W3C defines a formula to calculate the contrast but you can also use a contrast checker tools. There are even plugins for most design tools.

Having sufficient luminance contrast between elements allows people to distinguish them. This is especially important when placing text or icons on a background color.

Use an inclusive color palette

99% of people with CVD have a red-green color blindness. You should keep this in mind when choosing your colors. This is for example, the reason why links are blue by default. Most people can distinguish it well from other colors.

The brand team often defines which colors to use. But even if you get them to adjust the hues a bit for better contrast, it can be a huge difference for people with CVD.

You may also be able to influence the interaction so that it stands out from the content. It’s ideal to use blue for interaction elements. Blue stands out for most users including users with red-green color blindness.

Another way to improve colors is to shift reds towards blue and greens towards yellow. It makes them more distinguishable for people with red-green color blindness.

How to make your colors accessible and avoid issues for color blind users

Accessible color pairs

A main aspects of accessible colors is the contrast between background and foreground. E.g. the contrast of the button color and the button text label color.

By creating pairs of colors that are used together you can assure an accessible contrast.

You should begin by defining a naming convention. For example. background / fill colors have a name like “primary”. Foreground / text colors use the same name prefixed by “on” so “on primary”.

This makes it easy to understand that “primary” and “on primary” belong together.

If needed you can define different contrast levels per background. Maybe body copy has a stronger contrast than a picture description.

Make sure to test every level for sufficient contrast with its background. Using an “emphasis scale” works well, as it is easy to understand.

For your “primary” color you may have three levels:

• on primary / high emphasis → 19.4 AAA
• on primary / medium emphasis → 8.08 AAA
• on primary / low emphasis → 4.66 AA

You can also create a “contrast scale” which focuses on a color’s contrast, rather than its purpose. E.g. “high contrast”, “medium contrast”, …

A great way to assure the correct color pairs end up in the final product is to use design tokens.

Bring contrast into your palette

Color pairs are great to ensure contrast between foreground and background colors. But what about different fill colors?

Testing every possible combination of fills is unrealistic. But making sure the most likely combinations work well is doable and often enough.

For example you can test your primary / interaction color on all backgrounds. If you assure that it works for people with CVD you know they will be able to at least navigate your products.

For links it is important to not only test contrast to the background but also the surrounding text. This way a link can be spotted in a paragraph of text.

Optimising infographics

When optimising infographics your main goal is to make lines and fills distinguishable. To start, choose colors with a high contrast for people with red-green color blindness.

But color should not be the only difference.

For graphs you can use patterns in addition to color fills. This makes your graphs distinguishable even when converted to greyscale.

For line charts you can use line styles like dotted, dashed and solid to differentiate them. Adding shapes to the start, end and intermediate points helps to connect lines to labels.

Avoid vibrant colors

If possible avoid any bright and vibrant hues. However, if that is not possible, make sure to not use vibrant hues together. Vibrant combinations create a so-called “afterimage”. This “afterimage” interferes with other colors and causes visual vibration. Visual vibrations can be an issue for anyone, even without a CVD.

Never rely on color for states

States, like error or success, are very important for users. Not understanding the state of a product quickly turns your experience upside down. This is why it’s essential to make sure color blind users can understand the current state.

Forms and notifications are a common example. Adding an icon to a toast or form field lets users recognise the state even without color. Form fields also profit from placing the error message above the respective field.

Focus state

People who navigate your product via keyboard only need to know which element is focused. This is the element they interact with when pressing return. Navigating with the keyboard is basically like jumping between focus states.

For this reason it is imperative for the focus to be clearly distinguishable. A color alone is often not enough. I would advised you to stick with the defaults that your users know. For the focus state this means adding a strong outline around the focused element.

Hover and active / selected state

States for interactive elements like buttons can be emphasised through shadows and size.

For example a button can grow in size with a strong shadow on hover. Once pressed the shadow disappears and the button gets smaller to show that it’s pressed.

Links should use the hand or pointer cursor when hovered. It is also common to remove the underline. Active states are less important for links. Pressing a link navigates you to a new location immediately so you never see the active state.

For menus, breadcrumbs, tabs, etc. you must differentiate active and clickable items.

Underlining clickable items and changing the font weight of the active item are common methods. Adding a shape behind the active item and inverting the text color is another good way to show state. Alternatively you can add a shape next to the item or use an icon that switches from outlined to filled.

You can even increase the size of the selected item for example for paginations without text.

Showing state with icons

Icons can be a good way to show custom states like a that a song is currently playing or if an article is read or available in offline mode.

Make sure to use different icon shapes for the states, not just a different icon color. ?

Disabled state

Disabled elements often have reduced contrast with the background and within themselves. This is not ideal as it makes them hard to see. It is best to avoid using disabled buttons and elements.

However if you have to use them, you can add a not-allowed cursor or use a strike-through style for the text. For buttons removing shadows is another good indicator.

Interactive elements

Interactive elements must be recognizable as such in their default state. This means a user must know that a button can be clicked before hovering it. As with the rest, using color alone is not a great solution for people with CVD. Even so, try to use colors that work for people with red-green color blindness.

The convention for links is to use an underline to show they are links. Especially when placed within body copy it is really important to follow this convention.

The convention for buttons is more vague, but there are 4 common visual clues.

• background color
• an outline
• rounded corners
• a shadow

They look a bit like a real world button by being elevated towards us. You may not be able to use all those visual elements within your brand design. However, using as many of those clues as possible will help users identify buttons.

Ghost buttons (text only)

Ghost buttons have none of the above mentioned clues which makes them very hard to spot. They often also don’t have an underline like links.

This is why you should avoid them, but if you have to use them you can do the following:

• use uppercase only letters to distinguish them from other text
• add an icon before or after the text e.g. an arrow or an email icon
• make sure they are positioned separately from any other content

Cursor

Since cursors only change on hover, they are not a drop in solution. But they do contribute to a better user experience. They are especially helpful by showing what type of interaction is possible.

A pointer (hand cursor) shows that link is clickable. A grab hand cursor shows that something can be dragged and a text cursor shows that a text can be edited. There are cursor for zooming, resizing, adding and more. Find a complete list on mdn.

Hierarchy

Use font size, font weight, all caps, whitespace and indentation for different headlines. You can add other visual elements like a left border or decorative quotation marks for quotes.

Size can be helpful as well for example when highlighting a recommended price or the current selection.

Color conventions in interfaces

In product design certain color are typically associated with specific states or actions. While this is not a hard rule, it is best to try to stay as close to the conventions as you can. Test your UI with real users to make sure they understand what the colors symbolise.

Red

Red is commonly associated with errors and dangerous actions.

You should use it for error messages and error states. It is also often used for delete buttons or when canceling an account.

Another use is to show a negative trend, like in visitors or stock value.

If your brand uses red as their main color, try to use a different red for errors. This is to avoid negative association with your brand.

Green

Green symbolises successful actions and saving. It also stands for positive trends like an increase in users or in stock value.

Orange and yellow

Orange and yellow are typically used for warnings & hints. For example when a service is slow to respond or for tips when filling out forms.

Blue

Blue is most often used for general information that doesn’t require immediate action. For example informing about newly added functionality. It is also often used for interactive elements like buttons and links. This started due to it being distinguishable for users with red-green color blindness. But by now it has become a common pattern.

Grey

Grey, especially low contrast greys, are often used for disabled elements. Due to the reduced contrast they naturally look less interactive.

Summary

Nearly 10% of the world’s population is has a color blindness condition.

Most have a form of red-green color blindness making it hard or impossible to differentiate reds and greens

Tips for inclusive color design

• Don’t rely on color alone to convey any meaning or function
• Focus on sufficient contrast when choosing colors
• Use patterns and shapes for infographics
• Avoid vibrant color combinations
• Use alternative visual clues for states, interactive elements and to show hierarchy
• Try to follow UI conventions for colors

Test your color palette for inclusivity:

• contrast grid
• accessible palette builder
• whocanuse.com