Your brand colors make a big emotional impact, but how do they appear to site visitors who are partially sighted, color blind, or faced with environmental factors that decrease visibility? Color and contrast levels are crucial to communication, and for the accessibility-minded designer, getting these details just right is a key element for a successful project.

Before diving into the nuts and bolts of some great resources designers can use to assess color contrast from a number of useful angles, perhaps you are wondering: What’s all the fuss about web accessibility lately? Why does it matter to me? What is an accessible web color palette anyway? Let’s quickly review.

A human-centered approach to Web Accessibility

A Human Centered Approach to Web Accessibility

Web accessibility has become a hot topic in the past year. In the landmark 2017 case Gil vs. Winn-Dixie, a judge ruled for the first time that ADA Guidelines apply to a company’s online presence due to its role as a gateway to its physical location. Accessibility is in the spotlight, with Section 508 compliance becoming business critical.

Web Accessibility and color

But while web accessibility is measured in terms of compliance to guidelines, it’s vital that UX practitioners account for the wide range of conditions that humans bring when they walk into an experience with a website, software, or any other technology. Certainly, there are cognitive, motion, hearing and vision impairments - including color blindness. But there are many other user situations to consider as well. For example, a user faced with screen glare can benefit from a strong contrast ratio.

It’s also important to make note of the tangible business value of adopting accessible design practices. Beyond legally safeguarding your business or institution, putting these practices into play can boost search engine rankings, open up websites to a wider audience and customer base, and increase usability on mobile devices. Because accessibility considerations are gaining exponential momentum on their way to becoming the industry standard, a future-proof website is key to long-term return on investment.

So when championing accessible design to support a wider range of human needs, remember that this is not only the future of UX and tech, but an intelligent business decision and long-term investment.
 

What is an accessible web color palette?

Accessible Web Color Palette

Under current laws (Section 508), WCAG’s AA standards are the go-to for making all electronic information accessible to people with disabilities. However, adhering to AAA standards will enhance accessibility. What this means in terms of contrast ratios is as follows:

  • Level AA requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text.
  • Level AAA requires a contrast ratio of 7:1 for normal text and 4.5:1 for large text.

Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger. Normal text is considered to be 1em, equivalent to 12 point, equivalent to 16px.

Sounds good so far? Indeed it is, but how do you go from numerical standards to a visually appealing color palette? You certainly cannot rely on your eyes exclusively. Color blindness affects approximately 1 in 12 men (8%) and 1 in 200 women in the world, and there are 8 distinctive types. You simply cannot eyeball it.

Enter the tools! Put together by both for-profit businesses and non-profit organizations, each of these free-to-use tools allow you to compare sets of colors against WCAG guidelines for contrast ratios. They each have a different feature set, so here is what you need to know in order to select the right tool for the job, from basic color comparison to designing an entire color palette from scratch.
 

Meet the tools

Level 1: Test one color against another

1. WebAIM Color Contrast Checker

WebAIM Color Contrast Checker

Made by WebAIM

Overview
Enter foreground and background hex colors. The output shows AA and AAA compliance for normal and large text, alongside a sample sentence. Sliders allow adjustment until a compliant combination is reached.

Strengths

  • Straightforward tool with easy-on-the-eyes UI.
  • Nice, basic starter tool - not just for designers.
     

Weaknesses

  • Can only compare two colors - not entire palettes.
  • Lightness slider not a very robust tool for color selection - hard to tell how appealing colors are in this minimal display.

2. WCAG Contrast Checker

WCAG Contrast Checker

Made by Acart

Overview
Enter foreground and background hex colors. Shows AA and AAA compliance for normal and large text next to sample Lorem Ipsum text. Alternately, you can upload an image. A 9-color palette is automatically selected. Each color is then available for comparison as the Foreground or the Background color.

Strengths

  • Straightforward tool with friendly UI.
  • Ability to generate palettes from images.

Weaknesses

  • Palette selection is automatic, and further customizable using the color picker, but those adjustments do not save back to the palette. One must copy and paste to a separate document.

Level 2: Test entire brand color palettes

3. Color Cube

Color Cube

Made by Oomph

Overview
Enter palette colors, each is on its own line. The output displays sample letters with contrast ratios vs. AA standards for small and large fonts. Three columns show contrast with a white background, with a black background, and a set of "Most legible from available" brand colors.

Strengths

  • Easy-on-the-eyes UI with nicely organized output and clear indication of pass/fail/edge.

Weaknesses

  • Does not cover AAA standards.
  • Does not do every possible combination of colors and it's not immediately clear that this is the case.

4.) Eight Shapes Contrast Grid

Eight Shapes Contrast Grid

Made by Eight Shapes

Overview
Enter palette colors. You can also name each color. The app generates a table showing all color combinations. Three tile sizes are available. There are visual indicators for AA and AAA pass/fail/edge and effective contrast ratio. The app allows drag-and-drop reordering of columns/rows. The tabular data is savable, exportable, and shareable.

Strengths

  • Lots of handy features supporting the analysis of entire palettes.

Weaknesses

  • Steeper learning curve than other, simpler tools.
  • Not appropriate for comparing just two colors.
  • Not conducive to discovering color combinations.
  • Somewhat visually overwhelming, but there is a lot of data being displayed.

Level 3: Create new color palettes

5. Color Safe

Color Safe

Made by Donielle Berg and Adrian Rapp

Overview
Enter background color. Select font family, size and weight. Choose AA or AAA standard. Displays selected color and hex code, a sample, and effective contrast ratio. The best part is the large thumbnails of potential foreground colors of adequate contrast. You can choose to see them all or narrow down to specific color groups (greens, blues, purples, etc.)

Strengths

  • Easy-on-the-eyes UI makes finding an attractive and appropriate color combination a breeze.
  • If you do not already have a brand color palette, or if you have the leeway to supplement an existing brand color palette for web, this is a handy tool.
     

Weaknesses

  • You can only compare two colors at a time - foreground and background.
  • No way to save colors except to copy and paste them into a separate document.

Go forth, and design for one and all!

Once you get familiar with these tools, you may find yourself using more than one tool on a project. Perhaps Color Cube is the handiest way to present accessibility findings to a client. Maybe WebAIM’s tool becomes your go-to for quick spot-checks.

Top of the wish list? Accessible design and auditing capabilities within the big design apps like Sketch and Adobe Creative Cloud, rather than in separate, standalone applications. It’s plausible to think that it’s on the horizon as access to tech becomes more and more vital to go about our day-to-day lives.

But for now, a big shout out to all of those involved in creating these tools. And props to everyone who has worked to champion the idea of web accessibility for all, before it was identified as a smart business move. We design for humans, and they come to our products and projects with a wide variety of stories and challenges. Much gratitude to those who help us to serve them all.

Design for one and all
 

Persona
Services