Inclusive palettes with Adobe Color

Creating accessible-first color themes using our Contrast Checker

Fourteen vertical bands of color ranging from dark purple (on the left), to reds, red oranges and orange yellows, to an almost-white orange yellow (on the right) with white numbers from 10 to 1 at the bottom to demonstrate contrast ratios between background colors and text colors.

Color has a huge impact on the look and feel of products. When designing for people, color is not only a strong communication medium, it’s also a powerful tool for accessibility.

I asked Alison Murphy, a designer at Pearson’s, what accessibility in design means to her and she answered with: “There’s a great thing in universal design called the “curb-cut effect”—essentially, by making something accessible to a certain audience, you often improve the experience for everybody. Color themes that work well for a vision-challenged audience will work well for everyone.”

Accessibility comes with multiple advantages, the most prominent being the uniform access and interpretation of information unaffected by the limitations of different audiences. Take healthcare systems: A lack of minimum contrast ratio in the colors of healthcare apps and websites could hinder communication, of important information about products and services, for people with low vision, color-blindness, or aging. Accessibility enables basic color contrast, so that everyone can read all supplied information and leverage the relevant parts.

Designers can be swayed by design trends, brand palettes, or a personal affinity for low contrast typography that makes them choose colors that aren’t legible for all. No aesthetic choice should ever come at the expense of accessibility.

So, how do you pick colors that fit with your desired style, while also solving for color contrast?

Introducing Adobe Color’s Contrast Checker

Contrast Checker is Adobe Color’s new accessibility tool for creating WCAG-compliant color themes based on an advanced recommendation system. The contrast-checked color palettes can easily be shared through Adobe Creative Cloud Libraries and readily accessed within any Creative Cloud app. Simply put, Contrast Checker enables you to dynamically fix the color legibility of designs and meet WCAG criterion.

A screenshot of the Adobe Color home page showing a What's New screen with a list that includes Contrast Checker, Color blind safe themes, Enhancements, Coming soon. Contrast Checker is highlighted and the body copy reads: Use Adobe Color's newest toool to create accessible themes. Ensure your color choices are visually accessible by checking the contrast ratio of your background and text colors, and compare to Web Content Accessibility Guidelines (WCAG).
Adobe Color home page.

The Web Content Accessibility Guidelines, commonly referred to by its acronym, WCAG, is a set of guidelines and recommendations for how to make web content more accessible. It was developed by the World Wide Web Consortium and is an internationally accepted standard for web accessibility of sites and applications.

Read on for a look at color contrast and its importance, and how Adobe Color’s Contrast Checker can help meet these accessibility standards.

What is contrast ratio?

There must be sufficient contrast between a text color and a background color (technically called luminance contrast ratio) for content to be readable. This includes text on images, icons, and buttons, as well as the colors used to convey other graphical information such as diagrams and maps.

The highest contrast ratio is 21, when one color is black and the other is white; the lowest contrast ratio possible is 1, when both colors in a combination are the same, and therefore have the same luminance. All other possible contrast ratios lie between 1 and 21. A key point to note is that, with solid colors, the contrast value doesn’t change if the colors are flipped—for example, blue text on a white background has the same contrast value as white text on a blue background.

Hence to make things more accessible, maintaining a good contrast ratio is a must. This can be done by making one or both colors lighter or darker to achieve a higher contrast value.

The WCAG standard assigns two contrast ratio ratings, AA and AAA, that are considered “good.” These ratings are applied at different contrast values (3, 4.5, and 7) depending on your need (using small or large text size vs just examining the color of a graphic object). Although AAA ratings are better than AA ratings, they can really limit colors options, so unless you have a specific AAA requirement, a AA rating is still worth aiming for. Adobe Color’s Contrast Checker tool will help you quickly find these AA ratios, which occur at values 3, 4.5, and 7.

Get started with Adobe Color’s Contrast Checker

Start using the Contrast Checker by visiting Adobe Color and selecting Accessibility Tools > Contrast Checker. Input the text color and background color values or upload a screenshot of your project to pick the colors you want to check for contrast.

