Contrast
We should always aim to follow WCAG guidelines in terms of contrast between foreground colors and background colors.
Always use desired foreground/background color pairings.
Text Contrast
We should always aim for a 4.5:1 contrast ratio between text and background.
Graphic assets contrast
We should always aim for a 3:1 contrast ratio between graphical assets and background.
We classify a graphical asset as:
- An icon
- A vector shape
- Illustrations
- Input Borders
Checking contrast on Figma
While using Spark colors correctly will mitigate contrast issues almost completely we highly recommend using Figma’s own contrast tool to check if a pair of colors passes the contrast check.
Focus outline color
Focus is an essential part of accessibility, for all focus outlines we should always use border/focus .
Learn more about border colors below.