About

Version: WCAG 2.2+
Number: 2.4.12
Level: AAA
Applicability:
  • Buttons
  • Controls
  • Inputs
Requirement:

When user interface components have 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 4.5:1 between the colors in the focused and unfocused states.
  • Minimum area: The contrasting area is at least double the area of a 1 CSS pixel perimeter of the unfocused component;
  • Not obscured: No part of the focus indicator is hidden by author-created content.
Guidance:

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.11 but sets stronger 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

The primary differences between this success criteria and 2.4.11 is that the contrast ratio must be at least 4.5:1, the minimum area around the perimeter must be 2px and no content must obscure the control.

Additional Information

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