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

#f8fcfb

fill-neutral--moderate

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

#f2f9f8

fill-neutral

fg-neutral AAA
fg-neutral--moderate AAA

#e2ebe9

fill-neutral--bold

fg-inverse AA

#5d7570

fill-neutral--strong

fg-inverse AAA

#2e4540

fill-neutral--contrast

fg-inverse AAA

#091a16

Accent

fill-accent--subtle

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

#eefffc

fill-accent

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

#e3fffa

fill-accent--bold

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

#9fe3d7

fill-accent--strong

fg-inverse AA

#487d74

Danger

fill-danger--subtle

fg-neutral AAA
fg-neutral--moderate AAA
fg-danger AAA

#ffe8e0

fill-danger

fg-neutral AAA
fg-neutral--moderate AAA
fg-danger AAA

#ffd2c8

fill-danger--strong

fg-inverse AA

#d91c1c

Warning

fill-warning--subtle

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

#fffbe8

fill-warning

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

#fff6c7

fill-warning--strong

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

#deb900

Success

fill-success--subtle

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

#dfffe5

fill-success

fg-neutral AAA
fg-neutral--moderate AAA
fg-success AAA

#c6f2cd

fill-success--strong

fg-inverse AA

#008928

Info

fill-info--subtle

fg-neutral AAA
fg-neutral--moderate AAA
fg-info AAA

#e0f7ff

fill-info

fg-neutral AAA
fg-neutral--moderate AAA
fg-info AAA

#beefff

fill-info--strong

fg-inverse AA

#00769e

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-info

fg-info--moderate

fg-success

fg-success--moderate

fg-warning

fg-warning--moderate

fg-danger

fg-danger--moderate

fg-inverse

fg-brand

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

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.