Color Accessibility

Making your colors accessible is needed to make designs, websites, and your day-to-day work inclusive. In this post, we will discuss what makes color accessible and how to be more inclusive when using colors. Trigger warning: contains example color perception test.

Why Do Colors Cause Accessibility Issues?

Everyone who can see, sees color differently. The way we perceive color, is unique to us and the moment. Differences could be due to:

• Our environment e.g., brightness, shadow, glare.
• Device e.g., night mode, screen calibration, or printer set up.
• Texture e.g., a woven, matte, gloss finish.
• Our understanding of the color meaning (semantics).
• Color vision deficiency.

These are all also examples of when people have situational, temporary, and permanent disabilities. When designing, we need to consider these disabilities and remind ourselves designing for people with disabilities will create a design that benefits everyone. For example, high contrast between text and its background will create a better experience for a sighted person in a high glare situation as well as someone with a color deficiency. Here are some examples of our home page as seen with different vision deficiencies.

(From left to right US Homepage, no vision deficiency filter, Green Blind Filter.)

(From left to right US Home page: Blue Cone Monochromacy, Monochromacy/Achromatopsia, Blue-blind/Tritanopia, Blue-weak/Tritanomaly, Red-blind/Protanopia, Red-weak/Protanomaly and, Green-blind/Deuteranopia, and Green-weak/Deuteranomaly.)

The facts, around 1 in 12 men and 1 in 200 women have some degree of color vision deficiency. Complete color blindness (or monochromatic vision) is rare.[1] For people with color vision deficiency, it can be hard to distinguish the difference between colors, usually, red, yellow, and green. Below is an example of a plate used in the Ishihara test, which is used to test color perception. Can you read the number?

The number “74” should be clearly visible to viewers with normal color vision. Viewers with red-green color blindness will read it as “21”[2], and viewers with monochromacy may see nothing.

Whilst designing remember that not everyone will perceive your chosen colors the same way. As our CEO Steve reminds us:

‘One of our Blue Box values is “we do what’s right” and I believe that is among the things that makes us a great company — and charts a path to an even greater future.’ 👏 Code of conduct (americanexpress.com)

What Are the Accessibility Standards For Use of Color?

At Amex we follow the Web Content Accessibility Guides (WCAG). Here are the 4 standards we follow that include color:

1.3.3 Sensory Characteristics

Level A

Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, color, size, visual location, orientation, or sound.

1.4.1 Use of Color

Level A

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

1.4.3 Contrast (Minimum)

Level AA

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1.

Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

Logotypes: Text that is part of a logo or brand name has no contrast requirement.

1.4.11 Non-text Contrast

Level AA (Added in 2.1)

The visual presentation of the following has a contrast ratio of at least 3:1 against adjacent color(s):

User Interface Components: Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author.

Graphical Objects: Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.

Let’s investigate these in more detail.

Providing Enough Contrast

Some quick color theory. Colors have their own level of lightness, the visual perception of luminance. When we say the color contrast, we are usually talking about the contrast of the color’s luminance. To us some hues such as yellow look lighter, and blue darker. To create a higher contrast, we can change lightness (luminance) by adding white (tints) or black (shades).

To pass AA WCAG 2.1 you’ll need to have a high enough contrast of relative luminance. Don’t panic! There are many calculators out there. Our favorite in the DLS team is ROKING-A11Y Color Tuner (hrobertking.github.io) (Kudos to Amex accessibility rockstar @hrobertking for creating it).

Text

4.5:1 contrast is needed for most text used in our design language system. We have 4 headings that are ‘large text’ and may have a lower ratio of 3:1. The WCAG defines ‘large text’ as 120% bold or 150% of body text size. This translates to 20px bold and 24px as our default body size is 16px. Reminder: we use PX and REMs in our docs.

Here’s a breakdown of our font styling and contrast ratio:

Font style	Font size px	Font size REM	Contrast needed	Compliant
Heading 6	38px	2.375rem	3:1	✅
Heading 5	30px	1.875rem	3:1	✅
Heading 4	20px	1.25rem	4.5:1	✅
Heading 3	16px Bold	1rem	4.5:1	✅
Heading 2	15px Bold	0.9375rem	4.5:1	✅
Heading 1	13px Bold	0.8125rem	4.5:1	✅
Heading 6-G	38px	2.375rem	3:1	✅
Heading 5-G	30px	1.875rem	3:1	✅
Heading 4-G	20px	1.25rem	4.5:1	✅
Label 3	16px Bold	1rem	4.5:1	✅
Label 2	15px Bold	0.9375rem	4.5:1	✅
Label 1	13px Bold	0.8125rem	4.5:1	✅
Body 3	16px	1rem	4.5:1	✅
Body 2	15px Bold	0.9375rem	4.5:1	✅
Body 1	15px	0.9375rem	4.5:1	✅
Legal 2	13px Bold	0.8125rem	4.5:1	✅
Legal 1	13px	0.8125rem	4.5:1	✅

