Questions about WCAG 1.4.11 Non-Text Contrast

Questions
#1

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.

yellow

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.

border

Here, it’s a different shade of yellow but in either instance it doesn’t meet the 3:1 ratio requirement.

V5
V5733×115 12.8 KB

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

  1. 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.

2 Likes
#2

I keep on asking myself about these metrics, because this is an area I’ve not gone into and find troubling because I will soon have to enter it. Does WCAG ever update as time goes by, and is it a bar to reach or a bar to exceed where possible? Do we “PAY” real disabled people to actually test apps and websites. I mean we would not use google to translate and check our translations, what is the best way to “check”?

The input focus caret is an intuitive standard, but if the app framework allows, a chevron >> focus indicator might have been used, as was the case in the old >teletext< days , how does the spec interpret use of a graphical caret?

#3

There is a baseline and and enhanced level within WCAG. And there are consultancies out there who do employ differently-abled people to advise on accessibility issues.

2 Likes
#4

Reading through your post and the webaim link. I’d agree with your conclusion.

The final point on contrast being the deciding part.

Out of interest are you in a Government department? The UK Government Digital Slack workspace is a great place to connect with people and ask these sorts of gov specific questions.

1 Like
#5

I did not assume they did employ differently-abled, that will be a criteria I’ll jump on if this becomes an option. Everyone has govt contracts, but so far for us they have been smaller and at council level. So for me accessibility is still a good ways off. Reminded by @azza554 that the digital people in UK gov are very keen to help govt services get this right. Setting a high standard, also being a good example.

#6

Thanks, I do enjoy the phrasing of it as ‘sufficient’. I work for a University, so we’re caught by the requirements to be AA compliant.

I came across Carie Fisher’s site - Carie Fisher’s digital portfolio and blog | Carie Fisher - I think it makes it’s clear that if you have a fat highlight then it’s ok to not meet 3:1.

A friend works in local government and they use a combination of Silktide, manual checking and consultants. We do the first two, but we don’t use Silktide for everything.

#7

Does WCAG ever update as time goes by

Yes, and we are in the process of a ground up, fresh start standard, code named Silver, which is publishing as WCAG 3. I am the author of the contrast section, and the inventor of the new method, the APCA (Advanced Perceptual Contrast Algorithm).

You can see the tool and additional information at https://www.myndex.com/APCA/

As for your other questions, the standards include how to test for compliance, and testing is defined in a way that anyone can perform the tests, and many tests can be via automated tools.

It is a bar to exceed where possible. The new APCA has a conformance scoring, from 0 (fail) to 4 (ideal minimum) which counts toward a total site score. But APCA also defines a “preferred” level. This level does not give bonus points above score 4, but does indicate a more preferred best practice, i.e. the bar to meet when or if possible to do so.

I am open to questions.

Thank you

Andrew Somers
W3 AGWG Invited Expert
Myndex Color Science Researcher
Inventor of SAPC and APCA

3 Likes
#8

^^
You saw it here first on Ministry of Test. Thank you so much for the insight into how this really works @myndex . I guess this leaves it up to us to actively advocate for better UI design in our workplaces and to start exploring how the tools can make this painless.

1 Like