low-focus-contrast

The focus indicator shows keyboard users which element is currently active. Whether it is an outline, a border, an underline, or a change of color, the pixels that make up the indicator must stand out from the colors around them. When the indicator's contrast against its background is lower than 3:1, users with low vision, color vision deficiencies, or reduced contrast sensitivity may not be able to see it. If these users also navigate with a keyboard, they may lose track of where they are and struggle to operate the interface.

Pass Patterns

High-contrast focus outline

The dark blue outline has a contrast of about 8:1 against the white page background.

<style>
    body { background: #ffffff; }
    .button:focus-visible {
        outline: 3px solid #1a4f9c;
        outline-offset: 2px;
    }
</style>


<button class="button">Save</button>

Color change that contrasts with the background

On focus, the link's background changes to a dark color that contrasts with the white page at about 16.5:1, with white text on top.

<style>
    body { background: #ffffff; }
    .nav-link:focus-visible {
        background: #1f1f1f;
        color: #ffffff;
        outline: none;
    }
</style>


<a class="nav-link" href="/pricing">Pricing</a>

Fail Patterns

Light focus outline on a white background

The light gray outline has a contrast of only about 1.4:1 against the white background, so it is hard to see.

<style>
    body { background: #ffffff; }
    .button:focus-visible {
        outline: 2px solid #dddddd;
    }
</style>


<button class="button">Save</button>

Subtle color change on focus

On focus, the link's background changes to a very light color that contrasts with the white page at only about 1.1:1.

<style>
    body { background: #ffffff; }
    .nav-link:focus-visible {
        background: #f2f2f2;
        outline: none;
    }
</style>


<a class="nav-link" href="/pricing">Pricing</a>

WCAG techniques

Sufficient techniques

• G195: Using an author-supplied, visible focus indicator
• C40: Creating a two-color focus indicator to ensure sufficient contrast with all components

Try It Yourself

Using a keyboard

1. Load the page.
2. Press Tab to move focus to each interactive element.
3. Check whether the focus indicator is easy to see against the background around it.

Expected results: The focus indicator is clearly visible on every element.

Actual results: The focus indicator is faint or hard to distinguish from the background.

Using a color contrast checker

1. Move focus to the element, and identify the color of the focus indicator and the color of the background next to it.
2. Open a browser extension or online color contrast checker.
3. Enter the two colors.

Expected results: The contrast ratio is at least 3:1.

Actual results: The contrast ratio is below 3:1.

FAQ

Standards and Regulations

Personas impacted by this issue

• Low Vision
• Color Vision Deficiency
• Keyboard

Learn More

• Understanding SC 1.4.11 Non-text Contrast

Related Issues

• missing-focus-indication
• color-contrast