Accessibility for Teams in a Hurry: Color Contrast

Diagonal closeup of blue and red colored pencils on contrasting backgrounds

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:

  Primary Secondary When Tool Used
Color Contrast Designer Developer Primary:

After built


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 >


Get In Touch

Questions? Comments? We want to know! Drop us a line and let’s start talking.

Learn More
Get In Touch

Related Blog Posts

Tag! You're a Release!

What's the difference between git and GitHub? What's a repo? How is a release different from a deployment? How are tags and releases related?

Meet Our New Support Team

We know that balancing the ongoing needs of your website, your team, and your users can be a real challenge. We have developed a clear set of priorities and checkpoints to ensure your digital properties stay secure, up-to-date, and optimized for the long haul, and re-structured our process with those priorities in mind.

Talking to Screen readers with ARIA-live and Drupal.announce()

If content changes on your site and there’s a visual change to let users know, you need to make that change clear to folks who can’t see the visual cues. Drupal.announce is a JS method built into Drupal core that can make this easy.