Accessibility for Teams in a Hurry: Color Contrast

Making accessible design decisions starts by establishing an accessible color palette. Defining a color palette can be really exciting as it sets the tone of the experience, yet it’s a fragile part of the process. People attach a lot of emotion to color. If you combine that with branding considerations, this part of the process must be handled with care and can often take time to get right.

There are some key considerations when creating a color palette for your website. Some are as simple as making intentional design choices and others can involve multiple stakeholders.

Define the Palette

An accessible color palette has sufficient contrast for legibility and interactions. It’s more usable for people with low vision or color blindness and makes information more legible for everyone. Sometimes brand colors have already been established that might not be accessible for digital applications. This requires working with a brand team or stakeholders to create an accessible, digital version of an existing palette.

Decide What Colors are for Decoration vs. Information

Two Images: on the left, an elaborately decorated church ceiling, with the caption, 'decoration'. On the right, an image of signage as a train station with the caption 'information'.

Consider how the color is being used within your system. Once you define your palette, consider which colors can be used just as decorative elements rather than using them to communicate key information. This allows you to retain color combinations with lower contrast or similar values without compromising your site’s accessibility.

Two Images: on the left, a rainbow of washed out colors with white text overlaid, stating 'This contrast is too low'. On the right, an image of a solid dark background with the caption 'This contrast is better'.

When we talk about contrast our goal is to make sure information can be read, which means there’s at least a 4.5:1 contrast ratio between the foreground and background colors.

A screenshot showing the WebAIM user interface highlighting contrast issues and recommendations.

To test contrast while you’re creating designs, there are plugins out there for tools like sketch, but one of our favorite tools is WebAIM’s website where we can check contrast for multiple uses. For example, a pairing might not work for small text, but would work well for symbols and headlines.

The number '5' in an Ishihara plate, used by optometrists' as a color blind test.

In addition to contrast, colors with too similar value aren’t discernable as a way of communicating information for people with color blindness and are difficult to read for all audiences.

Establish Action Colors and Create a Style Guide for Developers and Site Administrators

A site color palette.

Color meaning should be applied consistently. Users often associate color with meaning. That means it’s important to communicate each color’s purpose to your dev team and the site admin by creating style guides.

A Sample Workflow:

 PrimarySecondaryWhenTool Used
Color ContrastDesignerDeveloperPrimary:
Design

 

Secondary:
After built

Primary:
WebAIM

 

Secondary:
WAVE

To Summarize

  1. Define your palette
  2. Decide what colors are for decoration vs. information
  3. Test your color combinations
  4. Establish action colors
  5. Create a style guide for developers and site admins

What’s next? Check out our post on Links & Buttons >

Resources