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 UCSF digital colors. Note there are some caveats, so be sure to check the official UCSF "Interactive" Color Usage Guidelines. 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.

Resources

Articles

• 24 Ways: Colour Accessibility
• 24 Ways: Integrating Contrast Checks in Your Web Workflow
• UX Magazine: Usability Tip: Don’t Rely on Color to Convey Your Message
• Web Page Mistakes: Effective Colour Contrast
• WebAIM: Contrast and Color Accessibility

Videos

Web Accessibility 101: Effective Color Contrast: 2-minute demo of color contrast for text.