Color Contrast

What is 'color contrast'? 

Color contrast is the contrast ratio between a foreground color and a background color. When we think about color contrast, we are thinking about the color of text, images of text, and UI elements against the background color.

The foreground color and the background color must meet specific color contrast ratios in order to meet WCAG 2.1 AA.

Why is color contrast important? 

Having enough color contrast between your text and your background makes it much easier for users to read your content. If your resources lack sufficient color contrast, some users will not be able to perceive the information you are presenting. 

Example: 

UC Berkeley Digital Accessibility Campus IT Experience. The background color is California Gold, the foreground color is Berkeley Blue.

In this example, the text “UC Berkeley Digital Accessibility Campus IT Experience” is considered the foreground color. This color is Berkeley Blue, with a Hex code of 002676. The background color is California Gold, with a Hex code of FDB515. The contrast radio of these colors is 7.7:1, which meets color contrast requirements. 

What are the requirements for color contrast? 

Large text must have a contrast ratio of 3:1 or more. 'Large text' typically refers to header text, navigation elements, or page titles. Large text has at least an 18 point font size, or 14 point bold font size. 

Small text must have a contrast ratio of 4.5:1 ratio or more. 'Small text' typically refers to paragraph text. Small text has less than 18 point font size, or 14 point bold font size.

How do I test my color contrast? 

Learn more about manual accessibility testing. 

How to test your color contrast. 

  1. Run the WAVE tool. WAVE will identify potential color contrast concerns. However, it might not find all your contrast issues.
  2. Use the WebAIM Color Contrast Checker to find the hex code of your text color and your background color. The eyedropper tool is great for this.
  3. See if your color combinations PASS or FAIL. If your colors pass or fail is dependent on the size of your text.

Most common issues related to color contrast. 

  • You have gold or yellow text on a white background. 
  • You have red text on a white background. 
  • You have grey text on a grey background. 

These color combinations are notoriously difficult to meet color contrast requirements. 

How to fix color contrast issues. 

Adjust your text color or background color until they meet color contrast requirements. 

Consider using the UC Berkeley Brand color pairing tool to find accessible matches for your project. Learn more about choosing accessible color pairings in Berkeley Brand colors. 

Common color contrast issues (and how to fix them). 

collapse all expand all

Yellow text on a white background. 

Screenshot of the text "Hello World" in yellow font and blue font on a white background. The yellow font has an X and the blue font has a check mark.

California Gold foreground text (Hex #FDB516) on a white background (Hex #FFFFFF) does not meet color contrast requirements. Our recommendation is to adjust the foreground color to a darker color, like Medium Blue (Hex #034AAD).

Red text on a white background. 

Text that says "Hello World" in two shades of red on a white background. The first example has an X, and the second example has a check mark.

Some default red text (Hex #EF5346) on a white background (Hex #FFFFFF) does not meet color contrast requirements, but adjusting the color to be slightly darker (Hex #DB2715) will.

Grey text on a grey background. 

Text "Hello World" in grey text on a grey background. The first example has an X, and the second example has a check mark.

Grey text (Hex #C5C5C5) on a grey background (Hex #727272) does not meet color contrast requirements, but darkening the background color (Hex #474747) does provide enough contrast to meet WCAG 2.1 AA.

Other considerations related to color contrast

Link text 

Learn more about accessible links. 

We recommend underlining all links. 

If a link is not underlined, there are strict color contrast requirements that must be met. 

For links that aren’t underlined, your link text must: 

  • Have at least a 3:1 contrast ratio to the surrounding body text color AND
  • Have at least a 4.5:1 contrast ratio to the background color, AND 
  • Underline the text when a user hovers over the link with a mouse, or the link receives keyboard focus.  

Use WebAIM’s Link Contrast Checker to confirm your link text meets color contrast requirements. 

Focus indicator 

Your focus indicator must have a contrast ratio of at least 3:1 with the background color.

Screenshot of the focus indicator on the berkeley.edu homepage logo.

In this example, the black box around the UC Berkeley logo is the 'focus indicator'. This focus indicator has a color contrast ratio of 13:64.1, which meets color contrast requirements. 

Logos

Logos and text in logos are not required to have a certain color contrast. 

Color contrast in videos 

For videos posted or uploaded after December 2, 2022.  

All text information presented in videos must meet minimum color contrast requirements. 

  • Large text must have a color contrast ratio of at least 3:1 
  • Small text must have a color contrast ratio of at least 4.5:1 

Open captions 

Learn more about captions. 

Open captions (sometimes called ‘burned in’ captions) are required to have a color contrast ratio of at least 4.5:1. 

More resources 

Learn more about WCAG 

Here is additional information about WCAG 2.1 AA Success Criterion related to color contrast.

Color and Accessibility