Skip to main content

Web Colors and Fonts

Web Colors

To meet web accessibility standards, text on the web must be in high contrast to its background (7:1 for body text, 4.5:1 for headings).

 

Body text:
#111111

 

White:
#FFFFFF

 

Off-White:
#F7F7F7

 

Gold fade:
#E9E4DA
Alternative to gray for backgrounds and horizontal rules

 

Light Gray:
#E4E4E4
Used as page background color and horizontal rules between sections

 

Gray:
#A5ACAF
Used sparingly as a highlight color

 

Navy:
#001344
Standard navy hexadecimal

 

Aqua:
#005d90
Web highlight color used for interactive elements (links, buttons)

 

Gold:
#D9AC63
Standard gold hexadecimal

 

Yellow:
#FCB116
Used sparingly as a highlight color

 

Teal:
#00B5AD
Used sparingly as a highlight color

 

Green:
#009A4E
Used sparingly as a highlight color

 

Rust:
#BA4F26
Used sparingly as a highlight color

Acceptable Color Combinations of Text on Color Backgrounds

It is paramount when editing your site that the text on the page has sufficient contrast to pass accessibility standards. Please see below for the acceptable colors of text on different background colors.

To test your own colors, you can use the WebAIM Contrast Checker.

Black Background – #111111

  • Body Text – #111111 – Unacceptable
  • White – #ffffff – Acceptable
  • Off-White – #f7f7f7 – Acceptable
  • Gold Fade – #e9e4da – Acceptable
  • Light Gray – #e4e4e4 – Acceptable
  • Gray – #a5acaf – Acceptable
  • Navy – #001344 – Unacceptable
  • Aqua – #005d90 – Unacceptable
  • Gold – #d9ac63 – Acceptable
  • Yellow – #fcb116 – Acceptable
  • Teal – #00b5ad – Acceptable
  • Green – #009a4e – Acceptable
  • Rust – #ba4f26 – Unacceptable

White Background – #ffffff

  • Body Text – #111111 – Acceptable
  • White – #ffffff – Unacceptable
  • Off-White – #f7f7f7 – Unacceptable
  • Gold Fade – #e9e4da – Unacceptable
  • Light Gray – #e4e4e4 – Unacceptable
  • Gray – #a5acaf – Unacceptable
  • Navy – #001344 – Acceptable
  • Aqua – #005d90 – Acceptable
  • Gold – #d9ac63 – Unacceptable
  • Yellow – #fcb116 – Unacceptable
  • Teal – #00b5ad – Unacceptable
  • Green – #009a4e – Unacceptable
  • Rust – #ba4f26 – Acceptable

Off-White Background – #f7f7f7

This is the default page background color.

  • Body Text – #111111 – Acceptable
  • White – #ffffff – Unacceptable
  • Off-White – #f7f7f7 – Unacceptable
  • Gold Fade – #e9e4da – Unacceptable
  • Light Gray – #e4e4e4 – Unacceptable
  • Gray – #a5acaf – Unacceptable
  • Navy – #001344 – Acceptable
  • Aqua – #005d90 – Acceptable
  • Gold – #d9ac63 – Unacceptable
  • Yellow – #fcb116 – Unacceptable
  • Teal – #00b5ad – Unacceptable
  • Green – #009a4e – Unacceptable
  • Rust – #ba4f26 – Acceptable

Gold Fade Background – #e9e4da

  • Body Text – #111111 – Acceptable
  • White – #ffffff – Unacceptable
  • Off-White – #f7f7f7 – Unacceptable
  • Gold Fade – #e9e4da – Unacceptable
  • Light Gray – #e4e4e4 – Unacceptable
  • Gray – #a5acaf – Unacceptable
  • Navy – #001344 – Acceptable
  • Aqua – #005d90 – Acceptable
  • Gold – #d9ac63 – Unacceptable
  • Yellow – #fcb116 – Unacceptable
  • Teal – #00b5ad – Unacceptable
  • Green – #009a4e – Unacceptable
  • Rust – #ba4f26 – Unacceptable

Light Gray Background – #e4e4e4

  • Body Text – #111111 – Acceptable
  • White – #ffffff – Unacceptable
  • Off-White – #f7f7f7 – Unacceptable
  • Gold Fade – #e9e4da – Unacceptable
  • Light Gray – #e4e4e4 – Unacceptable
  • Gray – #a5acaf – Unacceptable
  • Navy – #001344 – Acceptable
  • Aqua – #005d90 – Acceptable
  • Gold – #d9ac63 – Unacceptable
  • Yellow – #fcb116 – Unacceptable
  • Teal – #00b5ad – Unacceptable
  • Green – #009a4e – Unacceptable
  • Rust – #ba4f26 – Unacceptable

Gray Background – #a5acaf

  • Body Text – #111111 – Acceptable
  • White – #ffffff – Unacceptable
  • Off-White – #f7f7f7 – Unacceptable
  • Gold Fade – #e9e4da – Unacceptable
  • Light Gray – #e4e4e4 – Unacceptable
  • Gray – #a5acaf – Unacceptable
  • Navy – #001344 – Acceptable
  • Aqua – #005d90 – Unacceptable
  • Gold – #d9ac63 – Unacceptable
  • Yellow – #fcb116 – Unacceptable
  • Teal – #00b5ad – Unacceptable
  • Green – #009a4e – Unacceptable
  • Rust – #ba4f26 – Unacceptable

