Accessibility

The spark color system was created with accessibility as a core practice.
When defining a new or novel color combination, especially text, this must be done with accessibility in mind.

Color helps communicate hierarchy, meaning, and state across the interface. For accessibility, color choices must provide sufficient contrast and should never be the only way information is conveyed.

Relevant WCAG Criteria

1.4.3 – Contrast (Minimum) (AA)

Text must have sufficient contrast against its background.

Normal text: 4.5:1

Large text: 3:1

1.4.11 – Non-text Contrast (AA)

Icons, borders, and other meaningful visual elements must have sufficient contrast against adjacent colors.

Minimum 3:1 contrast ratio

1.4.1 – Use of Color (A)

Color must not be the only way to communicate meaning, status, or state.

Accessibility Guidance

Use approved color pairings

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.

Validate text contrast

Text should maintain a minimum contrast ratio of 4.5:1 against its background.

Text contrast ratio against any background should always be 4.5:1 or higher.

Validate graphical asset 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

Graphical assets' contrast ratio against any background should always be 3.1:1 or higher.

Verify contrast when needed

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.

Use the designated focus color

Focus is an essential part of accessibility, for all focus outlines we should always use border/focus .

Focus outlines are an essential part of navigation and accessibility.

Common Issues

Custom foreground/background pairings that fail contrast requirements

Low-contrast icons or borders

Color used as the only indicator of meaning or status

Custom focus styles instead of the designated focus token

Quick Checklist

✅ Text meets minimum contrast requirements

✅ Icons and graphical assets meet minimum contrast requirements

✅ Approved foreground/background pairings are used

✅ Focus indicators use the designated focus token

✅ Meaning is not communicated by color alone

Learn more about border colors below.

Border colors

Something looks broken on this site?

Report it to the Design System team here!