Text and Non-text Contrast

[lucalanca]

Operating system and version: All
Browser and version: All
Report: https://www.aditus.io/button-contrast-checker/getbootstrap-com-2019-09-12-at-15-02-11-139

Most buttons and links of the framework don't meet contrast criteria in all or some of their states.

Examples

Primary Button

Success Button

Happy to help you guys in this regard, but I think it's mostly a design decision that needs to be made on the default colors. I want to take some time to see if I can investigate a set of variables that pass AA and AAA when it comes to contrast without changing too much of the design.

[XhmikosR]

Thanks for this, we have already many issues in the past about it, so we are definitely aware of this.

I have already landed a PR for the docs for master, and for core I have #29198 but I don't like the changes except for the blue color and maybe the pink one.

Also, note I have a WIP PR to automatically check for accessibility issues on #29315.

[lucalanca]

@XhmikosR your branch is a lot better. It still has a lot of issues but it's definetely better:

For example, comparing to the buttons I shared above:

Primary Button

Success Button

I don't know where is the best place to focus on contrast of buttons alone. This issue or the one of your PR.

[XhmikosR]

I don't think we'll land the other colors changes. I mean, there's a huge difference for green.

But for blue and maybe pink, we can move forward in my PR.

[XhmikosR]

Blue and pink should be fine now on master. I'm not sure about the other colors because they change a lot.

[MartijnCuppens]

That tool is checking for the contrast for shadows & outlines, we shouldn't worry about that. As mentioned by @XhmikosR, I wouldn't darken the green and teal colors more, because it looks like the buttons are hovered or focused with these darkened colors.

[lucalanca]

@MartijnCuppens why shouldn't we worry about shadow/outline contrast?

[MartijnCuppens]

If we want a higher contrast between the page background and the button focus shadows, we'll get less contrast between the button background and the shadows.

[patrickhlauke]

we'll get less contrast between the button background and the shadows

but that is irrelevant, as the shadow visually changes the appearance of the button, making it bigger. so even if a user can't see the contrast between the shadow (acting as the focus indicator) and the actual button, they can still perceive that the button got "fatter" (i could have sworn there was an example of this on the WCAG 2.1 1.4.11 understanding doc https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html but it may have been in a separate document/discussion)

[lucalanca]

@MartijnCuppens I see what you mean, but I think this is not an issue. One option could be to give a outline-offset so that the focusing and the button are disconnected.

[mdo]

No plans to adjust the focus styles. Also worth noting that we don't use outline styles, we use custom box-shadows.

[patrickhlauke]

No plans to adjust the focus styles.

Then this will need to be noted as a known accessibility shortcoming.

[mdo]

Well I say that and this idea comes to mind, but does come with limitations that may be deemed too clever for the project. See https://codepen.io/emdeoh/pen/yLLNZRb. Uses background-clip: padding-box and a transparent border to recreate the offset an outline can have.

[MartijnCuppens]

@mdo, we could also work with double outlines, see https://codepen.io/MartijnCuppens/pen/XWJzVBm. I think this technique will give the least issues with for example input groups since we don't fake our border: