Focus indicator lacks 3 to 1 contrast ratio

Rule

The contrast of visual focus indicators against the background MUST be at least 3 to 1.

Background

People who have low vision or are colorblind may have difficulty perceiving that an element is interactive or what its state is - e.g. whether it has keyboard focus, is selected/checked/pressed, etc. - if the contrast between the element boundaries and/or state indicators and its background or adjacent colors is insufficient. When an interactive element's visual boundaries and state indicators have adequate contrast, people who have low vision or are colorblind are more likely to be able to perceive which elements on the screen are interactive and what their current state is.

How to Fix

Fix this issue by adjusting the visual focus indicator to achieve 3 to 1 contrast according the scenarios below.

When a focus indicator appears:

1. Outside the component, it needs to contrast with the background that the component is on.
2. Inside the component, it needs to contrast with the adjacent color(s) within the component.
3. As the border of the component (inside the component and adjacent to the outside), it needs to contrast with both adjacent colors.
4. Appears partly inside and partly outside, either part of the focus indicator can contrast with the adjacent colors.