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.
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:
Web Accessibility 101: Effective Color Contrast: 2-minute demo of color contrast for text.