v5: major non-text contrast issues with focus indicators and progress bars

[patrickhlauke]

All of the current focus styles for buttons and form controls currently fail WCAG 2.1 SC 1.4.11 Non-text Contrast https://www.w3.org/TR/WCAG21/#non-text-contrast

While focus indication is indeed "visible" in the broad definition of WCAG 2.1 SC 2.4.7 Focus Visible https://www.w3.org/TR/WCAG21/#focus-visible, the focus outline does also need to have sufficient contrast of at least 3:1 against the background under 1.4.11 (if it's the only visual indication of focus). For text inputs/textareas, there's an argument that the blinking caret/cursor (once it has focus) is an additional visual focus indicator, so they're "excused" from having low contrast outline. But for all other cases, the contrast of the outline is currently way below 3:1 (in some cases down to 1.4:1).

The same is also true for the custom focus indicators used on the main Bootstrap documentation homepage (these seem to be custom-defined for just the documentation).

Same issue is also present for pagination

Additionally, some of the custom background progress bars also fail 1.4.11 - users need to be able to clearly distinguish both the gray background from the white (to see what the total/100% is) and then be able to distinguish the coloured bar from the gray background.

Note that most automated tools currently don't adequately (or at all) test for 1.4.11.

[patrickhlauke]

and for clarity, this issue is also present in bootstrap v4.x, but for that we aimed only at WCAG 2.0. SC 1.4.11 is new to WCAG 2.1

[mdo]

What's the best tool to measure the contrast of focus styles? Is this the contrast of the added ring against background/parent element, or against the element that's being focused?

[mdo]

And a demo of some outline styles, including Firefox's non-standard -moz-outline-radius: https://codepen.io/emdeoh/pen/RwrdOBo?editors=1100

[ffoodd]

Kind of duplicate with #29422, isn't it? There're some tools and infos there.

[patrickhlauke]

ah, well remembered @ffoodd yes, this seems to cover the same ground as #29422 when it comes to focus styles, and adds the problem of progress bars as well (which is arguably separate, but still falls under 1.4.11)

@mdo i mean without even needing tools...you just check the contrast ratio of the outline/shadow colour against the background page. for the handful of focus styles we have, it's reasonably quick to do. i just do it manually with https://github.com/ThePacielloGroup/CCAe/

also, while the -moz-outline-radius thing is interesting, note that i'm not comparing the contrast of the outline against the button/thing itself, but the contrast of the outline against the page background. it's not about the outline appearing distinct somehow from the button, but the outline actually being visible in and of itself against the page.

[ffoodd]

@mdo for a fast overview, Aditus' Button Contrast Checker is pretty good (and as Patrick said, it measures contrast ratio between focus indicator and background page.

You and @MartijnCuppens came up with different solutions for this (comment), basically using the same color for button shadows and backgrounds, with a gap between shadow and border to ensure visibility.

This is what I did in Boosted with outline — since our buttons aren't rounded, outline and outline-offset are great.

[ffoodd]

Closing this in favor of #29422