I work at a place where the public sector guidelines are applied so everything we release has to meet the AA standard. We usually hold gov.uk to a high standard.
However, either I’m misunderstanding WCAG 1.4.11 or well it isn’t compliant.
At Gov.uk using the keyboard whatever you navigate to has a yellow #FFDD00 highlight.
However elsewhere this same highlight is used around input fields , where it doesn’t meet the requirement for non-text contrast, it has a ratio of only 1:3:1.
I can see in other places they surround the input field with a black border so the contrast of adjacent colours is measured on yellow to black - 15:6:14.
Here, it’s a different shade of yellow but in either instance it doesn’t meet the 3:1 ratio requirement.
The requirement summary from Web Aim is
A contrast ratio of at least 3:1 is present for differentiating graphical objects (such as icons and components of charts or graphs) and author-customized interface components (such as buttons, form controls, and focus indicators/outlines).
At least 3:1 contrast must be provided in the various states (focus, hover, active, etc.) of author-customized interactive components.
The techniques - G195: Using an author-supplied, highly visible focus indicator (w3.org) - at the very end state
- If the focus indicator does not have 3:1 contrast ratio with its adjacent colors, check that it is at least 2px thick.
So, in the end it’s fine to have a low ratio as long as the focus indicator is 2px thick.