Non text components

Anything that is interactive or conveys information needs to have a contrast of 3:1. E.g., Loader, buttons, inputs.

How does this effect the DLS?

Let’s look at some examples of components that had contrast issues and how we changed them:

Secondary button

Interactive: Yes.

Conveys information: Yes.

Before

Secondary button’s bright blue text and gray backgrounds used on hover and press/active states fail 4.5:1 contrast.

After

To fix this we have darkened the label text on hover and pressed/active, so it keeps the same contrast ratio with its background as on default.

Tabs

Interactive: Yes.

Conveys information: Yes.

Before

Tabs bright blue text and gray backgrounds used on hover fails 4.5:1 contrast.

After

To fix this we have darkened the label text on hover, to keep the same contrast ratio with background, as on default state.

Input

Interactive: Yes.

Conveys information: Yes.

Before

After removing the placeholder for contrast and usability issues in an earlier version of DLS, our input now fails 3:1 non text ratio for the border (WCAG examples).

After

The input border was Gray 03, which is also used as a subtle border across our system. Instead of modifying Gray 03 or introducing a new gray we chose to Modify our Gray 04. Both Gray 04 and Gray 03 failed the 3:1 contrast with white. Gray 04 has been darkened, going from #97999B to #8E9092 a subtle change that allows 3:1 contrast with Gray 01 and lighter. This solved for other 3:1 contrast issues such as Toggle Switch, without darkening non interactive components such as horizontal rules on accordion.

Carousel

Interactive: Yes.

Conveys information: Yes.

Before

With gradients it’s hard to make sure the contrast is high enough on all screen sizes and all marketing images. There are also contrast issues with the navigation arrows.

After

To make it simpler for marketing images we have introduced a block background for the text and call to action. We have also added a background for the navigation.

Use of color

Having a higher contrast between colors helps us identify different colors but relying on color for information can be left to interpretation.

Semantics

Red, yellow, and green have associated semantic meanings and are commonly used to convey information. For example, in the DLS red = warning, green = success. But in some of our markets, for example China, Red = lucky [3].

Color as information

We shouldn’t rely on color alone. Adding difference in shape or adding an icon is a simple way to make this experience better.

How does use of color change our components?

Multi-Step Tracker

Before

Our multi-step tracker before and after is a great example. Before the remediation we were relying on bright blue as ‘completed’ and gray as ‘incomplete’, plus an assumption that we all read left to right.

After

We have now introduced a tick for completed, and a dashed line for ‘incomplete’ in addition to the bright blue and gray.

Determinate Loader

Before

For determinate loader we took a different approach. Determinate loader has two color issues, contrast of the light gray and background and conveying information as color. Currently, users assume that the blue bar is the loaded section and the load percentage.

After

We already give screen readers the load percentage, so to fix this we now provide load percentage to all users. Now that we no longer rely on color as information there is no need to fix the contrast issue.

FAQ

Do the DLS components have high enough contrast?

We have tested and made sure all our components work on a white or Gray 01 background. With the exception: of inputs. Input Success message and state, use success green that is only 4.5:1 on a white background.

How can I find out which colors have a high enough contrast?

Here’s our DLS Color contrast grid

If you’re using other colors, we recommend ROKING-A11Y Color Tuner (hrobertking.github.io) to check contrast.

Which components have color changes?

Once released, all changes can be found in our Design Kit Updates and Release Notes.

Feedback

We want to hear from you! Are you excited about accessible colors? or have questions of the impact on your team’s work? Let us know on Slack or by email dls@aexp.com.

[1] Colour vision deficiency(NHS.uk)

[2] Bonewit-West, Kathy; Hunt, Sue; Applegate, Edith (18 June 2014). Today’s Medical Assistant - E-Book: Clinical & Administrative Procedures Elsevier Health Sciences. ISBN978-0-323-29180-4.

[3] Page 97 Webs of influence Nathalie Nahai