Replace misleading image in 1.4.11 understanding with clearer example, tweak all other button example images with bigger text #2574
Conversation
the current image to illustrate how a simple change of background colour is not in scope of 1.4.11 non-text contrast actually muddies things, because the focused button also has a different text colour and a white halo/shadow around the text. this example *only* changes the background colour - and, to keep it more consistent with the other examples, it uses the light blue for the non-focused buttons and the dark blue for the focused one. Closes #2494
patrickhlauke
changed the title
To avoid doubt about whether or not the "white text on light blue" example buttons counts as large text and therefore pass with just a 3:1 contrast ratio, made all text in the buttons bigger (21px) and bold.
patrickhlauke
changed the title
|
expanded this PR to also tweak all "Example" blue buttons, making their text bigger/bold - see #2494 (comment) |
|
@alastc any chance this could be discussed and hopefully merged at some point soon? |
Since size of text in images is always difficult to judge across platforms, I wonder why we can't have an example that meets 4,5:1? Apart from the muddying aspects noted, this was the case in the old example. |
|
@detlevhfischer if somebody has the time/inclination to redo all the example images again ... sure. my change here was a quick patch over the existing images. redoing the backgrounds to a darker shade for 4.5:1 will likely require a more thorough/proper redoing of them, which frankly I have no time or energy for... i'd say let's merge this to fix the blatantly wrong/misleading example first and foremost though, rather than holding this up longer to get it "perfect" |
|
@detlevhfischer I suggest we could add a note to the Understanding stating somethnig like 'all image examples of buttons are intended to represent 14pt bold text, and so only require a 3:1 contrast ratio against the button background in order to pass Contrast (Minimum)' |
|
@alastc @iadawn I've just noticed that the version on https://w3c.github.io/wcag/understanding/non-text-contrast.html is still showing the old (and, in the case of figure 15, incorrect) version (even though https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html is correct). any idea why the github.io version lags behind the actual repo content? |
the current image to illustrate how a simple change of background colour is not in scope of 1.4.11 non-text contrast actually muddies things, because the focused button also has a different text colour and a white halo/shadow around the text.
replacing the image with a cleaner example image that only changes the background colour - and, to keep it more consistent with the other examples, it uses the light blue for the non-focused buttons and the dark blue for the focused one.
Closes #2494
EDIT: in addition, this also makes all "Example" text in the button images bigger (21px) and bold, to avoid any doubt that they'd pass 1.4.3 as "large text"