Understanding SC 1.4.11 Active User Interface Components button examples text contrast

[cathydesign]

Issue with the two button examples - text contrast.
As noted in the examples, the visual boundary has "color of #007bff on white"
which is 3:1 contrast.

Observed: The text uses the same color as outline (and the inverse in the second example)

Expected: Text /background should have contrast ratio 4.5 to 1 per SC 1.4.3 AA

Example 1:

Example 2:

[alastc]

Hi @cathydesign, given that the focus of the document is the non-text aspects, did this impact your understanding of the concepts?

[detlevhfischer]

@alastc I'd say that positive examples better meet other SCs since authors might base their design on them, so I feel having text above 4.5:1 would be better / safer even i this is not the point of this Understanding text.

Rathwer than opening a new issue (would that be better?), I add some minor comments about the (very good) 1.4.11 Understanding text for you to contemplate:

text input | Where a text-input has an indicator, such as a bottom border, that indicator it must meet 3:1 contrast ratio.

This is the same text as for the example above (which just has a bottom border) - I believe you want to get rif of 'bottom' here.

Adding a focus indicator is required, and must meet 3:1 contrast ratio.

What is unclear here is whether having just the blinking cursor as focus indicator (this has sufficient contrast) would be enough - probably not - unless the input is completely unstyled and therefore falls under default exceptions? Might be good to clarify that.

If we force stronger contrast on the disabled elements,...

The tone, using the collective 'we', may be inappropriate for the understanding text. It seems more suitable for a deliberation within the WG rather than a public-facing text.

low-currency symbol

I have no clue what this symbol is intended to convey, have never seen it. Maybe something less arcane might be better?

The information is available in another form, such as in a table that follows the graph, which becomes visible when a "Long Description" button is pressed.

Did we discuss how far authors would be allowed to stretch "is available in another form"? Would the "long description" need to be available adjacent to the graphic on the same page, e.g., in a disclosure widget, or can it be linked to, leaving the page context?
Conforming alternate version provides an example for spelling out those conditions, it is left open here. Could an author now come and argue "for all the low-contrast diagrams in this page, we have a PDF alternative that we have linked to right at the end of this page"? Would that pass? Would it pass if this fact is merely mentioned in the legend, or at the beginning of the page? Or would a direct link to that document be required? Would an alternative in the same Technique be required (i.e. a HTML page rather than a PDF?)
Maybe all that cannot be spelled out completely, but I guess authors would raise these questions, and some may use all sorts of loopholes to justify graphics with insufficient contrast.

[alastc]

The example originally starting this thread has been removed in the recent updates, I'll review Detlev's other comments soon.

[alastc]

Hi Detlev,

I think most things raised in this thread have been dealt with except for these:

1. Section on disabled elements is a bit of an explainer: I'll cut this down a bit, I agree it is too much for this doc.
2. Low currency symbol: I'll explain the meaning better, and if someone can contribute an alternative I'm happy to replace it.
3. Info is available in another form: We can link to the alt-conforming version info, but would it be better to leave it with the good-practice example instead? If we define it there, it will have to fall back to alt-conforming version approach.

I'll include 1 & 2 in a bumper PR for all the open NTC issues, if you'd like to contribute text for 3 I'll include that.