Color

Use colors purposefully to communicate how things function in the interface. This helps us create visual patterns that can make interacting with our product easier and more predictable for users.

The University Libraries adheres to the University Relations color guidelines.

Primary colors

  • 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

Too similar to BTAA University of Michigan or 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

Bad contrast

  • Light gold
    White

    Contrast ratio 1.31:1

  • Gold
    White

    Contrast ratio 1.5:1

  • Dark gold
    White

    Contrast ratio 1.74:1

  • Dark maroon
    Text dark gray

    Contrast ratio 1.14:1

  • Maroon
    Text dark gray

    Contrast ratio 1.1:1

  • Light maroon
    Text dark gray

    Contrast ratio 1.32:1

  • Dark maroon
    Text gray

    Contrast ratio 2.09:1

  • Maroon
    Text gray

    Contrast ratio 1.65:1

  • Light maroon
    Text gray

    Contrast ratio 1.37:1

  • Text dark gray
    Text gray

    Contrast ratio 1.83:1

  • Dark maroon
    Link dark blue

    Contrast ratio 1.06:1

  • Maroon
    Link dark blue

    Contrast ratio 1.18:1

  • Light maroon
    Link dark blue

    Contrast ratio 1.42:1

  • Dark gold
    Link blue

    Contrast ratio 4.2:1

  • Dark maroon
    Link light blue

    Contrast ratio 1.96:1

  • Maroon
    Link light blue

    Contrast ratio 1.55:1

  • Light maroon
    Link light blue

    Contrast ratio 1.29:1

  • Dark gold
    Link light blue

    Contrast ratio 4.2:1

  • Text dark gray
    Link dark blue

    Contrast ratio 1.07:1

  • Text gray
    Link dark blue

    Contrast ratio 1.96:1

  • Text dark gray
    Link blue

    Contrast ratio 1.72:1

  • Text gray
    Link blue

    Contrast ratio 1.06:1

  • Text dark gray
    Link light blue

    Contrast ratio 4.2:1

  • Text gray
    Link light blue

    Contrast ratio 2.29:1