Checking color contrast for web accessibility

Overview
Checking color contrast using online tools
Selecting accessible colors for an embedded Google calendar

Overview

When it comes to color usage on your Dornsife website, your text color and background color should have sufficient contrast: if there isn't enough difference in brightness between your text and your background colors, website visitors may have difficulty reading your text.

Web Content Accessibility Guidelines (WCAG) 2.0 level AA, which is the standard that Dornsife WordPress follows, requires a color contrast ratio of at least 4.5:1 for most text. The Dornsife website uses black text on a white background, which results in a color contrast ratio of 21:1 and thus easily passes this requirement.

In this guide, we review some ways to check for and correct color contrast when you aren't able to use the default of black text on a white background.

Checking color contrast using online tools

Use the following online tool to check color contrast:

WebAIM: Contrast Checker
- Foreground Hex Value: Type the hex code for your text color
- Background Hex Value: Type the hex code for your background color

Unsure how to obtain the hex codes for your website colors? You can use the contrast checker's handy eyedropper tool: it isn't 100% precise but comes pretty close and is easy to use. A video demonstration as well as written instructions are available below:

Quick guide

Go to the WebAIM contrast checker at https://webaim.org/resources/contrastchecker/.
In a new browser window (not a new tab), go to the page you want to check the color contrast for.
Arrange the windows so that they are side by side. You may need to reduce their widths.
First, get the text color:
1. In the contrast checker, click the Color Picker underneath Foreground.
2. Select the Eyedropper icon.
3. Your mouse changes to a magnifier. In the second window, click the text to be checked. Try to select a thicker, more central pixel on the text, as the edge of the text will tend to be thinner and lighter in color.
4. Close the Choose a color window. The color contrast will not update until you do this.
Next, get the background color:
1. In the contrast checker, click the Color Picker underneath Background.
2. Select the Eyedropper icon.
3. Your mouse changes to a magnifier. In the second window, click the background to be checked.
4. Close the Choose a color window. The color contrast will not update until you do this.
The Contrast Ratio updates. If your ratio is 4.5:1 or higher, your page passes the contrast checker. If your ratio is lower than 4.5:1, you will need to adjust your colors and check them again.

Detailed guide (with screenshots)

Go to the WebAIM contrast checker at https://webaim.org/resources/contrastchecker/.
In a new browser window (not a new tab), go to the page you want to check the color contrast for.
Arrange the windows so that they are side by side. You may need to reduce their widths.
First, get the text color:
1. In the contrast checker, click the Color Picker underneath Foreground.
2. Select the Eyedropper icon.
3. Your pointer changes to a magnifier. In the second window, click the text to be checked. Try to select a thicker, more central pixel on the text, as the edge of the text will tend to be thinner and lighter in color.
4. Close the Choose a color window. The color contrast will not update until you do this.
Next, get the background color:
1. In the contrast checker, click the Color Picker underneath Background.
2. Select the Eyedropper icon.
3. Your pointer changes to a magnifier. In the second window, click the background to be checked.
4. Close the Choose a color window. The color contrast will not update until you do this.
The Contrast Ratio updates. If your ratio is 4.5:1 or higher, your page passes the contrast checker. If your ratio is lower than 4.5:1, you will need to adjust your colors and check them again.

Selecting accessible colors for an embedded Google calendar

As of 2024, Google's embedded calendar does not pass accessibility guidelines due to the use of a light gray font for calendar days. Instead of embedding Google calendar, you should create a shareable link:

Obtaining a public Google calendar link

If you are embedding a public Google calendar on your Dornsife WordPress site, make sure that calendar events use a color label with sufficient contrast.

This can be a bit tricky because Google's embedded calendars tend to display a different shade for the color label you actually select. Follow our steps below to meet color contrast requirements for web accessibility:

Quick guide

Go to https://calendar.google.com.
At the top right, click the Gear icon and select Settings.
In the left menu, click the calendar name. Then, select Integrate calendar.
Click Customize.
In the left menu, click the checkboxes to select or deselect the calendars you want to display.
Hover to the right of the calendar name and click the Options icon.
Select a preset color. Refer to the following image for colors that meet the contrast requirement:
- Why do so few preset colors meet accessibility guidelines? Google calendar tends to adjust the shade of the color label you actually select, and Google uses white text instead of black text for all-day calendar events.
- While it's possible to select a custom color label in the non-embedded version of Google calendar (https://calendar.google.com), these custom colors will change unpredictably in the embedded calendar, and there is no way to guarantee that the changed color will meet color contrast requirements.
At the top of the page, click the Copy icon to the right of the "Embed code" field. Each time you change a color label, you must click this icon to obtain the updated embed code.
Paste the embed code on your WordPress Page and save your changes to WordPress.

Detailed guide (with screenshots)

Go to https://calendar.google.com.
At the top right, click the Gear icon and select Settings.
In the left menu, click the calendar name. Then, select Integrate calendar.
Click Customize.
In the left menu, click the checkboxes to select or deselect the calendars you want to display.
Hover to the right of the calendar name and click the Options icon.
Select a preset color. Refer to the following image for colors that meet the contrast requirement:
- Why do so few preset colors meet accessibility guidelines? Google calendar tends to adjust the shade of the color label you actually select, and Google uses white text instead of black text for all-day calendar events.
- While it's possible to select a custom color label in the non-embedded version of Google calendar (https://calendar.google.com), these custom colors will change unpredictably in the embedded calendar, and there is no way to guarantee that the changed color will meet color contrast requirements.
At the top of the page, click the Copy icon to the right of the "Embed code" field. Each time you change a color label, you must click this icon to obtain the updated embed code.
Paste the embed code on your WordPress Page and save your changes to WordPress.

References

For this guide, the following resources were consulted: