Color

This skill holds the colour rules that apply on every screen. It covers contrast, role tokens, translucent neutrals, dark mode and what the accent is for.

Ratios are exact, measured on screen

The contrast ratios here are exact and apply in every theme. A ratio is read from the colour the screen draws, never guessed from a token's name. A ratio under the threshold is a finding in any style.

Searching for an existing token belongs to reuse. color-scheme, theme-color, the theme switch and status shown by colour alone belong to defaults. Whether a colour should be there at all belongs to restraint.

Body text clears 4.5:1

Text under 24px, or under 18.66px when bold, meets 4.5:1 against what sits behind it. Larger text meets 3:1. Placeholders and secondary text count, and disabled controls do not. #999 text on white, at 2.8:1, is color-text-contrast.

Field edges and icons clear 3:1

The edge that shows where a field is, a toggle's track and an icon that carries meaning meet 3:1 against their surround. A field whose only edge is a #e5e5e5 border on white, at 1.3:1, is color-ui-contrast. Dividers and the ring on a floating surface are decoration and exempt.

Measure the colour on screen