Accessible Color

What is an accessible use of color?

Some people with visual impairments interpret color and contrast differently, making it difficult or impossible for them to access information communicated only by color. For example, to a user with red/green color blindness, a green image on a red background will not provide enough distinction to make the image visible. This type of color treatment can also make it difficult for some users to read text or identify links that are a different color but don’t have underlines. Thus, making colors accessible usually means creating color combinations that provide enough contrast that the content is clearly distinguishable from the surrounding page.


Web Accessibility Perspectives: Colors with Good Contrast


How Do You Ensure Colors Are Accessible?

Use UCSF Brand Standards Digital "Interactive" Color Palette

Official UCSF brand colors and treatments and other graphic elements have already been tested and approved for accessibility. By sticking to the official colors you will likely be okay, though there are some caveats, so be sure to check the official UCSF "Interactive" Color Usage Guidelines. The colors are modified from print standards to meet WCAG 2.0 AA guideline for contrast.

Test Your Color for Perceptibility

While the term “color blindness” usually refers to the inability to see varying shades of green and red (deuteranopia and protanopia), the disability manifests in other ways affecting other colors as well, as in the case of tritanopia (blue-yellow color blindness). To evaluate whether or not your content is accessible to people with these disabilities, use one of the tools below:

Color Oracle A free color blindness simulator for Window, Mac, and Linux.

Michel Fortin's  Sim Daltonism color blindness simulator – Mac only. Provides a floating window you can use like a magnifying glass.

Make Text Accessible

For small or regular size text (12px or less) the contrast ratio between the text’s color and background color must be at least 4.5:1.

For large text, (18px text or 14px bold text) the contrast ratio between the text’s color and background color must be at least 3:1.

In addition to ensuring adequate contrast, there are other considerations to be aware of. Using the <strong> (for bold text) or <em> (for italic text) tags in HTML will add emphasis to a word, so a screen reader might interpret this tag by changing the pitch or tone of voice, depending on the user’s settings.

Make sure that all body and menu text is resizable using the browser’s default zoom tools. Except for captions and images of text, the text must be resizable without assistive technology up to 200 percent without loss of content or functionality.

For any images containing text, be sure to include alt text, and consider providing a full-text alternative (or caption) for complex images with lots of text, such as infographics or charts.

  • Do: Consider using patterns instead of solid colors in graphs and charts.

  • Do: use colors with symbols (such as asterisks) or words to indicate importance. For example, you may render a form field in red to emphasize that it is important or required, but you also need to preface the word in question with the word “required.” Your communication cannot depend on the user interpreting the color alone as important.

Inaccessible example: "Submit your area code with your phone number"

Accessible example: "Required: Submit your area code with your phone number"

  • Don’t: provide instructions that rely on color or other sensory characteristics

Inaccessible example: “Click on the red button.”

Accessible example: “Click on the submit button.”


Advanced Technique: Using the Accessibility Developer Tools Chrome Extension

If you’re comfortable digging into the HTML and CSS of your website, you might want to try using the Accessibility Developer Tools Chrome Extension. To use it once installed, right-click on any element on your page that you want to analyze, select “inspect” from the contextual menu, then, from the expanded inspector, click the chevrons in the right sidebar to reveal “Accessibility Properties”.

The tool displays your element’s current contrast ratio and suggests adjustments that meet the WCAG AA or AAA conformance levels. You can then click on the suggested color values to see how your page would look with the new colors.

Once you’ve determined which colors will suit your site and meet the required accessibility guidelines, work with your developer to edit your website’s CSS, or make the changes yourself if you have access to the code.