Colors

Brand Colors

Sass: $c-white
Hex: #ffffff
Color Class: .u-c-white
Background Class: .u-bg-c-white
Fill Class: .u-fill-c-white
Sass: $c-black
Hex: #111111
Color Class: .u-c-black
Background Class: .u-bg-c-black
Fill Class: .u-fill-c-black
Sass: $c-charcoal
Hex: #4D4D4F
Color Class: .u-c-charcoal
Background Class: .u-bg-c-charcoal
Fill Class: .u-fill-c-charcoal
Sass: $c-charcoal-light
Hex: #F3F3F3
Color Class: .u-c-charcoal-light
Background Class: .u-bg-c-charcoal-light
Fill Class: .u-fill-c-charcoal-light
Sass: $c-reef
Hex: #C34737
Color Class: .u-c-reef
Background Class: .u-bg-c-reef
Fill Class: .u-fill-c-reef
Sass: $c-reef-light
Hex: #FDF4F0
Color Class: .u-c-reef-light
Background Class: .u-bg-c-reef-light
Fill Class: .u-fill-c-reef-light
Sass: $c-teal
Hex: #006D85
Color Class: .u-c-teal
Background Class: .u-bg-c-teal
Fill Class: .u-fill-c-teal
Sass: $c-teal-light
Hex: #F1FAFF
Color Class: .u-c-teal-light
Background Class: .u-bg-c-teal-light
Fill Class: .u-fill-c-teal-light
Sass: $c-plum
Hex: #720565
Color Class: .u-c-plum
Background Class: .u-bg-c-plum
Fill Class: .u-fill-c-plum
Sass: $c-plum-light
Hex: #F8F2FC
Color Class: .u-c-plum-light
Background Class: .u-bg-c-plum-light
Fill Class: .u-fill-c-plum-light
Sass: $c-ocean
Hex: #1B776C
Color Class: .u-c-ocean
Background Class: .u-bg-c-ocean
Fill Class: .u-fill-c-ocean
Sass: $c-ocean-light
Hex: #F0F9F6
Color Class: .u-c-ocean-light
Background Class: .u-bg-c-ocean-light
Fill Class: .u-fill-c-ocean-light
Sass: $c-navy
Hex: #2B384D
Color Class: .u-c-navy
Background Class: .u-bg-c-navy
Fill Class: .u-fill-c-navy
Sass: $c-navy-light
Hex: #FFFBF0
Color Class: .u-c-navy-light
Background Class: .u-bg-c-navy-light
Fill Class: .u-fill-c-navy-light

Color Theme Variables

Color theme colors are dependant on css variables which will change based on page and scroll patterns. More defined in the color themes documentation.

Sass: $ct-bkg
CSS Variable: var(--ct-bkg)
Color Class: .u-c-ct-bkg
Background Class: .u-bg-ct-bkg
Fill Class: .u-fill-ct-bkg
Sass: $ct-txt
CSS Variable: var(--ct-txt)
Color Class: .u-c-ct-txt
Background Class: .u-bg-ct-txt
Fill Class: .u-fill-ct-txt
Sass: $ct-dark
CSS Variable: var(--ct-dark)
Color Class: .u-c-ct-dark
Background Class: .u-bg-ct-dark
Fill Class: .u-fill-ct-dark
Sass: $ct-light
CSS Variable: var(--ct-light)
Color Class: .u-c-ct-light
Background Class: .u-bg-ct-light
Fill Class: .u-fill-ct-light
Sass: $ct-text-on-light
CSS Variable: var(--ct-text-on-light)
Color Class: .u-c-ct-text-on-light
Background Class: .u-bg-ct-text-on-light
Fill Class: .u-fill-ct-text-on-light
Sass: $ct-text-on-dark
CSS Variable: var(--ct-text-on-dark)
Color Class: .u-c-ct-text-on-dark
Background Class: .u-bg-ct-text-on-dark
Fill Class: .u-fill-ct-text-on-dark

Color Accessibility Checks - Matrix

About the Tests

Color ratios are tested for AA and AAA.

  • Tests marked as "Pass" meet the minimum contrast ratio for both WCAG 2.1 AA and AAA standards.

  • Tests marked as "DNP" do not meet the minimum contrast ratio for both WCAG 2.1 AA and AAA standards.

  • Tests with "AA" only pass WCAG 2.1 AA standards.

Text Color

$c-white

#FFFFFF

$c-black

#111111

$c-charcoal

#4D4D4F

$c-charcoal-light

#F3F3F3

$c-reef

#C34737

$c-reef-light

#FDF4F0

$c-teal

#006D85

$c-teal-light

#F1FAFF

$c-plum

#720565

$c-plum-light

#F8F2FC

$c-ocean

#1B776C

$c-ocean-light

#F0F9F6

$c-navy

#2B384D

$c-navy-light

#FFFBF0

$c-white

#FFFFFF

Test on self skipped

Sample Text

Pass

Contrast ratio 18.8

Sample Text

Pass

Contrast ratio 8.4

Sample Text

DNP

Contrast ratio 1.1

Sample Text

AA

Contrast ratio 4.9

