Creating an Accessible Color Palette

Color Contrast

The color of text and other important elements should contrast strongly against the background. Colors that are close in value are harder to read for those with low vision, as well as in certain contexts like in the glare of the sun.

When layering text over a background with variation, like a photo or gradient, consider adding a solid-color layer between them.

A typography sample with heading, paragraph, and button of different colors, all with good contrast.

The dark text is all clearly legible against the white background, layered over a lavender pattern.

Putting together a robust color palette can save time and effort overall in designing for accessibility. Include an abundance of hues and values to provide more options and allow space for creativity.

Three sets of color swatches. The first shows green, purple, and orange swatches varying from dark to pastel. The second shows five shades of gray, from white to black. The third is of status colors with green and red, as well as pastel versions.

This palette includes colors with a generous range of hues and values.

Colors from the palette are paired together, grouped by whether they are okay for text, okay for UI components, or low contrast and only suitable for decorative elements.

By starting with a diverse palette, plenty of options are available.

Contrast Testing Tools

To test color contrast against WCAG standards, use a tool such as:

Using More Than Just Color to Convey Meaning

Color is often used to signal a status change, visually differentiate between elements, or otherwise convey meaning. However, not all users perceive color the same way, such as those with limited vision or using system color filters. Be sure to include an additional method to effectively communicate to all users. This can include:

  • Icon or shape
  • Pattern
  • Border or outline
  • Text
  • Value (dark versus light)
An email address form field with an incomplete email address. The field has a red border, an exclamation point icon, and text that reads “Domain name incomplete. Check again!”

In addition to using color, this form field indicates its error state with an icon and helpful text.

Testing in Grayscale

To make sure a design is not relying on color for its content to be understandable, try viewing it in grayscale using color filters within the accessibility settings of your operating system:

WCAG 2.1 AA Success Criteria