Color is an important asset in visual design, enhancing your message’s aesthetic and emotional impact. However, some people have difficulty perceiving color. People with partial sight often experience limited color vision, and many older people do not see color well. In addition, people using text-only, limited-color or monochrome displays and browsers will be unable to access digital content that is presented only in color.
The following guidelines will help ensure your content and designs reach everyone—regardless of their age or vision ability.
Color Contrast Guidelines:
All UT System websites and digital products are designed to meet the Web Content Accessibility Guidelines (WCAG) Level AA compliance—an international standard for usable design.
- Use a light background and dark text or a dark background and light text with 7:1 or higher contrast (Level AAA).
- For hyperlinks and other link elements use a color contrast ratio of 4.5:1 or higher (Level AA). This also ensures good contrast between clickable linked text, regular text, and the background color.
- Text that is 18 points/24 pixels or larger (or 14 pt/18 px or larger, if bold) must have a contrast of at least 3:1.
- Use approved UT System color themes or check combinations using a tool like WebAim’s colour contrast checker to verify your choice.
- Orange is the UT System’s brand color but avoid using this color for text on a white background (or white text on an orange background). Use orange for the UT icon and supporting elements (borders, decorative elements, icons, backgrounds with 80% black or darker text, etc.) in your designs.
- Make sure that any embedded charts or images of charts have the minimum contrast between elements (for example, bars, axes and labels).
- Do not rely on color alone to differentiate between different kinds of information. Make sure links and clickable elements are differentiated from regular text (underlines, navigation styles, or styled “buttons”) and design your charts and information graphs to work in grayscale or black and white first (using symbols or patterns to differentiate between information)
Web/Digital Palette
The following color palette has been carefully selected for accessible contrast and can serve as a base for all web and digital products.
| Color | Name | HEX value | RGB value |
|---|---|---|---|
| Tennessee Orange | #FF8200 | RGB (255,130,0) | |
| Smoky Mountain Gray | #4B4B4B | RGB (75, 75, 75) | |
| Smoky Mountain X | #333333 | RGB (51, 51, 51) | |
| Ripple X | #0A5771 | RGB (10, 87, 113) | |
| White | #FFFFFF | RGB (255, 255, 255) | |
| Pebble X | #F3EFEC | RGB (243, 239, 236) | |
| Pebble | #D5D1CB | RGB (213, 209, 203) | |
| Interstate X | #ECF0F3 | RGB (236, 240, 243) | |
| Mockingbird | #222943 | RGB (34, 41, 67) |
Recommended Themes
The following background/text combinations meet the the WCAG guidelines and are compliant with the UT System accessibility policy:
Key
Foreground/Background
Color values (in hexadecimals, #FFFFFF to #000000)
WCAG grade (AAA, AA or AALarge)
Contrast ratio
- AAA (highest contrast: 7:1 or higher. Best for long-form text)
- AA (Acceptable, meets minimum requirements: 4.5:1 or higher)
- AA Large (use only for headings/large text: 3:1 or higher. Minimum large text is 18pt/24px or 14pt/18px bold)
Web/Digital Palette Themes
| Smoky Mtn Gray/White #57595B on #FFFFFF AAA 7.0 |
White/Smoky Mtn Gray #FFFFFF on #57595B AAA 7.0 |
| Smoky Mtn X/White #333333 on #FFFFFF AAA 12.6 |
White/Smoky Mtn X #FFFFFF on #333333 AAA 12.6 |
| Ripple X/White #0A5771 on #FFFFFF AAA 8.0 |
White/Ripple X #FFFFFF on #0A5771 AAA 8.0 |
| Mockingbird/White #222943 on #FFFFFF AAA 14.3 |
White/Mockingbird #FFFFFF on #222943 AAA 14.3 |
| Smoky Mtn Gray/Pebble X #57595B on #F3EFEC AA 6.1 |
Pebble X/Smoky Mtn Gray #F3EFEC on #57595B AA 6.1 |
| Smoky Mtn X/Pebble X #333333 on #F3EFEC AAA 12.6 |
Pebble X/Smoky Mtn X #F3EFEC on #333333 AAA 12.6 |
| Ripple X/Pebble X #0A5771 on #F3EFEC AAA 8.0 |
Pebble X/Ripple X #F3EFEC on #0A5771 AAA 8.0 |
| Mockingbird/Pebble X #222943 on #F3EFEC AAA 14.3 |
Pebble X/Mockingbird #F3EFEC on #222943 AAA 14.3 |
| Smoky Mtn X/Pebble #333333 on #D5D1CB AAA 8.3 |
Pebble/Smoky Mtn X #D5D1CB on #333333 AAA 8.3 |
| Ripple X/Pebble #0A5771 on #D5D1CB AA 5.2 |
Pebble/Ripple X #D5D1CB on #0A5771 AA 5.2 |
| Mockingbird/Pebble #222943 on #D5D1CB AAA 9.4 |
Pebble/Mockingbird #D5D1CB on #222943 AAA 9.4 |
| Smoky Mtn Gray/Interstate X #57595B on #ECF0F3 AA 6.1 |
Interstate X/Smoky Mtn Gray #ECF0F3 on #57595B AA 6.1 |
| Smoky Mtn X/Interstate X #333333 on #ECF0F3 AAA 12.6 |
Interstate X/Smoky Mtn X #ECF0F3 on #333333 AAA 12.6 |
| Ripple X/Interstate X #0A5771 on #ECF0F3 AAA 8.0 |
Interstate X/Ripple X #ECF0F3 on #0A5771 AAA 8.0 |
| Mockingbird/Interstate X #222943 on #ECF0F3 AAA 14.3 |
Interstate X/Mockingbird #ECF0F3 on #222943 AAA 14.3 |
| Tennessee Orange/Smoky Mtn X #FF8200 on #333333 AA 5.0 |
Smoky Mtn X/Tennessee Orange #333333 on #FF8200 AA 5.0 |
| Tennessee Orange/Mockingbird #FF8200 on #222943 AA 5.7 |
Mockingbird/Tennessee Orange #222943 on #FF8200 AA 5.7 |
Extended Palette Themes
This is not an exhaustive list of color combinations that work together, but some themes we think look especially sharp. See the contrast grid for all acceptable combinations.
| White/Patina #FFFFFF on #008693 AA Large (Headings Only) 4.3 |
Patina/White #008693 on #FFFFFF AA Large (Headings Only) 4.3 |
| White/Ripple #FFFFFF on #4C728B AA 5.1 |
Ripple/White #4C728B on #FFFFFF AA 5.1 |
| Soybean/Forest #D4C74A on #1A4338 AA 6.3 |
Forest/Soybean #1A4338 on #D4C74A AA 6.3 |
| Mockingbird/Glade #222943 on #809B54 AA 4.5 |
Glade/Mockingbird #809B54 on #222943 AA 4.5 |
| Cedar/Soybean #57352A on #D4C74A AA 6.2 |
Soybean/Cedar #D4C74A on #57352A AA 6.2 |
| Beacon/Salamander #F8A838 on #8C4A1D AA Large (Headings Only) 3.4 |
Salamander/Beacon #8C4A1D on #F8A838 AA Large (Headings Only) 3.4 |
| Mockingbird/Spirit #222943 on #C7661E AA Large (Headings Only) 3.6 |
Spirit/Mockingbird #C7661E on #222943 AA Large (Headings Only) 3.6 |
| Ridge/Beacon #3E3A5D on #F8A838 AA 5.4 |
Beacon/Ridge #F8A838 on #3E3A5D AA 5.4 |
| Soybean/Ridge #D4C74A on #3E3A5D AA 6.1 |
Ridge/Soybean #3E3A5D on #D4C74A AA 6.1 |
| White/Iris #FFFFFF on #79698E AA 4.9 |
Iris/White #79698E on #FFFFFF AA 4.9 |
Using Campus Colors with Text
| Tennessee Orange/Smoky Mtn X #FF8200 on #333333 AA 5.0 |
Smoky Mtn X/Tennessee Orange #333333 on #FF8200 AA 5.0 |
| Mockingbird/UTC Gold #112E51 on #FDB736 AA 6.9 |
UTC Gold/Mockingbird #FDB736 on #112E51 AA 6.9 |
| White/UT Southern #FFFFFF on #C8102E AA 5.9 |
UT Southern Red/White #C8102E on #FFFFFF AA 5.9 |
| White/UTM Navy #FFFFFF on #0A2342 AAA 15.8 |
UTM Navy/White #0A2342 on #FFFFFF AAA 15.8 |
| White/UTHSC Green #FFFFFF on #11553E AAA 8.8 |
UTHSC Green/White #11553E on #FFFFFF AAA 8.8 |
Refer to the following links for further guidance: