Skip to main content
University of California San Francisco Give to UCSF

UCSF IT Technology

Main navigation

  • Status
    • Security Announcements
  • Services
  • How To
  • News & Events
  • About Us
  • Log In
Open Close Search
Open menu
Give to UCSF

Breadcrumb

  1. Home
  2. How To
  3. Accessible Color Best Practices

This content is viewable by Everyone

Accessible Color Best Practices

Save

Log in via MyAccess to save.

  • Audience: Affiliate, Faculty, Non-UCSF, Staff, Technical Partner, Volunteer
  • Service Category: Web Services
  • Owner Team: Web Services
  • Service:
    Digital Accessibility Program

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.

Related Information

  • Accessible Documents Best Practices
  • Accessible Forms Best Practices
  • Accessible Images Best Practices
  • Accessible JavaScript Best Practices
  • Accessible PDF Best Practices
  • Accessible Structure Best Practices
  • Accessible Videos Best Practices
  • Accessible Virtual Events Best Practices
Section Menu
Digital Accessibility Program
  • Digital Accessibility Awareness and Outreach
  • Introduction to Digital Accessibility at UCSF
  • Digital Accessibility Consultations for Online Content
  • Testing for Digital Accessibility
  • Accessible Color Best Practices
  • Accessible Documents Best Practices
  • Accessible Forms Best Practices
  • Accessible Images Best Practices
  • Accessible JavaScript Best Practices
  • Accessible PDF Best Practices
  • Accessible Structure Best Practices
  • Accessible Videos Best Practices
  • Accessible Virtual Events Best Practices
  • Software Purchasing Guidance for Accessibility
Home

Footer Col 1

  • Status
  • Services
  • How To
  • News & Events

Footer Col 2

  • About
  • IT Directory
  • Standards & Guidelines

Footer Col 3

  • Get Help
  • Recognize IT Staff
  • Submit a Support Inquiry

    For emergencies and high priority issues please call the IT Service Desk (415) 514-4100

    • Facebook
    • Twitter
    • YouTube
    • Instagram

    © 2023 The Regents of the University of California