0.02 Design Guide: Color Palette

Color Palette

These are selections from the U-M’s recommended color palette: https://brand.umich.edu/design-resources/colors/
Alternates prefixed with “DC” are also included. For convenience and consistency, copy and paste the hex color codes below.

Transparent Background Color – in some cases you may want a transparent background for a type of block that will overlay a column with its own background image or color. Use this 8-character hex code: ffffff00 – any color code followed by two zeros (white, #ffffff, is a safe option).

Also see: Important Color Contrast Notes for Text below this chart.

U-M Blue: 00274c
Text: ffffff   
cca = 15.1: 1
 
U-M Maize: ffcb05
Text: 000000
cca = 13.8: 1
White: ffffff
Text: 000000 
cca = 21: 1
Arboretum Blue: 2f65a7
Text: ffffff
cca = 5.9: 1
Tappan Red: 9a3324
Text: ffffff
cca = 7.3: 1
DC Avocado: 536f5b
Text: ffffff
cca = 5.5: 1
DC Blue: 21779a
Text: ffffff   
cca = 5: 1
DC Sienna: 854632
Text: ffffff   
cca = 7.2: 1
Rackham Green: 75988d
Text: 000000   
cca = 6.6: 1
DC Sky: a8e4fe
Text: 000000   
cca = 15.2: 1
DC Coral: ffc4ae
Text: 000000   
cca = 13.8: 1 
DC Mint: c4e1c7
Text: 000000
cca = 14.9: 1
DC Grey: c6c4c3
Text: 000000
cca = 12: 1
DC Sand: f4eacf
Text: 000000
cca= 17.5: 1
DC Ice: bfcfe3
Text: 000000
cca = 13.2: 1

DC Glow: fff9c2
Text: 000000
cca =  19.6: 1

UMMA Tan: cfc096
Text: 000000
cca = 11.6: 1
DC Sage: b3bfa6
Text: 000000
cca = 10.9: 1
Angel Hall Ash: 989c97
Text: 000000
cca = 7.5: 1
DC Mocha: b4a68e
Text: 000000
cca = 8.8: 1
DC Arugula: 11746f
Text: ffffff
cca = 5.6: 1
Law Quad Stone: 655a52
Text: ffffff
cca = 6.7: 1
DC Gold: ba901e
Text: 000000
cca = 7.1: 1
Taubman Teal: 00b2a9
Text: 000000
cca = 7.9: 1
Matthei Violet: 575294
Text: ffffff
cca = 6.9: 1
DC Azure: 7cc8e6
Text: 000000
cca = 11.3: 1
DC Chocolate: 925f15
Text: ffffff
cca = 5.4: 1
A2 Amethyst: 702082
Text: ffffff
cca = 9.5: 1
DC Copper: d98a3f
Text: 000000
cca = 7.7: 1
Wave Field Green: a5a508
Text: 000000
cca = 8: 1 
Puma Black: 131516
Text: ffffff
cca = 18.3: 1
DC Red: c70000
Text: ffffff
cca = 6.1: 1

DC Mist: ebeaea
Text: 000000
cca = 17.5: 1

Black: 000000
Text: ffffff
cca = 21: 1
Ross Orange: d86018
Text: 000000
cca = 5.6: 1
 

 

Readability and Color Contrast Notes:

On the DC site it is recommend that we use the following color contrast ratings for accessible readability, based on “WCAG 2.0 G17 (1.4.6) Success Criteria: Text Contrast Standard” for “AAA” readability scoring*
https://www.w3.org/TR/WCAG20-TECHS/G17.html):

Minimum Color Contrast Score for regular weight (e.g., non-bold) text on a background color or image:
AAA score = 7 : 1 for text below 18 points (24px)
AAA score = 4.5 : 1 for text 18 points and above (24px)

DC web site default text size is 16px = 12pt. equivalent
DC web site H5 Heading size is 16px = 12 pt. equivalent

More here about DC type, text treatment and point to pixel size conversion:
https://www.dc.umich.edu/0-0-design-guide-for-editors/0-03-dc-design-guide-typography/

*“The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following: (Level AAA)

  • Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1;
  • Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
  • Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.”

To test color contrast, download (GitHub) the “Color Contrast Analyzer” free application: https://github.com/ThePacielloGroup/CCAe/releases/tag/v3.1.1 This app-based analyzer gives the same results and is easier and faster to use than the web-based “Color Palette Contrast Checker” at Deque.com: https://color-contrast-checker.deque.com/ which is referenced in Deque documentation such as the ITS “Deque Comply Manual for U-M”