Color

Use colors purposefully to communicate purpose of the content and interface. This helps us create visual patterns that can make interacting with our websites easier and more predictable.

Primary colors

The University Libraries adheres to the University Relations color guidelines.

  • dark maroon

    c-primary-dark #5b0013

  • maroon

    c-primary #7a0019

  • light maroon

    c-primary-light #900021

  • dark gold

    c-secondary-dark #ffb71e

  • gold

    c-secondary #ffcc33

  • light gold

    c-secondary-light c-secondary-light-text #ffde7a

Text

  • dark gray

    c-text #333333

  • gray

    c-text-light #5a5a5a

Backgrounds

  • light gray

    c-bg-light #fafafa

  • gray

    c-bg-medium #f0efee

Color pairings

Good combinations

Color contrast at WCAG 2 AAA for normal content, is 7:1.

  • Dark maroon
    White

    Contrast ratio 14.44:1

  • Maroon
    White

    Contrast ratio 11.4:1

  • Light maroon
    White

    Contrast ratio 9.51:1

  • Dark maroon
    Light gray

    Contrast ratio 13.83:1

  • Maroon
    Light gray

    Contrast ratio 10.92:1

  • Light maroon
    Light gray

    Contrast ratio 9.11:1

  • Dark maroon
    Gray

    Contrast ratio 12.57:1

  • Maroon
    Background gray

    Contrast ratio 9.92:1

  • Light maroon
    Background gray

    Contrast ratio 8.28:1

  • Dark maroon
    Light gold

    Contrast ratio 12.57:1

  • Maroon
    Light gold

    Contrast ratio 9.92:1

  • Light maroon
    Light gold

    Contrast ratio 7.23:1

  • Dark maroon
    Gold

    Contrast ratio 9.58:1

  • Maroon
    Gold

    Contrast ratio 7.56:1

  • Dark maroon
    Dark gold

    Contrast ratio 8.28:1

  • Text dark gray
    White

    Contrast ratio 12.63:1

  • Text dark gray
    Background light gray

    Contrast ratio 12.1:1

  • Text dark gray
    Background gray

    Contrast ratio 11:1

Large font only

Large font is either a bold 19px (or greater), or a normal weight 24px or larger. WCAG 2 AAA ratio must be at least 4.5:1.

  • Light maroon
    Gold

    Contrast ratio 6.31:1

  • Maroon
    Dark gold

    Contrast ratio 6.54:1

  • Light maroon
    Dark gold

    Contrast ratio 5.45:1

  • Text gray
    Background light gray

    Contrast ratio 6.6:1

  • Text gray
    Background gray

    Contrast ratio 6:1

  • Gold
    Link light blue

    Contrast ratio 4.86:1

  • Light gold
    Link light blue

    Contrast ratio 5.57:1

Avoid

These color pairings should be avoided because they are too similar to BTAA colleagues University of Michigan and Penn State.

  • Dark gold
    Link dark blue

    Contrast ratio 7.78:1

  • Gold
    Link dark blue

    Contrast ratio 9:1

  • Light gold
    Link dark blue

    Contrast ratio 10.32:1

  • Gold
    Link blue

    Contrast ratio 4.86:1

  • Light gold
    Link blue

    Contrast ratio 5.57:1