Overview
Color plays an important role in digital communication. It can draw attention, organize information, reinforce branding, and improve visual appeal. However, color can also create accessibility barriers when used improperly.
People experience color differently. Some users have low vision, color vision deficiencies, light sensitivity, or other visual disabilities. Others may view content on mobile devices, in bright sunlight, or on low-quality displays.
Accessible visual design helps ensure that information remains understandable and usable regardless of how someone perceives color.
Why Color Accessibility Matters
Color should enhance communication, not be required to understand it.
Examples of inaccessible design include:
- Using red text alone to indicate an error
- Using green text alone to indicate success
- Distinguishing categories only by color
- Presenting charts without labels or patterns
- Using low-contrast text that is difficult to read
Users should not need to perceive color differences to understand important information.
Color Contrast
Color contrast refers to the difference in brightness, or luminance, between foreground and background colors.
Sufficient contrast helps users read text more easily and improves accessibility for people with low vision, color vision deficiencies, aging eyes, and users viewing content in challenging conditions.
WCAG 2.1 Requirements
For most text:
- Minimum contrast ratio of 4.5:1 for normal text
- Minimum contrast ratio of 3:1 for large text
Large text is generally:
- 18 point (24px) or larger
- 14 point (18.5px) bold or larger
Higher contrast generally improves readability.
These requirements are based on WCAG 2.1 Success Criterion 1.4.3: Contrast (Minimum).
Do Not Rely on Color Alone
Color should never be the only method used to communicate meaning.
Examples
Instead of:
- Red = error
- Green = success
Use:
- Error icon + text label
- Success icon + text label
Instead of:
- Red and green categories in a chart
Use:
- Labels
- Patterns
- Data labels
- Direct annotations
Users should be able to understand information even if they cannot perceive color differences.
Accessible Text on Colored Backgrounds
Before using colored backgrounds, verify that text remains readable.
Questions to consider:
- Can the text be read comfortably?
- Does it meet required contrast ratios?
- Would it remain understandable if viewed in grayscale?
- Would it remain readable on a mobile device?
When in doubt, prioritize readability over visual preference.
UC ANR Brand Colors
UC ANR's brand palette includes a primary palette and an accent palette that help create a consistent visual identity across digital and print communications.
When using brand colors:
- Verify color contrast before publication.
- Select color combinations that meet accessibility requirements.
- Avoid assuming brand colors automatically meet WCAG requirements.
- Test text and background combinations before using them for important content.
Brand consistency and accessibility should work together.
For official UC ANR brand colors, typography, and visual identity guidance, review the UC ANR Communications Toolkit: Fonts and Colors.
UC ANR Brand Color Contrast Examples
The following examples are based on contrast testing using official UC ANR brand colors. Contrast ratios should always be verified for the intended use. The examples below illustrate common combinations. Other color pairings may also be accessible if they meet applicable contrast requirements.
The tables below highlight a selection of common UC ANR color combinations that have been tested for accessibility.
Text on White Backgrounds
| Text Color | Contrast Ratio | WCAG AA Normal Text |
|---|---|---|
| ANR Blue (#005fae) | 6.47:1 | Pass |
| Red (#ab312c) | 6.55:1 | Pass |
| Dark Blue (#003c61) | 11.55:1 | Pass |
| Brown (#956c26) | 4.72:1 | Pass |
Text on Brand Color Backgrounds
| Text Color | Background Color | Contrast Ratio | WCAG AA Normal Text |
|---|---|---|---|
| White | ANR Blue (#005fae) | 6.47:1 | Pass |
| Black | ANR Gold (#fdbd10) | 12.46:1 | Pass |
| Black | Light Blue (#3aa8e4) | 7.90:1 | Pass |
| White | Red (#ab312c) | 6.55:1 | Pass |
| Black | Green (#67893e) | 5.22:1 | Pass |
| White | Dark Blue (#003c61) | 11.55:1 | Pass |
| Black | Orange (#d76f40) | 6.24:1 | Pass |
| Black | Teal (#0aa9b3) | 7.34:1 | Pass |
| White | Brown (#956c26) | 4.72:1 | Pass |
| Black | Light Green (#9fc54d) | 10.57:1 | Pass |
| Black | Yellow (#f3cc30) | 13.49:1 | Pass |
| Black | Gold (#e39b30) | 9.00:1 | Pass |
| Black | Gray (#847d77) | 5.18:1 | Pass |
Use with Caution
| Text Color | Background Color | Contrast Ratio | WCAG AA Large Text Only |
|---|---|---|---|
| Black | ANR Blue (#005fae) | 3.25:1 | Pass (Large Text) |
| Black | Red (#ab312c) | 3.21:1 | Pass (Large Text) |
| White | Green (#67893e) | 4.02:1 | Pass (Large Text) |
| White | Orange (#d76f40) | 3.37:1 | Pass (Large Text) |
| Black | Brown (#956c26) | 4.45:1 | Pass (Large Text) |
| White | Gray (#847d77) | 4.05:1 | Pass (Large Text) |
Notes
- White = #ffffff
- Black = #000000
- Pass indicates that the color combination meets WCAG 2.1 AA requirements for the indicated use.
- Large text refers to text that is at least 18 point (24px) or 14 point (18.5px) bold.
- Additional color combinations may be accessible if they meet applicable contrast requirements.
Images and Graphics
Color accessibility applies to more than text.
When creating images, graphics, charts, and infographics:
- Ensure sufficient contrast between foreground and background elements.
- Avoid presenting information using color alone.
- Use labels whenever possible.
- Include patterns, icons, or annotations in addition to color.
- Ensure charts remain understandable when printed in grayscale.
For additional guidance, review Images & Graphics.
Presentations and Documents
Color accessibility should be considered when creating:
- PowerPoint presentations
- PDFs
- Word documents
- Flyers
- Reports
- Training materials
Common issues include:
- Light-colored text on white backgrounds
- Colored text with insufficient contrast
- Color-coded information without labels
- Text placed on photographs or busy backgrounds
Always review content with accessibility in mind before distribution.
Social Media and Marketing Materials
Accessibility applies to visual content shared through:
- Social media platforms
- E-newsletters
- Promotional graphics
- Event advertisements
- Marketing campaigns
Best practices include:
- Maintaining sufficient color contrast
- Avoiding text-heavy graphics
- Using alternative text
- Ensuring information is available within accompanying post text
- Testing graphics for readability on mobile devices
For additional guidance, review Social Media Accessibility.
Common Mistakes
Common color accessibility issues include:
- Low-contrast text
- Relying on red and green alone
- Unlabeled charts and graphs
- Important information embedded in graphics
- Colored links that are difficult to distinguish from surrounding text
- Text placed on complex or busy backgrounds
- Decorative color choices that reduce readability
Before Publishing
Before publishing content, consider the following questions:
- Does the text have sufficient contrast?
- Have color combinations been tested using a color contrast checker?
- Is information available without relying on color alone?
- Are charts and graphs understandable without color?
- Are important visual elements labeled appropriately?
- Have brand color combinations been evaluated for accessibility?
- Is the content readable on mobile devices and smaller screens?
- Would the content remain understandable in grayscale?
Accessibility and visual design are not competing goals. Thoughtful use of color can strengthen both usability and the UC ANR brand.
Accessibility Supports Better Design
Accessible visual design helps more people access, understand, and engage with content.
By choosing accessible color combinations, ensuring sufficient contrast, and avoiding reliance on color alone, UC ANR can create more inclusive digital experiences while maintaining a strong and recognizable visual identity.