Pairings & contrast

Every ratio below is measured with the WCAG relative-luminance formula, not estimated. Two pairings are banned outright, and both involve mauve meeting a light surface.

Measured pairings

• Cream on Plum15.39:1
  AAA

  The default on every dark section.

• Plum on Cream15.39:1
  AAA

  The default on every light section.

• Sand on Plum9.05:1
  AAA

  The quiet accent on dark. Good for rules and small labels.

• Mauve on Plum7.30:1
  AAA

  The accent pairing. Italic phrases, section labels, icons on dark.

• Deep Mauve on Cream7.22:1
  AAA

  The accent on light. Use this everywhere Mauve would have gone on cream.

• Plum on Mauve7.30:1
  AAA

  The only approved way to put text on a mauve fill.

• Text Secondary on Cream5.57:1
  AA

  Fine for supporting copy. Not for anything below 14px.

• Mauve on Cream2.11:1
  Never

  This is why Deep Mauve exists. Mauve on a light surface is unreadable — the single most common mistake in this system.

• Cream on Mauve2.11:1
  Never

  Light text on a mauve fill. If you see it, it is a bug.