$c-white
#ffffff
.u-c-white
.u-bg-c-white
.u-fill-c-white
$c-black
#111111
.u-c-black
.u-bg-c-black
.u-fill-c-black
$c-charcoal
#4D4D4F
.u-c-charcoal
.u-bg-c-charcoal
.u-fill-c-charcoal
$c-charcoal-light
#F3F3F3
.u-c-charcoal-light
.u-bg-c-charcoal-light
.u-fill-c-charcoal-light
$c-reef
#C34737
.u-c-reef
.u-bg-c-reef
.u-fill-c-reef
$c-reef-light
#FDF4F0
.u-c-reef-light
.u-bg-c-reef-light
.u-fill-c-reef-light
$c-teal
#006D85
.u-c-teal
.u-bg-c-teal
.u-fill-c-teal
$c-teal-light
#F1FAFF
.u-c-teal-light
.u-bg-c-teal-light
.u-fill-c-teal-light
$c-plum
#720565
.u-c-plum
.u-bg-c-plum
.u-fill-c-plum
$c-plum-light
#F8F2FC
.u-c-plum-light
.u-bg-c-plum-light
.u-fill-c-plum-light
$c-ocean
#1B776C
.u-c-ocean
.u-bg-c-ocean
.u-fill-c-ocean
$c-ocean-light
#F0F9F6
.u-c-ocean-light
.u-bg-c-ocean-light
.u-fill-c-ocean-light
$c-navy
#2B384D
.u-c-navy
.u-bg-c-navy
.u-fill-c-navy
$c-navy-light
#FFFBF0
.u-c-navy-light
.u-bg-c-navy-light
.u-fill-c-navy-light
Color theme colors are dependant on css variables which will change based on page and scroll patterns. More defined in the color themes documentation.
$ct-bkg
var(--ct-bkg)
.u-c-ct-bkg
.u-bg-ct-bkg
.u-fill-ct-bkg
$ct-txt
var(--ct-txt)
.u-c-ct-txt
.u-bg-ct-txt
.u-fill-ct-txt
$ct-dark
var(--ct-dark)
.u-c-ct-dark
.u-bg-ct-dark
.u-fill-ct-dark
$ct-light
var(--ct-light)
.u-c-ct-light
.u-bg-ct-light
.u-fill-ct-light
$ct-text-on-light
var(--ct-text-on-light)
.u-c-ct-text-on-light
.u-bg-ct-text-on-light
.u-fill-ct-text-on-light
$ct-text-on-dark
var(--ct-text-on-dark)
.u-c-ct-text-on-dark
.u-bg-ct-text-on-dark
.u-fill-ct-text-on-dark
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
|