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 combinations for compliance color contrast

WCAG 2.1 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. Tip: entering in the hexadecimal or RGB  values is preferred over using the tool's eyedropper function for a variety of reasons including inaccuracy due to individualized user monitor settings. 

• Colour Contrast Analyzer (downloadable for Mac or Windows). Versatile as a variety of color model  values can be entered beyond hexadecimal values, such as RGB, HSV, and HSL. As a stand-alone tool, it can also be used with Word and PDF documents.
• 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.
• WCAG Color Contrast Checker – A Chrome extension that has a color contrast checker.
• Color Contrast Accessibility Validator – A basic color contrast validator that references WCAG 2.1 AA Success Criteria 1.4.3 
• Color Contrast Checker and Ratio Calculator – An enhanced color contrast checker and ratio calculator

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.
• Colorblindly – Chrome extension that simulates 8 different instances of colorblindness.

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.
• California Department of Social Services Training Video: Appropriate Use of Color: A short video introducing color contrast facts.