About colors

For a full spectrum of color palettes available in Wave, see color tokens docs.

All functional color tokens are embedded in Wave Core as CSS custom properties or variables, so you can use them to style elements:

.element {
  background: var(--color-background-neutral-moderate);
  color: var(--color-foreground-neutral);
}

In addition to the CSS variables, a few common helper classes for defining fills, text and border colors are exposed (see below).

Fill helpers

A background fill can be applied using one of the .fill-<alias> classes. Background fill helpers also set the appropriate text color for a given background fill.

In some instances (such as with label component) you may want to override default fill text color, using text color helpers.

Combination of a background fill and a text color must meet the minimum color contrast requirements. For level AA compliance, text should should have a contrast ratio of at least 4.5.

In the top right corner of the swatches, you can find perfectly valid color combinations that adhere to level AAA or level AA standards. In case you aren't sure whether your particular combination meets the requirements, please test it using the Color accessibility checker provided at the bottom of this page.

Neutral

fill-neutral--minimal

fg-neutral AAA
fg-neutral--moderate AAA
fg-neutral--subtle AA

#ffffff

fill-neutral--subtle

fg-neutral AAA
fg-neutral--moderate AAA
fg-neutral--subtle AA

#f9fafb

fill-neutral--moderate

fg-neutral AAA
fg-neutral--moderate AAA
fg-neutral--subtle AA

#f3f5f6

fill-neutral

fg-neutral AAA
fg-neutral--moderate AAA

#e6ebec

fill-neutral--bold

fg-inverse AA

#53747b

fill-neutral--strong

fg-inverse AAA

#223f44

fill-neutral--contrast

fg-inverse AAA

#082d35

Accent

fill-accent--minimal

fg-neutral AAA
fg-neutral--moderate AAA
fg-neutral--subtle AA
fg-accent AAA
fg-accent--moderate AA

#f8fbfc

fill-accent--subtle

fg-neutral AAA
fg-neutral--moderate AAA
fg-neutral--subtle AA
fg-accent AAA
fg-accent--moderate AA

#f3f8f9

fill-accent

fg-neutral AAA
fg-neutral--moderate AAA
fg-accent AAA
fg-accent--moderate AA

#e8f1f3

fill-accent--bold

fg-neutral AA

#5b9ba9

fill-accent--strong

fg-inverse AA

#157084

Danger

fill-danger--subtle

fg-neutral AAA
fg-neutral--moderate AAA
fg-neutral--subtle AA
fg-danger AAA

#fff7f8

fill-danger

fg-neutral AAA
fg-neutral--moderate AAA
fg-neutral--subtle AA
fg-danger AAA

#ffeff0

fill-danger--strong

fg-inverse AA

#df001f

Warning

fill-warning--subtle

fg-neutral AAA
fg-neutral--moderate AAA
fg-neutral--subtle AA
fg-warning AA

#fff9ed

fill-warning

fg-neutral AAA
fg-neutral--moderate AAA
fg-neutral--subtle AA
fg-warning AA

#fff2da

fill-warning--strong

fg-neutral AA
fg-neutral--moderate AA

#dc9f00

Success

fill-success--subtle

fg-neutral AAA
fg-neutral--moderate AAA
fg-neutral--subtle AA
fg-success AAA

#eeffef

fill-success

fg-neutral AAA
fg-neutral--moderate AAA
fg-neutral--subtle AA
fg-success AAA

#dbffdf

fill-success--strong

fg-inverse AA

#1d873c

Info

fill-info--subtle

fg-neutral AAA
fg-neutral--moderate AAA
fg-neutral--subtle AA
fg-info AAA

#f0fcff

fill-info

fg-neutral AAA
fg-neutral--moderate AAA
fg-neutral--subtle AA
fg-info AAA

#e1f9ff

fill-info--strong

fg-inverse AA

#008299

Text color helpers

If you just want to change the text color (useful when combined with the nav component for example), use the color helpers below:

fg-neutral

fg-neutral--moderate

fg-neutral--subtle

fg-accent

fg-accent--moderate

fg-link

fg-info

fg-info--moderate

fg-success

fg-success--moderate

fg-warning

fg-warning--moderate

fg-danger

fg-danger--moderate

fg-inverse

fg-disabled

Border color helpers

For changing the color of borders, you can use the color helpers below:

bdr-neutral--subtle

bdr-neutral--moderate

bdr-neutral

bdr-neutral--bold

bdr-neutral--contrast

bdr-accent--moderate

bdr-accent

bdr-accent--bold

bdr-accent--strong

bdr-info

bdr-info--bold

bdr-info--strong

bdr-success

bdr-success--bold

bdr-success--strong

bdr-warning

bdr-warning--bold

bdr-warning--strong

bdr-danger

bdr-danger--bold

bdr-danger--strong

Color accessibility checker

Test if given color pair meets the minimum color contrast requirements

Select a pair of colors from Volue's colour tokens below to verify whether it is good for accessibility.
For more details about the accessiblity requirements see WCAG 2.0 on contrast ratio.