Color Accessibility

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. 
  • 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.

ColorNameHEX valueRGB value
Tennessee Orange#FF8200RGB (255,130,0)
Smoky Mountain Gray#4B4B4BRGB (75, 75, 75)
Smoky Mountain X#333333RGB (51, 51, 51)
Ripple X#0A5771RGB (10, 87, 113)
White#FFFFFFRGB (255, 255, 255)
Pebble X#F3EFECRGB (243, 239, 236)
Pebble#D5D1CBRGB (213, 209, 203)
Interstate X#ECF0F3RGB (236, 240, 243)
Mockingbird#222943RGB (34, 41, 67)

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

White/UTK Torch

#FFFFFF on #E65A33
AA Large (Headings Only)
3.6
UTK Torch/White

#E65A33 on #FFFFFF
AA Large (Headings Only)
3.6
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