Cursor colour and contrast must remain discernible on light and dark backgrounds
Aliases: cursor contrast · visibility · dark mode
What it is
A cursor is both a position marker and a state carrier, so its colour and contrast must remain visible on light pages, dark canvases, photos, video, and highlighted selections. If pointer outline blends into its background, people lose its location and cannot read changes such as hands, resize arrows, or busy states.
Why it happens
Because a pointer is small, vision relies on luminance difference, outlines, shadows, inversion, or motion to separate it from complex imagery. A single flat colour will fail on some backgrounds. System themes and application-drawn cursors can also fall out of sync, especially after dark-mode changes.
Studying it
Across representative light and dark interfaces, colourful media, dim displays, and scaling levels, measure discovery time, positioning error, and shape-recognition rate. Include low-vision users, high-contrast modes, and large-pointer settings; check that custom cursors respond to system accessibility settings.
Where it stops holding
Higher contrast must not obscure content or create continuous distraction; oversized outlines, animation, or fluorescent colour can harm precision work. Colour is not the only channel: contour, size, and motion matter too. System pointer choices should take priority over an application's visual preference.
Applying it
- Provide adaptive fill and contrasting outlines for light and dark surfaces rather than changing one flat colour.
- Test shape and hotspot visibility over photos and canvases, retaining large-pointer and high-contrast support.
- Update custom cursors with theme, scale, and accessibility changes without overriding a person's system selection.
Related
- Same group: C1.19.1 Cursor-shape changes communicate available actions, such as resize arrows and grab hands · C1.19.2 Cursor shapes are ephemeral cues that vanish when the pointer moves away · C1.19.3 A busy cursor signals system occupation, not position feedback · C1.19.4 Cursor-shape language depends on platform conventions and is not guaranteed cross-platform
- Nearby: D1 Output and feedback channels · A1 Human capabilities and human-factors foundations
- Search terms:
cursor contrast·visibility·dark mode
Cards in the same group
- C1.19.1Cursor-shape changes communicate available actions, such as resize arrows and grab hands
- C1.19.2Cursor shapes are ephemeral cues that vanish when the pointer moves away
- C1.19.3A busy cursor signals system occupation, not position feedback
- C1.19.4Cursor-shape language depends on platform conventions and is not guaranteed cross-platform