Color Contrast

In digital environments, color plays a big role in accessibility  –  the greater the contrast, the better the readability. CU Boulder offers edited color formulas to our master palette for optimal levels of readability across web and media products.

Our digital color formulas have been created to provide opportunities for greater contrast to meet W3C’s Web Content Accessibility Guideline (WCAG) AA level color contrast standards.

The palette has been customized for print and digital applications. In general terms, the medium of a deliverable will determine which color specification to use. For projects that span both print and digital processes, color formulas and usage should be customized with the final use in mind. Below are guidelines and best practices to meet the required contrast with text and hyperlinks.

Text Color Contrast Ratios

4.5:1 Contrast Ratio
Normal-sized text in digital applications, such as 12pt text, requires a 4.5:1 contrast ratio. Only certain colors from our digital color formulas achieve a 4.5:1 contrast ratio. For lighter colors, such as gold and neutrals, use black text to achieve a 4.5:1 ratio.

3:1 Contrast Ratio
Larger text in digital applications, such as 14pt bold or 18pt regular or larger, only requires a 3:1 contrast ratio. Some of our digital color formulas, such as tan and light gray, can only achieve a 3:1 contrast ratio and should not be used with normal-sized text.

Accessible Brand Color Contrast Combinations – Text

Note: The Block Section block offers a more open ended text to background configuration. The following color contrast combinations are not accessible. White text on gold, tan or light blue background. Black text on dark gray background.

Hyperlink Color Contrast Ratios

Accessible Brand Color Contrast Combinations – Hyperlink Text

Accessible Brand Color Contrast Combinations for Hyperlink Text

Non-accessible Brand Color Contrast Combinations – Hyperlink Text

Non-accessible Brand Color Contrast Combinations for Hyperlink Text