A2.15.3Low-contrast container cues invisible to low visiondesign

Low-contrast container cues can be entirely invisible to users with low vision

Aliases: common region · low vision · contrast ratio

What it is

Common region is a strong grouping cue: wrap a set of elements in a shared background fill or a border, and users can tell which content belongs to the same container just by looking at the boundary, with no need to compare spacing or color. To match an overall visual style, this kind of container cue is often made very subtle — a background just a shade darker than the page, a border reduced to a barely visible hairline. That subtlety may still be just perceptible to someone with typical contrast sensitivity, but for a user with low vision, that small a difference between container and background can fall entirely outside the range of contrast they can resolve. The container doesn't look faint to them — it looks like it isn't there, and the grouping information disappears outright rather than merely becoming harder to notice.

Why it happens

Whether the boundary between two colors can be seen depends on whether the contrast between them clears the lowest threshold a given viewer can resolve, and that threshold varies from person to person. People with low vision generally have contrast sensitivity below the norm, so a color difference that is clearly visible to someone with typical vision may register as no difference at all to them. Once a container cue is designed to be sufficiently subtle — usually in pursuit of visual restraint, so it doesn't draw too much attention — there is a real chance its contrast against the page background falls below what part of the user population can perceive. In that case the container is not "less prominent" — for those users, it simply does not exist.

Where it stops holding

If the elements inside the container also carry other grouping cues — their own individual headings, a clearly different spacing pattern — the container background or border is only reinforcing an already-perceptible grouping, and even if this particular cue fails for low-vision users, the grouping information still comes through some other channel. But if the container boundary is the only cue marking "these items belong to the same functional area" — a faint card background being the sole basis on which a user judges that a cluster of settings are related — insufficient contrast means this population cannot perceive the grouping relationship at all.

Applying it

  • Set the contrast of any container background or border that carries a grouping function to a standard that covers users with low vision, rather than deciding it purely on whether it "looks right" or "doesn't draw attention" in the design file. If the style genuinely calls for visual restraint, use other cues that don't depend on contrast — spacing, headings, icons — to make up for the grouping information the container was meant to convey.
  • Check container contrast separately for light and dark themes: the same container background computes to a different actual contrast ratio against a different base color in each theme, and meeting the standard in one does not mean the other does too.
  • To verify: measure the actual contrast ratio between the container's background or border color and the page background with a contrast-checking tool, and check it against the minimum contrast standard that covers users with low vision. Where possible, confirm directly with low-vision users on a real device under real lighting conditions whether they can perceive the container boundary — a passing number from a tool is not a full substitute for confirmation in real conditions.

Related

  • Same group: A2.15.1 Grouping by color alone fails for users with color vision deficiency · A2.15.2 Spacing-only visual grouping does not survive a screen reader's linear read-out · A2.15.4 A critical grouping relationship needs a non-visual, perceivable encoding as a fallback · A2.15.5 Purely visual grouping can fail after zooming or resizing text, once spacing ratios shift
  • Nearby: A2.07 Common region · J2.07 Low vision and screen magnification · F5.12 High-contrast mode
  • Search terms: contrast ratio · low vision · common region accessibility

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/A2.15.3