A screenshot of the Contrast Checker tool on Adobe Color. At the top of the page are fields and sliders for Text Color and Background color and beneath that are three Preview panes showing pink backgrounds couple with dark purple text. All three panes have a Pass checkmark. On the right side of the screen are Recommendations for color pairings and a Save button.
The landing page for Adobe Color’s Contrast Checker.
A screenshot of the pop-up panel for importing images, graphics, or color swatches. The pop-up is superimposed over the Contrast Checker tool (shown above).
Select text and background colors using the pucks on the image.

It’s also possible to sample colors from imported images or graphics. Use the “Import Image” button to browse for files on your device or drag-and-drop them onto the window.

Check for accessibility

Once the colors are imported, look for the Pass or Fail notations below the Preview to assess whether the contrast is adequate to meet the WCAG criteria. If not, the first quick way to fix it is through the sliders underneath the input boxes—moving toward the + will increase the contrast ratio while staying close to the original hues.

A screenshot of the Contrast Checker tool on Adobe Color. At the top of the page are fields and sliders for Text Color and Background color and beneath that are three Preview panes showing yellow backgrounds with brown (left) and black (two right) text. The pane on the left has a Fail slash on it and the other two have Pass checkmarks. On the right side of the screen are Recommendations for color pairings and a Save button.
A failed color theme can be adjusted using the sliders and input fields.

Work with recommendations or set a contrast ratio

When compared to other available tools or plugins, Adobe Color’s prime differentiator is the Recommendations system. By default you will have contrast suggestions for 3:1, 4.5:1 and 7:1. These conform to the WCAG minimum contrast requirements and help to solve the contrast problem in a single click.

A second way to improve contrast is by inputting a desired contrast ratio in the “Set a contrast ratio” section. Enter the values, evaluate your choices, and select Apply to get a live preview of the colors combining regular text, large text, and graphical components on the background color. It's a good way to quickly determine whether a contrast is good to go or needs further iteration.

A screenshot of the Contrast Checker tool on Adobe Color. At the top of the page are fields and sliders for Text Color and Background color and beneath that are three Preview panes showing yellow backgrounds with brown (left) and black (two right) text. All three panes have a Pass checkmark. On the right side of the screen are Recommendations for color pairings, a Save button, and a dropdown arrow revealing the Set Contrast Ratio field.
A failed color theme can also be adjusted by inputting a new ratio into the Set Contrast Ratio field.

Once you feel confident about the color choices, save them to Creative Cloud Libraries. Within the Libraries section, the two-color themes that are contrast checked will be labeled in blue with the highest qualifying level—AA or AAA. Color themes that don't meet the criteria can still be used in designs, but “Fail” denotes that they did not pass the accessibility check.

A screenshot of a Creative Cloud Library with multiple color themes marked with a Color Contrast Checked label and certification ratings of AA or AAA in blue text.
Contrast checked Color Themes will have a “Color Contrast Checked” label and a certification rating.

Update your colors anywhere within Adobe’s ecosystem

Saved as assets in Libraries themes can be organized, used, and shared as reusable creative elements within your favorite Creative Cloud applications. This allows people to update colors in their designs without needing to copy or remember color values.

A screenshot of the Libraries panel in Photoshop. with multiple color themes marked with a contrast-checked label.
Color Themes in the Libraries panel of Adobe apps also have a “Contrast-checked” label.

Sharing made easy with Adobe-certified accessible themes

Since design is a collaborative process, Adobe Color helps you share color themes with your team members. Each color theme has a “Download JPEG” option that downloads swatches with additional information like color mode values, WCAG results, and certification.

A screenshot of two large color swatches (black on the left and blue on the right) with HSB and CMYK color mode values, contrast ratio values, and certification ratings beneath them.
Swatch downloads include color mode values, WCAG results, and certification ratings.

Accessible design means creation that can be enjoyed by all.

The Contrast Checker empowers designers to learn about color accessibility and its application in their designs and to create accessible-first color palettes. Choosing background and foreground colors with the minimum contrast ratio will lead to designs with much higher visibility across a wider range of users.

For more advanced accessible color creation, Adobe’s open-source tool Leonardo enables designers and developers to collaborate on generating accessible and adaptive color themes. Read more about Leonardo and how to use it to create contrast-based themes.

This article originally appeared on the Adobe Blog.

Header copy
Design your career at Adobe.
Button copy
View all jobs
Button link
/jobs