Sample Text

DNP

Contrast ratio 1

Sample Text

AA

Contrast ratio 5.9

Sample Text

DNP

Contrast ratio 1

Sample Text

Pass

Contrast ratio 10.9

Sample Text

DNP

Contrast ratio 1

Sample Text

AA

Contrast ratio 5.3

Sample Text

DNP

Contrast ratio 1

Sample Text

Pass

Contrast ratio 11.8

Sample Text

DNP

Contrast ratio 1

$c-black

#111111

Sample Text

Pass

Contrast ratio 18.8

Test on self skipped

Sample Text

DNP

Contrast ratio 2.2

Sample Text

Pass

Contrast ratio 17

Sample Text

DNP

Contrast ratio 3.8

Sample Text

Pass

Contrast ratio 17.4

Sample Text

DNP

Contrast ratio 3.1

Sample Text

Pass

Contrast ratio 17.8

Sample Text

DNP

Contrast ratio 1.7

Sample Text

Pass

Contrast ratio 17.1

Sample Text

DNP

Contrast ratio 3.5

Sample Text

Pass

Contrast ratio 17.6

Sample Text

DNP

Contrast ratio 1.5

Sample Text

Pass

Contrast ratio 18.2

$c-charcoal

#4D4D4F

Sample Text

Pass

Contrast ratio 8.4

Sample Text

DNP

Contrast ratio 2.2

Test on self skipped

Sample Text

Pass

Contrast ratio 7.6

Sample Text

DNP

Contrast ratio 1.7

Sample Text

Pass

Contrast ratio 7.7

Sample Text

DNP

Contrast ratio 1.4

Sample Text

Pass

Contrast ratio 7.9

Sample Text

DNP

Contrast ratio 1.2

Sample Text

Pass

Contrast ratio 7.6

Sample Text

DNP

Contrast ratio 1.5

Sample Text

Pass

Contrast ratio 7.8

Sample Text

DNP

Contrast ratio 1.4

Sample Text

Pass

Contrast ratio 8.1

$c-charcoal-light

#F3F3F3

Sample Text

DNP

Contrast ratio 1.1

Sample Text

Pass

Contrast ratio 17

Sample Text

Pass

Contrast ratio 7.6

Test on self skipped

Sample Text

DNP

Contrast ratio 4.4

Sample Text

DNP

Contrast ratio 1

Sample Text

AA

Contrast ratio 5.3

Sample Text

DNP

Contrast ratio 1

Sample Text

Pass

Contrast ratio 9.8

Sample Text

DNP

Contrast ratio 1

Sample Text

AA

Contrast ratio 4.8

Sample Text

DNP

Contrast ratio 1

Sample Text

Pass

Contrast ratio 10.6

Sample Text

DNP

Contrast ratio 1

$c-reef

#C34737

Sample Text

AA

Contrast ratio 4.9

Sample Text

DNP

Contrast ratio 3.8

Sample Text

DNP

Contrast ratio 1.7

Sample Text

DNP

Contrast ratio 4.4

Test on self skipped

Sample Text

AA

Contrast ratio 4.5

Sample Text

DNP

Contrast ratio 1.2

Sample Text

AA

Contrast ratio 4.6

Sample Text

DNP

Contrast ratio 2.2

Sample Text

DNP

Contrast ratio 4.4

Sample Text

DNP

Contrast ratio 1

Sample Text

AA

Contrast ratio 4.5

Sample Text

DNP

Contrast ratio 2.4

Sample Text

AA

Contrast ratio 4.7

$c-reef-light

#FDF4F0

Sample Text

DNP

Contrast ratio 1

Sample Text

Pass

Contrast ratio 17.4

Sample Text

Pass

Contrast ratio 7.7

Sample Text

DNP

Contrast ratio 1

Sample Text

AA

Contrast ratio 4.5

Test on self skipped

Sample Text

AA

Contrast ratio 5.4

Sample Text

DNP

Contrast ratio 1

Sample Text

Pass

Contrast ratio 10

Sample Text

DNP

Contrast ratio 1

Sample Text

AA

Contrast ratio 4.9

Sample Text

DNP

Contrast ratio 1

Sample Text

Pass

Contrast ratio 10.9

Sample Text

DNP

Contrast ratio 1

$c-teal

#006D85

Sample Text

AA

Contrast ratio 5.9

Sample Text

DNP

Contrast ratio 3.1

Sample Text

DNP

Contrast ratio 1.4

Sample Text

AA

Contrast ratio 5.3

Sample Text

DNP

Contrast ratio 1.2

Sample Text

AA

Contrast ratio 5.4

Test on self skipped

Sample Text

AA

Contrast ratio 5.6

Sample Text

DNP

Contrast ratio 1.8

Sample Text

AA

Contrast ratio 5.4

Sample Text

DNP

Contrast ratio 1.1

Sample Text

AA

Contrast ratio 5.5

Sample Text

DNP

Contrast ratio 1.9

Sample Text

AA

Contrast ratio 5.7

$c-teal-light

#F1FAFF

Sample Text

DNP

Contrast ratio 1

