--- title: Color date: 2024-01-29T07:16:00-08:00 author: Max Escher canonical_url: "https://designsystem.umd.edu/foundation/color" section: Foundation --- [Foundation](https://designsystem.umd.edu/foundation) # 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. ![color wheel with UMD colors](https://umd-design.transforms.svdcdn.com/production/component/colors.jpg?w=1728&h=1117&auto=compress%2Cformat&fit=crop&dm=1731426359&s=44210a11500af0014acfde41b16ab0c4) ## 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 0/100/84/4 Maryland Gold - Hex \#ffd200 - RGB 255/210/0 - CMYK 0/16/100/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 0/100/84/4 ## 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. [Check color contrast](https://webaim.org/resources/contrastchecker/) Select Contrast Comparisons Black Text White Text Dark Gray Text Maryland Red Text Maryland Gold Text Black Text on various backgrounds 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 White Text on various backgrounds Combination Ratio Result Notes Combination White Text on Black background Ratio 21 : 1 Result Pass Notes Recommended Combination White Text on Darker Gray background Ratio 15.52 : 1 Result Pass Notes Recommended Combination White Text on Maryland Red background Ratio 4.75 : 1 Result Pass Notes Used in a few components like Button, Icon Cards, and Hero. Combination White Text on Dark Gray background Ratio 9.58 : 1 Result Pass Notes Not Recommended Combination White Text on Maryland Gold background Ratio 1.5 : 1 Result Fail Notes Not Recommended Combination White Text on Lightest Gray background Ratio 1.04 : 1 Result Fail Notes Not Recommended Combination White Text on Lighter Gray background Ratio 1.12 : 1 Result Fail Notes Not Recommended Combination White Text on Light Gray background Ratio 1.24 : 1 Result Fail Notes Not Recommended Combination White Text on Medium Gray background Ratio 4 : 1 Result Fail Notes Not Recommended Dark Gray Text on various backgrounds Combination Ratio Result Notes Combination Dark Gray Text on White background Ratio 9.58 : 1 Result Pass Notes Recommended Combination Dark Gray Text on Lightest Gray background Ratio 9.18 : 1 Result Pass Notes Used in a few components like Carousel and People Card. Combination Dark Gray Text on Lighter Gray background Ratio 8.48 : 1 Result Pass Notes Not Recommended Combination Dark Gray Text on Light Gray background Ratio 7.68 : 1 Result Pass Notes Not Recommended Combination Dark Gray Text on Maryland Gold background Ratio 6.6 : 1 Result Pass Notes Not Recommended Combination Dark Gray Text on Maryland Red background Ratio 2.01 : 1 Result Fail Notes Not Recommended Combination Dark Gray Text on Medium Gray background Ratio 2.39 : 1 Result Fail Notes Not Recommended Combination Dark Gray Text on Darker Gray background Ratio 1.61 : 1 Result Fail Notes Not Recommended Combination Dark Gray Text on Black background Ratio 2.19 : 1 Result Fail Notes Not Recommended Maryland Red Text on various backgrounds Combination Ratio Result Notes Combination Maryland Red Text on White background Ratio 4.75 : 1 Result Pass Notes Recommended Combination Maryland Red Text on Lightest Gray background Ratio 4.55 : 1 Result Pass Notes Recommended Combination Maryland Red Text on Maryland Gold background Ratio 3.3 : 1 Result Fail Notes Not Recommended Combination Maryland Red Text on Lighter Gray background Ratio 4.21 : 1 Result Fail Notes Not Recommended Combination Maryland Red Text on Light Gray background Ratio 3.81 : 1 Result Fail Notes Not Recommended Combination Maryland Red Text on Medium Gray background Ratio 1.81 : 1 Result Fail Notes Not Recommended Combination Maryland Red Text on Dark Gray background Ratio 2.01 : 1 Result Fail Notes Not Recommended Combination Maryland Red Text on Darker Gray background Ratio 3.26 : 1 Result Fail Notes Not Recommended Combination Maryland Red Text on Black background Ratio 4.41 : 1 Result Fail Notes Not Recommended Maryland Gold Text on various backgrounds Combination Ratio Result Notes Combination Maryland Gold Text on Black background Ratio 14.47 : 1 Result Pass Notes Recommended Combination Maryland Gold Text on Darker Gray background Ratio 10.69 : 1 Result Pass Notes Recommended Combination Maryland Gold Text on Dark Gray background Ratio 6.6 : 1 Result Pass Notes Not Recommended Combination Maryland Gold Text on Maryland Red background Ratio 3.3 : 1 Result Fail Notes Not Recommended Combination Maryland Gold Text on Medium Gray background Ratio 2.75 : 1 Result Fail Notes Not Recommended Combination Maryland Gold Text on White background Ratio 1.5 : 1 Result Fail Notes Not Recommended Combination Maryland Gold Text on Lighter Gray background Ratio 1.39 : 1 Result Fail Notes Not Recommended Combination Maryland Gold Text on Lighter Gray background Ratio 1.28 : 1 Result Fail Notes Not Recommended Combination Maryland Gold Text on Light Gray background Ratio 1.16 : 1 Result Fail Notes Not Recommended