Navy Background – #001344

  • Body Text – #111111 – Unacceptable
  • White – #ffffff – Acceptable
  • Off-White – #f7f7f7 – Acceptable
  • Gold Fade – #e9e4da – Acceptable
  • Light Gray – #e4e4e4 – Acceptable
  • Gray – #a5acaf – Acceptable
  • Navy – #001344 – Unacceptable
  • Aqua – #005d90 – Unacceptable
  • Gold – #d9ac63 – Acceptable
  • Yellow – #fcb116 – Acceptable
  • Teal – #00b5ad – Acceptable
  • Green – #009a4e – Acceptable
  • Rust – #ba4f26 – Unacceptable

Aqua Background – #005d90

  • Body Text – #111111 – Unacceptable
  • White – #ffffff – Acceptable
  • Off-White – #f7f7f7 – Acceptable
  • Gold Fade – #e9e4da – Acceptable
  • Light Gray – #e4e4e4 – Acceptable
  • Gray – #a5acaf – Unacceptable
  • Navy – #001344 – Unacceptable
  • Aqua – #005d90 – Unacceptable
  • Gold – #d9ac63 – Unacceptable
  • Yellow – #fcb116 – Unacceptable
  • Teal – #00b5ad – Unacceptable
  • Green – #009a4e – Unacceptable
  • Rust – #ba4f26 – Unacceptable

Gold Background – #d9ac63

  • Body Text – #111111 – Acceptable
  • White – #ffffff – Unacceptable
  • Off-White – #f7f7f7 – Unacceptable
  • Gold Fade – #e9e4da – Unacceptable
  • Light Gray – #e4e4e4 – Unacceptable
  • Gray – #a5acaf – Unacceptable
  • Navy – #001344 – Acceptable
  • Aqua – #005d90 – Unacceptable
  • Gold – #d9ac63 – Unacceptable
  • Yellow – #fcb116 – Unacceptable
  • Teal – #00b5ad – Unacceptable
  • Green – #009a4e – Unacceptable
  • Rust – #ba4f26 – Unacceptable

Yellow Background – #fcb116

  • Body Text – #111111 – Acceptable
  • White – #ffffff – Unacceptable
  • Off-White – #f7f7f7 – Unacceptable
  • Gold Fade – #e9e4da – Unacceptable
  • Light Gray – #e4e4e4 – Unacceptable
  • Gray – #a5acaf – Unacceptable
  • Navy – #001344 – Acceptable
  • Aqua – #005d90 – Unacceptable
  • Gold – #d9ac63 – Unacceptable
  • Yellow – #fcb116 – Unacceptable
  • Teal – #00b5ad – Unacceptable
  • Green – #009a4e – Unacceptable
  • Rust – #ba4f26 – Unacceptable

Teal Background – #00b5ad

  • Body Text – #111111 – Acceptable
  • White – #ffffff – Unacceptable
  • Off-White – #f7f7f7 – Unacceptable
  • Gold Fade – #e9e4da – Unacceptable
  • Light Gray – #e4e4e4 – Unacceptable
  • Gray – #a5acaf – Unacceptable
  • Navy – #001344 – Acceptable
  • Aqua – #005d90 – Unacceptable
  • Gold – #d9ac63 – Unacceptable
  • Yellow – #fcb116 – Unacceptable
  • Teal – #00b5ad – Unacceptable
  • Green – #009a4e – Unacceptable
  • Rust – #ba4f26 – Unacceptable

Green Background – #009a4e

  • Body Text – #111111 – Acceptable
  • White – #ffffff – Unacceptable
  • Off-White – #f7f7f7 – Unacceptable
  • Gold Fade – #e9e4da – Unacceptable
  • Light Gray – #e4e4e4 – Unacceptable
  • Gray – #a5acaf – Unacceptable
  • Navy – #001344 – Acceptable
  • Aqua – #005d90 – Unacceptable
  • Gold – #d9ac63 – Unacceptable
  • Yellow – #fcb116 – Unacceptable
  • Teal – #00b5ad – Unacceptable
  • Green – #009a4e – Unacceptable
  • Rust – #ba4f26 – Unacceptable

Rust Background – #ba4f26

  • Body Text – #111111 – Unacceptable
  • White – #ffffff – Acceptable
  • Off-White – #f7f7f7 – Acceptable
  • Gold Fade – #e9e4da – Unacceptable
  • Light Gray – #e4e4e4 – Unacceptable
  • Gray – #a5acaf – Unacceptable
  • Navy – #001344 – Unacceptable
  • Aqua – #005d90 – Unacceptable
  • Gold – #d9ac63 – Unacceptable
  • Yellow – #fcb116 – Unacceptable
  • Teal – #00b5ad – Unacceptable
  • Green – #009a4e – Unacceptable
  • Rust – #ba4f26 – Unacceptable

Web Fonts

Standard font stack: Proxima Nova, Helvetica, Myriad, Arial, sans-serif

Alternate font stack: Helvetica, Myriad, Arial, sans-serif

Web Logos

Last updated: 3/8/2021