When using color, keep in mind:
- The color contrast of your text, links, images and UI elements. It is critical that folks can distinguish from your foreground and background colors.
- How you are using color to show meaning. Is there a way to get your point across that does not rely on color alone?
Color contrast
What is color contrast?
Color contrast is the contrast ratio between a foreground color and a background color.
The foreground color and the background color of text, images of text, and UI elements must have enough contrast to be distinguishable. These colors must meet specific color contrast ratios in order to meet WCAG 2.1 AA.
Example:
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 required color contrast ratios?
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 check color contrast?
There are lots of free tools to check color contrast. Here are a few of our favorites:
- WebAIM’s Contrast Checker: This web based tool will help you identify if a color combination meets contrast requirements for normal text, large text, and UI components.
- WAVE: WAVE is available in both a web browser, and as a browser extension. Learn more about how to use WAVE.
Berkeley Brand accessible color pairings
Use the 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)
Yellow text on a white background.
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.
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.
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
Link text
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 paragraph text 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.
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.
About these WCAG success criteria:
Use of Color
What does 'use of color' mean?
'Use of color' refers to using only color to show information to users. This makes it difficult or impossible for folks using assistive technology and folks who can’t perceive color to fully understand or engage with your resources.
What is required when I use color to show meaning?
It is great to use color to show meaning, but color can’t be the only indicator of meaning.
To add additional indicators, you may decide to:
- Write your information in plain text. This allows everyone to access the same information.
- Add shapes, graphics, or text to your content.