Color
The University of Maryland's core brand colors are red, white, black, and gold. Inspired by the Maryland state flag, these colors reflect our role as Maryland's flagship university.
Primary palette
Although it is encouraged to use UMD brand colors in balance, the red and yellow in the palette can be overwhelming on screen. Red elements are strongly associated with danger or an alert. For this reason, red and yellow are used primarily as accent colors as well as in the global header.
Maryland Red
- Hex #e21833
- RGB 226/24/51
- CMYK 5/100/87/1
Maryland Gold
- Hex #ffd200
- RGB 255/210/0
- CMYK 1/16/99/0
White
- Hex #ffffff
- RGB 255/255/255
- CMYK 0/0/0/0
Black
- Hex #000000
- RGB 0/0/0
- CMYK 0/0/0/100
Neutral palette
In addition to white and black, the Design System uses an expanded neutral palette with other grays.
Lightest Gray
- Hex #fafafa
- RGB 250/250/250
- CMYK 0/0/0/2
Lighter Gray
- Hex #f1f1f1
- RGB 241/241/241
- CMYK 0/0/0/5
Light Gray
- Hex #e6e6e6
- RGB 230/230/230
- CMYK 0/0/0/10
Medium Gray
- Hex #757575
- RGB 117/117/117
- CMYK 0/0/0/54
Dark Gray
- Hex #454545
- RGB 69/69/69
- CMYK 0/0/0/73
Darker Gray
- Hex #242424
- RGB 36/36/36
- CMYK 0/0/0/86
Backgrounds:
- Light background colors: Lighter Gray, Lightest Gray, and White.
- Dark background colors: Darker Gray and Black.
Gray borders
Light Gray, Medium Gray and Dark Gray are used for decorative borders.
Light Gray
- Hex #e6e6e6
- RGB 230/230/230
- CMYK 0/0/0/10
Medium Gray
- Hex #757575
- RGB 117/117/117
- CMYK 0/0/0/54
Darker Gray
- Hex #242424
- RGB 36/36/36
- CMYK 0/0/0/86
Text on light backgrounds
In general, Dark Gray is used for body copy on white background, while Black is used for titles, headlines, and some text. Red can be used in alert messaging and hover states.
Dark Gray
- Hex #454545
- RGB 69/69/69
- CMYK 0/0/0/73
Black
- Hex #000000
- RGB 0/0/0
- CMYK 0/0/0/100
Maryland Red
- Hex #e21833
- RGB 226/24/51
- CMYK 5/100/87/1
Contrast
Maryland is committed to meeting Web Content Accessibility Guidelines (WCAG) 2.0 Level AA standards. Please use the guide below to identify type color and background combinations that are compliant.
Color contrast is very important to legibility. Be sure to take special care with reverse type and type overlays, especially if your audience tends to be middle-aged or older.
To be WCAG Level AA compliant: the contrast ratio must be at least 4.5:1 for normal text and 3:1 for large text. To be Level AAA compliant: the contrast ratio must be at least 7:1 for normal text and 4.5:1 for large text. Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.
| Combination | Ratio | Result | Notes |
|---|---|---|---|
|
Combination
Black Text on White background
|
Ratio
21 : 1
|
Result
Pass
|
Notes
Recommended |
|
Combination
Black Text on Lightest Gray background
|
Ratio
20.11 : 1
|
Result
Pass
|
Notes
Recommended |
|
Combination
Black Text on Lighter Gray background
|
Ratio
18.59 : 1
|
Result
Pass
|
Notes
Used in a few components like Banner-Calendar and Carousel |
|
Combination
Black Text on Maryland Gold background
|
Ratio
14.47 : 1
|
Result
Pass
|
Notes
Used in a few components like Banner-Promo |
|
Combination
Black Text on Light Gray background
|
Ratio
16.82 : 1
|
Result
Pass
|
Notes
Not Recommended |
|
Combination
Black Text on Maryland Red background
|
Ratio
4.4 : 1
|
Result
Fail
|
Notes
Not Recommended |
|
Combination
Black Text on Medium Gray background
|
Ratio
3.2 : 1
|
Result
Fail
|
Notes
Not Recommended |
|
Combination
Black Text on Dark Gray background
|
Ratio
2.19 : 1
|
Result
Fail
|
Notes
Not Recommended |
|
Combination
Black Text on Darker Gray background
|
Ratio
1.35 : 1
|
Result
Fail
|
Notes
Not Recommended |