This is an unpublished editor’s draft that might include content that is not finalized. View the published version

Skip to content

Technique F114:Failure of Success Criterion 1.4.11 due to focus indicator being obscured by a semi-opaque overlay

About this Technique

This technique relates to 1.4.11: Non-text Contrast (Failure).

This failure applies to any technology that supports semi-transparent overlays (such as CSS with opacity or rgba colors) and focus indicators.

Description

This describes the failure condition that occurs when a focus indicator is positioned behind a semi-opaque overlay (such as a lightbox, modal, or other translucent content), resulting in the focus indicator's contrast being reduced below the 3:1 ratio required by Success Criterion 1.4.11 Non-text Contrast.

Focus indicators are visual cues that show which element currently has keyboard focus. When these indicators appear behind semi-transparent content, the overlay reduces the perceived contrast between the focus indicator and its background, making it harder or impossible for users with low vision to perceive the focus indicator.

This failure occurs even if the component itself is not entirely obscured, as the reduced contrast of the focus indicator violates the non-text contrast requirements.

Examples

Example 1

A webpage uses a semi-transparent dark overlay to dim the background content when displaying a modal dialog. When keyboard users tab through the background content, the focus indicators (such as outline borders) appear dimmed because they are rendered behind the overlay, reducing their contrast below 3:1.

Here is example CSS that creates a semi-opaque overlay:

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
  z-index: 1000;
}

.focused-element {
  outline: 2px solid #ffffff; /* White focus outline */
}

When the overlay is present and an element receives focus, the white outline appears behind the semi-transparent black overlay. The effective contrast of the white outline against the dimmed background may be insufficient, failing 1.4.11.

Tests

Procedure

  1. Navigate through the page using keyboard navigation (Tab key) to move focus to various interactive elements.
  2. Check if any semi-opaque overlays or translucent content appear that could cover focus indicators.
  3. For each focusable element that could be covered by such an overlay, measure the contrast ratio of the focus indicator while the overlay is present.
  4. Use a color contrast analyzer to measure the contrast between the focus indicator and the background as it appears through the overlay.

Expected Results

  • If the contrast ratio of any focus indicator, when obscured by a semi-opaque overlay, is less than 3:1, then this failure condition applies and the content fails this Success Criterion.
Back to Top