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) 

Color 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

The color “Text” (#333333) defined in the UT System color palette is a value between UT System Black and UT Gray. There are several more accessible color combinations with the bright colors with this darker shade of gray.


UT System Color Palette

Black/White

#000000 on #FFFFFF
AAA
21.0
White/Black

#FFFFFF on #000000
AAA
21.0
Text/White

#333333 on #FFFFFF
AAA
12.63
White/Text

#FFFFFF on #333333
AAA
12.63
Gray/White

#57595B on #FFFFFF
AAA
7.03
White/Gray

#FFFFFF on #57595B
AAA
7.03
UTM Navy/White

#0A2342 on #FFFFFF
AAA
15.77
White/UTM Navy

#FFFFFF on #0A2342
AAA
15.77
UTC Blue/White

#00376B on #FFFFFF
AAA
11.94 
White/UTC Blue

#FFFFFF on #00376B
AAA
11.94
UTHSC Green/White

#11553E on #FFFFFF
AAA
8.78
White/UTHSC Green

#FFFFFF on #11553E
AAA
8.78
Rose/White

#D60059 on #FFFFFF
AA
5.29
White/Rose

#FFFFFF on #D60059
AA
5.29
Teal/White

#007D8A on #FFFFFF
AA
4.88
White/Teal

#FFFFFF on #007D8A
AA
4.88
UTK Torch/White

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

#FFFFFF on #E65A33
AA Large (Headings Only)
3.57
UT Orange/Text

#FF8200 on #333333
AA
8.45
Text/UT Orange

#333333 on #FF8200
AA
8.45
Daffodil/Text

#EBA800 on #333333
AA
6.10
Text/Daffodil

#333333 on #EBA800
AA
6.10
Spring/Text

#80BC00 on #333333
AA
5.08
Text/Spring

#333333 on #80BC00
AA
5.08
UT Orange/Black

#FF8200 on #000000
AAA
8.45
Black/UT Orange

#000000 on #FF8200
AAA
8.45
Daffodil/Black

#EBA800 on #000000
AAA
10.13
Black/Daffodil

#000000 on #EBA800
AAA
10.13
Spring/Black

#80BC00 on #000000
AAA
9.11
Black/Spring

#000000 on #80BC00
AAA
9.11
UTK Torch/Black

#E65A33 on #000000
AA
5.87
Black/UTK Torch

#000000 on #E65A33
AA
5.87
UT Orange/UTM Navy

#FF8200 on #0A2342
AA
6.34
UTM Navy/UT Orange

#0A2342 on #FF8200
AA
6.34
Daffodil/UTM Navy

#EBA800 on #0A2342
AAA
7.61
UTM Navy/Daffodil

#0A2342 on #EBA800
AAA
7.61
Spring/UTM Navy

#80BC00 on #0A2342
AA
6.84
UTM Navy/Spring

#0A2342 on #80BC00
AA
6.84
UTK Torch/UTM Navy

#E65A33 on #0A2342
AA Large (Headings Only)
4.41
UTM Navy/UTK Torch

#0A2342 on #E65A33
AA Large (Headings Only)
4.41
Daffodil/UTC Blue

#EBA800 on #00376B
AA
5.76
UTC Blue/Daffodil

#00376B on #EBA800
AA
5.76
Spring/UTC Blue

#80BC00 on #00376B
AA
5.18
UTC Blue/Spring

#00376B on #80BC00
AA
5.18
Daffodil/UTHSC Green

#EBA800 on #11553E
AA Large (Headings Only)
4.24
UTHSC Green/Daffodil

#11553E on #EBA800
AA Large (Headings Only)
4.24
Spring/UTHSC Green

#80BC00 on #11553E
AA Large (Headings Only)
3.81
UTHSC Green/Spring

#11553E on #80BC00
AA Large (Headings Only)
3.81
UT Orange/UTHSC Green

#FF8200 on #11553E
AA Large (Headings Only)
3.53
UTHSC Green/UT Orange

#11553E on #FF8200
AA Large (Headings Only)
3.53