The checked state needs high contrast
Aliases: checked contrast · tick visibility · selected-state contrast
What it is
A checkbox’s checked state must separate from unchecked at a glance: the tick, the fill, or the stroke has to pull “this is true” out of “this is not yet true.” A pale grey mark, a fill that only shifts hue, or a hairline tick lets people read selected items as empty. The fight here is state discriminability, not box size or whether the label is clickable.
Why it happens
The tick is a tiny interior figure sitting on a border and a page background. People parse it by figure–ground contrast, not by knowing “there is a checkbox here.” If the stroke approaches the fill colour, or checkedness is only a saturation nudge, the state drops out of working memory once the gaze leaves the row; the next scan is a guess.
Unchecked still needs a visible border, or “empty” collapses into “no control.” Checked contrast is a second layer on top of a still-visible empty box; if both layers are weak, a permission list will be under-ticked or double-ticked. Colour-blind users cannot take red versus green as the only difference; luminance has to stand on its own.
Studying it
Use a brief visual-search task: mark which items are ticked under a time limit. Materials span contrast levels — a high-contrast tick, a faint tick, hue-only change, stroke-weight-only change.
Independent variables: tick-to-fill contrast, extra fill or not, hue as sole cue, number of items. Dependent variables: misses (checked read as empty), false alarms (empty read as checked), regressions, gap between confidence and accuracy.
Repeat in greyscale. A sharp drop means the checked state was borrowing hue and the luminance channel was idle.
Where it stops holding
An indeterminate mark (dash or partial fill) must differ from both empty and ticked; if indeterminate looks like a tick, high contrast will make “some children” read as “all.” Disabled-but-checked items are usually dimmed on purpose to say “you cannot change this”; do not restore full contrast and make them look live. A white tick on dark fill and a dark tick on light fill do not survive a simple opacity swap. In print or projection, brand-coloured fill without a shape cue disappears; the tick’s geometry must remain readable in one ink.
Applying it
- Give the tick (or equivalent interior mark) a stable lightness gap against the box fill; do not rely on hue alone.
- Keep a clear border for the empty state so it does not melt into the page; then add an interior mark that cannot be ignored.
- Scan the list in greyscale and under a colour-blindness simulation; checked versus empty must still split.
- How to check: at real type size and spacing, ask someone to count the ticked items in two seconds. Each miscount is a contrast failure, not inattention.