focus-appearance.html

<section class="sc new">
   
    <h4>Focus Appearance</h4>
    
    <p class="conformance-level">AA</p>
	<p class="change">New</p>
    
    <p>When the keyboard <a>focus indicator</a> is visible, one or both of the following are true:</p>
    <ol>
        <li>The entire <a>focus indicator</a> meets all the following:

            <ul>
                <li><a>encloses</a> the <a>user interface component</a>  or sub-component that is focused, and</li>
              <li>has a <a>contrast ratio</a> of at least 3:1 between the same pixels in the focused and unfocused <a>states</a>, and</li>
                <li>has a contrast ratio of at least 3:1 against adjacent non-focus-indicator colors.</li>
            </ul>
        </li>
        <li>An area of the focus indicator meets all the following:
            <ul>
                <li>is at least as large as the area of a 1 <a>CSS pixel</a> thick <a>perimeter</a> of the unfocused component or sub-component, or is at least as large as a 4 CSS pixel thick line along the shortest side of the <a>minimum bounding box</a> of the unfocused component or sub-component, and</li>
                <li>has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states, and</li>
                <li>has a contrast ratio of at least 3:1 against adjacent non-focus-indicator colors, or is no thinner than 2 CSS pixels.</li>
            </ul>
        </li>
    </ol>

    <p>Exceptions:</p>
    <ul>
      <li>The focus indicator is determined by the <a>user agent</a> and cannot be adjusted by the author, or</li>
        <li>The focus indicator and the indicator's background color are not modified by the author.</li>
    </ul>
    
    <p class="note">What is perceived as the user interface component or sub-component (to determine enclosure or size) 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.</p>

    <p class="note">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.</p>

    <p class="note">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.</p>

 </section>