�Ǹ�Թ�

Welcome to our August issue of the Accessibility Minute Newsletter! This newsletter is produced by the CU �Ǹ�Թ� Digital Accessibility Office (DAO) and covers one accessibility skill or topic per month. Please visit the DAO website to access past newsletters. As always, thank you for taking a minute (or two) to read.

Color Contrast

Circling back to our “back to basics” series, this month’s newsletter will discuss color contrast. Color contrast is the difference in brightness between foreground and background colors. For example, the black text in this newsletter is the foreground color, and the background color is white.

Accessible color contrast means there is a high enough contrast ratio between the text color, or other meaningful content, and the color directly behind it. High contrast is critical for individuals who are colorblind or have low vision, and beneficial to all. High contrast color combinations are easier to distinguish, while lower color contrast can cause people to miss important information or strain their eyes when reading your content, especially in high-glare or bright environments.

How Do I Know if I'm Using Accessible Color Combinations?

A common misconception is that you can tell what has sufficient color contrast with your eyes alone, but what may look good to you may not be accessible to others interacting with your content. Your color combination must meet certain contrast ratios as outlined in the Web Content Accessibility Guidelines (WCAG) to ensure it is accessible and perceivable to all.

Standard text requires a minimum ratio of 4.5:1 for 18pt text or below and 14pt text when bolded. 

Large text requires a minimum ratio of 3:1 for 18pt text or above and 14pt text when bolded.

Standard text requires a minimum ratio of 7:1 for 18pt text or below and 14pt text when bolded.

Large text requires a minimum ratio of 4.5:1 for 18pt text or above and 14pt text when bolded.

Please note that we prefer the term "standard text" (referring to 18pt text or below), but we want to acknowledge that other sources may use terms such as "regular" and "normal" text.

Now, you may be thinking, "How do I figure out what color combinations meet these guidelines?" Fortunately, there are tools that can easily test your color combinations against WCAG requirements, which we recommend using regularly.

Color Contrast Checkers

The software is free and available to download on Windows and Mac.

The is a free web-based tool if you prefer not to download applications on your device.

Both tools provide WCAG AA and AAA results, letting you know whether they pass or fail contrast ratio guidelines. To determine the exact colors you need to evaluate, these tools allow you to input the HEX code, RGB (Red, Green, Blue) values, or utilize an eyedropper feature.

We strongly encourage you to enter the HEX code or RGB value of each color, as it will give you the most accurate result. While the eyedropper tool may be easy to use, it can lead to inaccurate results. Text edges gradually blend in with the background color to visually look smoother, and the eyedropper only grabs a single pixel of the color. Because of this, you are at higher risk of inaccurate results depending on which pixel you select. Visit our Color Contrast resource guide for directions on how to find the HEX code in Microsoft and Google platforms.

Additional Resources

• Visit for additional color contrast information, non-text contrast guidance, and more.
• Learn more about , such as meaningful graphic elements like checkmarks, warning symbols, icons, etc.
• For those of you affiliated with CU �Ǹ�Թ�, check out our Accessible CU Branded Color Combinations guide to ensure your content is perceivable and readable to everyone on campus.

DAO News

The recently released teaser for CU �Ǹ�Թ�'s 150th Anniversary Film is now available with audio description! A video with audio description has a secondary audio track that describes meaningful visual content during the pauses in the original audio track. Audio description helps to ensure video content is accessible and that all viewers can access important visual information. Audio description provided through partnership of CU �Ǹ�Թ� Strategic Relations and Communications and the Digital Accessibility Office. To watch the teaser with audio description, follow these steps:

1. Navigate to "Settings" (the gear icon) in the Vimeo video controls.
2. Under the "Audio" option, switch the track from “Original Audio” to "English (Audio Descriptions)”