Skip to content
Skip design navigation
Etesie Alpha
Loading account
← Back to the color picker
Colors · Learn · Guide

Pair fills with their content color

The on- system gives every fill a matching foreground. Material calls the primary pair md.sys.color.primary and md.sys.color.on-primary. Use intended pairs so contrast survives source-color, scheme and contrast-setting changes.

The on- system · live from your themelightdark scheme
on-primary on primary
6.49 : 1intended pair7.74 : 1intended pair
on-primary-container on primary-container
7.25 : 1intended pair7.25 : 1intended pair
on-surface on surface
16.26 : 1intended pair14.27 : 1intended pair
primary on primary-container
5.01 : 1improper mapping5.50 : 1improper mapping

The last row is the classic mistake: two colors from the same palette that are near in tone. It might look fine today, then break the moment the scheme, contrast setting or source color changes. Intended pairs use tones far enough apart that they cannot collide.

The two numbers that matter
4.5 : 1

Body text

Normal-size reading text against its background (WCAG AA).

3 : 1

Large text & UI

Headlines, icons, functional borders and component boundaries.

—

Decoration

Dividers and hairlines such as outlineVariant carry no information — no minimum.

You rarely have to check these yourself — that's the point of the pairs. The Customize editor still shows the live ratio for every role, so you can verify overrides.