About

Version: WCAG 2.2 and up
Number: 2.4.11
Level: AA
Applicability:
  • Buttons
  • Controls
  • Inputs
Requirement:

When user interface components receive keyboard focus, all of the following are true:

  • Contrasting area: There is an area of the focus indicator that has a contrast ratio of at least 3:1 between the colors in the focused and unfocused states.
  • Minimum area: The contrasting area is at least as large as:

    • Outline: the area of a 1 CSS pixel thick perimeter of the unfocused component, or
    • Shape: the area of a 4 CSS pixel thick line along the shortest side of a minimum bounding box of the unfocused component, and no thinner than 2 CSS pixels.
  • Adjacent contrast: The contrasting area also has a contrast ratio of least 3:1 against adjacent colors in the focused component, or the contrasting area has a thickness of at least 2 CSS pixels.
  • Not fully obscured: The item with focus is not entirely hidden by author-created content.
Guidance:
Techniques: Techniques are not yet available for WCAG 2.2 success criteria.

Purpose

The purpose of this success criterion is to ensure that users can perceive that a control has received focus so can be interacted with.

This success criterion is similar to 2.4.7, which requires that there be a focus indication, but sets requirements for the focus indicator.

Warning

This success criterion is new in WCAG 2.2 and is subject to change until that specification becomes a recommendation.

How to Meet

Authors need to ensure that any controls have sufficient contrast when they receive focus. All the requirements specified in the success criterion text must be met, specifically a 3:1 contrast for the focus designator both against the control and the area around it, the size requirements of the contrast area depending on its shape, and that the control cannot be completely obscured by other content.

Additional Information

The following knowledge base pages provide more information about how to address this success criterion for publishing content: