To view our site, you have to enable Javascript. Please enable javascript now.

Accessible Color Best Practices

What is an accessible use of color?

People with visual impairments interpret color and contrast differently. That makes 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 also makes it difficult for some users to read text or identify links that are a different color but don’t have underlines.

Making colors accessible means color combinations with enough contrast so the content is clearly distinguishable from the surrounding page.

How to ensure colors are accessible

Use UCSF brand standards digital "interactive" color palette

Official UCSF brand colors, treatments, and other graphic elements are tested and approved for accessibility. The colors are modified from print standards to meet WCAG 2.0 AA guideline for contrast.

Stick with the official digital colors. Note there are some caveats, so be sure to check the official UCSF "Interactive" Color Usage Guidelines. Other tips:

Note that the hexadecimal values of colors may change depending on if it is used in conjunction with white or black.
Another consideration is that some of the colors have font size limitations, such as the UCSF green and orange.
Pay special attention when mixing the colors with each other, such as green and blue, and always test for color contrast.

Test your color for contrast

WCAG 2.0 has guidelines for the color contrast ratios between the color used for text and the color used for backgrounds. Use these tools to test if colors contrast enough for people with moderately low vision and/or do not use contrast-enhancing assistive technology.

Color Contrast Analyzer (downloadable for Mac or Windows) Tip: entering in the hexadecimal values is preferred over using the tool's eyedropper function. Can also be used with Word and PDF documents.
Contrast Ratio tool - Just input your color by name, RGB or hexadecimal numbers
Juicy Studio Luminosity Colour Contrast Ratio Analyser
Snook is a color contrast check tool developed by Jonathan Snook
WebAIM Color Contrast Checker has been updated to provide feedback on meeting WCAG 2.1's 3:1 contrast ratio requirements for graphical objects and user interface components.

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 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.
Sim Daltonism color blindness simulator – An open source tool for iOS and Mac testing that provides a floating window you can use like a magnifying glass.