Skip to content Skip to main navigation Report an accessibility issue

Contrast

Digital designers are encouraged to make UT colors prominent on their webpages. Reminder: those colors are orange, Smokey gray, and white.

Foreground text must have sufficient contrast with background colors. This includes text on images, background gradients, buttons, and other elements. Per system policy, all UT websites aim to meet WCAG 2.0 AA guidelines. This includes a required contrast ratio for text and images of text of at least 4.5:1. This applies to live (HTML) text and image text (such as text in banners, images, or graphics).

Text and background color combinations from the UT color palettes that meet this contrast ratio are presented on this page. If you still have questions, refer to WebAim’s color contrast checker.

The contrast ratio between text and its background should be at least 4.5:1. If your font is at least 24 pixels or 19 pixels bold, the minimum is 3:1. When designing, be sure to use a color checker to make sure you are within the tolerance.

LARGE TEXT

Normal Text

Figure 3. The normal text in this illustration meets the 4.5:1 ratio. The normal text is a darker gray (#767676). The larger text is lighter (#949494) and meets the ratio of 3:1. The color of the large text would fail if the font size were smaller or not bold.
Note: This example shows the minimum acceptable contrast for normal and large text.


Color and contrast tips

  1. Begin your design with high-contrast typography in mind. Don’t start with an airy hard-to-read typestyle that you fall in love with, only to find out at the end you have to change it to meet the guidelines.
  2. Do not “eyeball” the legibility of the text. Be sure to check it with the WebAIM tool–even for text on a background image.
  3. Our primary colors (Orange, White, and Smokey) should be used in every communication. The secondary colors should not overwhelm the design.
  4. Designers are encouraged to use sufficient contrast between text and its background to increase readability, particularly for low-vision users.
  5. Do not underline words that are not links.
Share Your Big Ideas
DON’T place typography over an image that does not meet contrast requirements.
Icon of hands sharing a light
DO use good color contrasts and a readable font size.
Share Your Big Ideas
DON’T place typography over a gradient with wide variations of contrast. Remember that contrast is calculated by the background color versus the foreground (text) color. One shade of gray will not work in all contexts. Part of this image is acceptable, but as the contrast decreases on the right, it fails.
Icon of hands sharing a light
DO place typography over solid or low variation of contrast graphics.
Share Your Big Ideas
DON’T use orange text in any web graphic. Orange against white or smokey does not meet color contrast requirements. If you must use text in an image, ensure that the color contrast for text meets minimum standards.
Icon of hands sharing a light
DO use high contrast text in web graphics, such as white or smokey or vice versa.

Return to Top