Focus Appearance
Tier 1 · The normative floor
Baseline compliance
What the normative text of WCAG 2.2 requires, and nothing more. Only a failure of this tier is a WCAG failure.
The bare minimum
When the focus indicator is visible, an area of it is at least as large as a 2 CSS pixel thick perimeter of the unfocused component, and has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states. It doesn't apply if the browser sets the indicator and the author can't adjust it, or if the author hasn't modified the indicator or its background.
Normative text
Verbatim from WCAG 2.2, W3C Recommendation 12 December 2024. Underlined terms are defined below.
When the keyboard focus indicator is visible, an area of the focus indicator meets all the following:
- is at least as large as the area of a 2 CSS pixel thick perimeter of the unfocused component or sub-component, and
- has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states.
Exceptions:
- The focus indicator is determined by the user agent and cannot be adjusted by the author, or
- The focus indicator and the indicator's background color are not modified by the author.
Definitions used (7)
Glossary definitions are normative. Their notes are informative.
- focus indicator
-
pixels that are changed to visually indicate when a user interface component is in a focused state
- CSS pixel
-
visual angle of about 0.0213 degrees
A CSS pixel is the canonical unit of measure for all lengths and measurements in CSS. This unit is density-independent, and distinct from actual hardware pixels present in a display. User agents and operating systems should ensure that a CSS pixel is set as closely as possible to the CSS Values and Units Module Level 3 reference pixel [[css3-values]], which takes into account the physical dimensions of the display and the assumed viewing distance (factors that cannot be determined by content authors).
- perimeter
-
continuous line forming the boundary of a shape not including shared pixels, or the minimum bounding box, whichever is shortest.
- user agent
-
any software that retrieves and presents web content for users
- presentation
-
rendering of the content in a form to be perceived by users
- content
-
information and sensory experience to be communicated to the user by means of a user agent, including code or markup that defines the content's structure, presentation, and interactions
- technology
-
mechanism for encoding instructions to be rendered, played or executed by user agents
Informative notes (2)
As used in these guidelines "web technology" and the word "technology" (when used alone) both refer to web content technologies.
Web content technologies may include markup languages, data formats, or programming languages that authors may use alone or in combination to create end-user experiences that range from static web pages to synchronized media presentations to dynamic Web applications.
Notes in the criterion Informative
WCAG 2.2 lists notes among its informative material, which "does not create requirements that impact a conformance claim." They help interpret the criterion but are not part of the floor.
What is perceived as the user interface component or sub-component (to determine the perimeter) depends on its visual presentation. The visual presentation includes the component's visible content, border, and component-specific background. It does not include shadow and glow effects outside the component's content, background, or border.
Examples of sub-components that may receive a focus indicator are menu items in an opened drop-down menu, or focusable cells in a grid.
Contrast calculations can be based on colors defined within the technology (such as HTML, CSS, and SVG). Pixels modified by user agent resolution enhancements and anti-aliasing can be ignored.
Tier 2 · The gap
Usability & user impact
Where content can meet this criterion and still make things harder for people with disabilities. These are not failures of SC 2.4.13, so raise them as usability defects. Known failures, including failures of related criteria, are listed in Tier 1.
An indicator can meet the area and contrast numbers yet be hard to spot if it is inside the component or similar to other states such as hover.
Tier 3 · The golden path
Recommended best practice
The pattern that meets the floor, closes the gap, and avoids audit disputes. A recommendation, not a requirement.
Use a solid 2px or thicker outline with an offset, in a color that contrasts with both the component and the page.
W3C's Understanding document and techniques for SC 2.4.13 ↗ are informative: sufficient techniques show ways to pass, and documented failures show common ways to fail, but neither changes what the criterion requires.
How SC 2.4.13 maps to the WCAG 3 draft
From this site's reviewed map to the WCAG 3 editor's draft. It's an interpretation: W3C has not published a mapping.
The draft says "sufficient" without giving numbers.
Successor provisions
From WCAG 2.2, section 5.1: “The main content of WCAG 2.2 is normative and defines requirements that impact conformance claims. Introductory material, appendices, sections marked as "non-normative", diagrams, examples, and notes are informative (non-normative). Non-normative material provides advisory information to help interpret the guidelines but does not create requirements that impact a conformance claim.”