Sample Text

Pass

Contrast ratio 17.8

Sample Text

Pass

Contrast ratio 7.9

Sample Text

DNP

Contrast ratio 1

Sample Text

AA

Contrast ratio 4.6

Sample Text

DNP

Contrast ratio 1

Sample Text

AA

Contrast ratio 5.6

Test on self skipped

Sample Text

Pass

Contrast ratio 10.3

Sample Text

DNP

Contrast ratio 1

Sample Text

AA

Contrast ratio 5

Sample Text

DNP

Contrast ratio 1

Sample Text

Pass

Contrast ratio 11.1

Sample Text

DNP

Contrast ratio 1

$c-plum

#720565

Sample Text

Pass

Contrast ratio 10.9

Sample Text

DNP

Contrast ratio 1.7

Sample Text

DNP

Contrast ratio 1.2

Sample Text

Pass

Contrast ratio 9.8

Sample Text

DNP

Contrast ratio 2.2

Sample Text

Pass

Contrast ratio 10

Sample Text

DNP

Contrast ratio 1.8

Sample Text

Pass

Contrast ratio 10.3

Test on self skipped

Sample Text

Pass

Contrast ratio 9.9

Sample Text

DNP

Contrast ratio 2

Sample Text

Pass

Contrast ratio 10.1

Sample Text

DNP

Contrast ratio 1

Sample Text

Pass

Contrast ratio 10.5

$c-plum-light

#F8F2FC

Sample Text

DNP

Contrast ratio 1

Sample Text

Pass

Contrast ratio 17.1

Sample Text

Pass

Contrast ratio 7.6

Sample Text

DNP

Contrast ratio 1

Sample Text

DNP

Contrast ratio 4.4

Sample Text

DNP

Contrast ratio 1

Sample Text

AA

Contrast ratio 5.4

Sample Text

DNP

Contrast ratio 1

Sample Text

Pass

Contrast ratio 9.9

Test on self skipped

Sample Text

AA

Contrast ratio 4.8

Sample Text

DNP

Contrast ratio 1

Sample Text

Pass

Contrast ratio 10.7

Sample Text

DNP

Contrast ratio 1

$c-ocean

#1B776C

Sample Text

AA

Contrast ratio 5.3

Sample Text

DNP

Contrast ratio 3.5

Sample Text

DNP

Contrast ratio 1.5

Sample Text

AA

Contrast ratio 4.8

Sample Text

DNP

Contrast ratio 1

Sample Text

AA

Contrast ratio 4.9

Sample Text

DNP

Contrast ratio 1.1

Sample Text

AA

Contrast ratio 5

Sample Text

DNP

Contrast ratio 2

Sample Text

AA

Contrast ratio 4.8

Test on self skipped

Sample Text

AA

Contrast ratio 5

Sample Text

DNP

Contrast ratio 2.1

Sample Text

AA

Contrast ratio 5.2

$c-ocean-light

#F0F9F6

Sample Text

DNP

Contrast ratio 1

Sample Text

Pass

Contrast ratio 17.6

Sample Text

Pass

Contrast ratio 7.8

Sample Text

DNP

Contrast ratio 1

Sample Text

AA

Contrast ratio 4.5

Sample Text

DNP

Contrast ratio 1

Sample Text

AA

Contrast ratio 5.5

Sample Text

DNP

Contrast ratio 1

Sample Text

Pass

Contrast ratio 10.1

Sample Text

DNP

Contrast ratio 1

Sample Text

AA

Contrast ratio 5

Test on self skipped

Sample Text

Pass

Contrast ratio 11

Sample Text

DNP

Contrast ratio 1

$c-navy

#2B384D

Sample Text

Pass

Contrast ratio 11.8

Sample Text

DNP

Contrast ratio 1.5

Sample Text

DNP

Contrast ratio 1.4

Sample Text

Pass

Contrast ratio 10.6

Sample Text

DNP

Contrast ratio 2.4

Sample Text

Pass

Contrast ratio 10.9

Sample Text

DNP

Contrast ratio 1.9

Sample Text

Pass

Contrast ratio 11.1

Sample Text

DNP

Contrast ratio 1

Sample Text

Pass

Contrast ratio 10.7

Sample Text

DNP

Contrast ratio 2.1

Sample Text

Pass

Contrast ratio 11

Test on self skipped

Sample Text

Pass

Contrast ratio 11.4

$c-navy-light

#FFFBF0

Sample Text

DNP

Contrast ratio 1

Sample Text

Pass

Contrast ratio 18.2

Sample Text

Pass

Contrast ratio 8.1

Sample Text

DNP

Contrast ratio 1

Sample Text

AA

Contrast ratio 4.7

Sample Text

DNP

Contrast ratio 1

Sample Text

AA

Contrast ratio 5.7

Sample Text

DNP

Contrast ratio 1

Sample Text

Pass

Contrast ratio 10.5

Sample Text

DNP

Contrast ratio 1

Sample Text

AA

Contrast ratio 5.2

Sample Text

DNP

Contrast ratio 1

Sample Text

Pass

Contrast ratio 11.4

Test on self skipped