Picking a colour does not replace contrast and other access checks

What it is

Choosing a pleasant colour is not the same as that text or icon being readable and discriminable on the real background. Picking is not checking: contrast, colour-blind separability, and not relying on colour alone all have to happen beside or beyond the picker. Tapping a brand primary off a palette only finishes “what the value is.” The picker knows nothing about white type on that button, error red, or neighbouring series on a chart.

A picker may embed a contrast hint, but the hint is about this foreground/background pair. It must not impersonate a pass for the page or the whole theme.

Why it happens

Contrast is a function of a pair plus type size and weight, not a property of one colour. The picker operates on one value; a check needs at least two values and their roles (body, large title, non-text graphic). A vivid preview in the panel generalises to “it will be clear in the UI” — the preview sits on neutral grey or a checker; the real ground is a photo, a neighbouring chip, or a translucent layer. Colour-blind separability is also a relation: two series colours can each be legal and still collapse under deuteranopia.

Research uses contrast formulae, colour-blind simulations, and reading tasks with real low vision. None of those measurements happen automatically inside “I tapped a chip.” An extra panel of measurements helps if the object is named: which string, which chart, which impairment. A vague green light is more dangerous than no hint, because it ends the questioning.

Studying it

Compute contrast on chosen pairs, and run colour-blind simulations on adjacent category colours. Reading tasks ask people under low vision or a filter to read strings at real type size and to name chart series.

Independent variables: whether the picker shows contrast, whether preview ground equals use ground, presence of a colour-blind simulation. Dependent variables: whether the final pair meets a readable threshold, confusion rate of series under simulation, whether people stop adjusting too early.

The signature miss is “green in the panel, fail on the page”: preview conditions were not use conditions.

Where it stops holding

Decorative washes that carry no text or state have different contrast demands; do not apply body-text thresholds to a background wash. A forced high-contrast theme may lock illegal values inside the picker — that is product policy, and it must still say which pair of roles is locked. Dynamic grounds (captions on video) make a single pick unable to guarantee contrast for the whole clip; strokes, scrims, or per-frame checks sit outside the picker. Colour-as-information (red/green alone for right/wrong) fails “not colour only” even when contrast is fine; the picker cannot invent the extra encoding.

Applying it

• Show contrast beside the picker for a named pair of roles, with the type-size assumption stated; do not hang a page-level green light.
• Offer a colour-blind preview for chart series; on failure change mark or line type, not only saturation.
• Keep “colour is not the only code” on states and legends: right/wrong needs an icon or words, not only a recolour.
• How to check: paste the picked colour into a real UI screenshot and view type and legends in greyscale and under a colour-blind filter. Pretty in the preview, lost under the filter: the picker replaced the check.

Related

• Within the group: E3.15.1 A colour picker needs both a preset palette and a custom value · E3.15.2 Numeric input should convert among hex and common colour models · E3.15.3 The picked colour needs an immediate swatch preview
• Adjacent: F3.03 Colour and Luminance Hierarchy · E3.01 Checkboxes
• Search terms: contrast ratio · colour not the only cue · color picker accessibility