Colors
The color palette for the Notre Dame Theme was derived from the classic brand image of the Golden Dome against a blue sky.
Guidelines
- The Notre Dame Brand color palette should be the primary colors of the site. Any additional secondary and tertiary colors should account for no more than 25% of complete color usage on any given page.
- Brand Blue and Dark Gray are the only colors designated for headings when used within body copy. White may be used when the heading is displayed over a dark background. A softer Dark Gray is used for body copy.
- Color contrast of text must meet WCAG 2.0 level AA. This is a contrast level of 4.5:1 for normal text and 3:1 for large text, where large text is defined as 24px and larger, or 18.66px and larger when text is bold. (Contrast Checker tool)
Global Colors
- Brand Blue is used for the global header and footer, headings, and backgrounds.
- Brand Gold is primarily used for accents.
- Sky Blue is used for buttons and backgrounds.
- Various shades of Gray are used for body copy and backgrounds.
For additional reference material, visit the Colors & Typography page of the Documentation section.
Text Colors
- Headings: Brand Blue and Dark Gray are the only colors designated for headings when used within body copy. White may be used when the heading is displayed over a dark background. Keeping these colors consistent improves the scannability of the page and creates a common pattern from site to site.
- Body Copy: A softer Dark Gray is used for body copy. It improves readability by removing the harshness of black on white while still passing contrast requirements.
- Contrast: Text over a colored background needs to pass WCAG 2.0 level AA validation.
Accent Colors
Sub-branding colors may be added to augment the primary colors. When sub-branding colors are used, the main colors of the Web Theme should still make up a majority of a site’s color palette.
- At least 75% of a site’s color palette should consist of Notre Dame Brand colors.
- Up to 25% of a site’s color palette may include secondary colors.
Visit the Sub-Branding page for more information.