Overview
Explains how to meet color accessibility standards
Why?
High-contrast color combinations make text easy to read and understand. Some users have trouble seeing text if the foreground and background colors are too similar. For example, you may strain your eyes to see a very light gray text on a white background.
Use the UCSF Color Palette for accessible color combinations
Follow the recommended color pairings and guidelines from the UCSF Color Palette to meet accessibility standards for contrast ratios. The palette offers a wide range of colors that have been tested with UCSF navy or white for accessibility using the WebAIM Contrast Checker.
Tip: When checking colors, use their hexadecimal values instead of selecting a color via an eyedropper tool.
Example of color contrast
There is insufficient color contrast with the light grey text on a white background. When the text is changed to black, there is sufficient contrast.
Resources
- Appropriate Use of Color in Word Documents short video introducing color contrast facts from the California Department of Social Services Training.
- Contrast and Color Accessibility article from WebAIM.
- Contrast Triangle tool that ensures sufficient contrast between text, links, and background colors, making content accessible and helping colorblind users identify links.
- Web Accessibility 101: Effective Color Contrast 2-minute demo of color contrast for text from Level Access.
*Some information on this page is from the W3C Web Accessibility Initiative (WAI) document: Designing for Web Accessibility. Kevin White, Shadi Abou-Zahra, and Shawn Lawton Henry, eds. Copyright © 2025 World Wide Web Consortium (W3C®). Date: Updated 16 July 2024.