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 |
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 |
| 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”