Contrast Grid / Colour wall
Dark Mode Contrast Checklist
Tune dark interfaces for readable text, visible surfaces and comfortable hierarchy without turning every element into maximum white on black.
Dark mode is not a colour inversion. It needs a controlled luminance ladder, explicit surface hierarchy and component states that work on several dark backgrounds. Excessive contrast can be tiring while insufficient contrast hides structure.
Build a dark surface ladder
Choose a base background, raised surface and stronger overlay with enough separation to communicate grouping. Borders and shadows behave differently on dark colours; tonal steps and spacing often carry more reliable hierarchy.
Avoid pure-white overload
Primary text can be slightly reduced from pure white while still exceeding contrast requirements. Secondary text must remain readable, not merely fashionable grey. Keep the numeric ratio attached to each intended text role.
Re-evaluate saturated accents
Bright blues, greens and magentas can vibrate on dark backgrounds or fail when used as text on a lighter selected state. Test accent text, fills, focus rings and icons independently rather than reusing one brand token everywhere.
Check media and system behaviour
Logos, screenshots, code blocks and charts may have their own backgrounds. Test browser form controls, autofill, selection, reduced transparency and forced colours. A theme toggle should expose its current state and avoid a flash that makes content temporarily unreadable.
Field checks
- Define at least three intentional dark surfaces.
- Assign primary and secondary text roles with measured ratios.
- Test accent as text, fill, outline and focus.
- Inspect native controls, autofill and text selection.
- Verify media and charts on the dark background.
Comfort and visual hierarchy require human inspection in addition to WCAG ratio checks, especially for long reading and high-density interfaces.
| Signal | Record | Decision use |
|---|---|---|
| Base | page background | overall luminance |
| Surface | cards and controls | grouping hierarchy |
| Content | text, icons, focus | readability and operation |