1. Home ›
  2. Overview ›
  3. Colors

Colors

View documentation

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

Horizontal strip of global color palette

  1. Brand Blue is used for the global header and footer, headings, and backgrounds.
  2. Brand Gold is primarily used for accents.
  3. Sky Blue is used for buttons and backgrounds.
  4. 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.

Horizontal strip of global color palette with space for sub-branding colors.

  1. At least 75% of a site’s color palette should consist of Notre Dame Brand colors.
  2. Up to 25% of a site’s color palette may include secondary colors.

Visit the Sub-Branding page for more information.