A role for every colour

Create your color palette

Choose a background, text and accent. Bring them together in a preview, check their contrast, then take your four colours away as CSS or JSON.

01 · Compose

Four colours, four roles

Short or full HEX: #ABC or #AABBCC. Colours are opaque sRGB.

Background

Text

Accent

Text on accent

02 · See

A practical preview

Only this preview uses your colours. The tool’s controls retain their own contrast.

Correct the codes to display the palette and its contrast ratios.

The underlined link uses the Text role. The button pairs Accent with Text on accent.

03 · Check

Your palette’s contrast ratios

Ratios are rounded for display; thresholds use unrounded values. These results check colour pairs, not the accessibility of a complete interface.

Text / background

—

Normal text: AA at 4.5:1; AAA at 7:1.

Text / accent

—

Normal text: AA at 4.5:1; AAA at 7:1.

Accent / background

—

The 3:1 check applies only when this colour boundary is needed to identify a component or graphical object. Decorative accents do not always need this threshold.

04 · Take away

Keep your composition

CSS and JSON use the displayed colours, normalized to six-digit codes. JSON also includes the checked pairs and their ratios.

Palette CSS variables

What this check tells you

The WCAG method compares the relative luminance of two opaque sRGB surfaces. It does not measure aesthetic harmony, paint matching or print accuracy. Images, transparency, gradients, hover and focus states need additional checks.

Text can meet 4.5:1 while navigation, labels or other components still have accessibility problems.
The 3:1 threshold shown here concerns certain non-text elements; it does not replace the 4.5:1 threshold used for normal text.
Calculations and exports run in your browser. Your palette codes are not sent to our server or included in usage events.

WCAG text contrast method · Understanding non-text contrast