Failure Example

Failure Example: Focus Indicator Obscured by Semi-Opaque Overlay

Instructions:

  1. Use the Tab key to navigate through the form controls below.
  2. Notice the blue focus outline on each control.
  3. Click the "Open Modal" button to show the overlay.
  4. With the overlay visible, use Tab to navigate through the background controls.
  5. Observe how the focus indicators are now dimmed by the semi-transparent overlay.

Failure: When the semi-opaque overlay is present, the contrast of the focus indicators (blue outline) is reduced below the 3:1 ratio required by SC 1.4.11 Non-text Contrast, making them difficult to perceive for users with low vision.

Form Controls

Additional Information

This example demonstrates how semi-opaque overlays can obscure focus indicators, violating SC 1.4.11 Non-text Contrast.

The modal overlay uses rgba(0, 0, 0, 0.7) which creates a dark semi-transparent layer over the content. When keyboard users navigate through the form controls behind this overlay, the blue focus indicators become difficult to see due to reduced contrast.

Modal Dialog

This is a modal dialog with a semi-transparent overlay behind it.

The background controls are still focusable, but their focus indicators are obscured.