Accessibility: improve contrast tweaks

[HaoK]

Fixes #33341

Added to site.css to templates that support identity ui (register/login/manage UI focused/highlighted text cause this contrast failure)

::-moz-selection {
    color: #fff;
    background-color: #333;
}
::selection {
    color: #fff;
    background-color: #333;
}

After: (Passes contrast ratio of 12.634

Before: (Fails contrast ratio of 3.065 < 4.5)

[pranavkm]

This looks good to me. @SteveSandersonMS are you able to have a look since you've recently been looking at accessibility?

[TanayParikh]

LGTM; looks like we may have some tab/space inconsistencies between the files.

[SteveSandersonMS]

I'm certainly in favour of improving accessibility, but wonder if we could fix it by making our styling more standard rather than less? Changing selected text background to black is very nonstandard, even if it does maximize contrast. Here are some other examples:

A plain .html file with no CSS (i.e., default browser/OS styling):

Here's microsoft.com:

Here's the default Blazor project template:

... and here's the screenshot from Identity:

So in all cases, they use #3390ff except in Identity. Instead of changing all the sites to use black background selection (including in the non-identity parts), could we specifically change identity to be standard and not override the #3390ff with its own color?

This would have the benefit of keeping the site.css files more simple and approachable, and not producing an unusual/nonstandard text selection UI.

Fails contrast ratio ... < 4.5

Where does the 4.5 threshold come from? It doesn't seem clear that it's a valid recommendation when it contradicts the OS defaults and basically every mainstream website (see microsoft.com, google.com). Also, @pranavkm's point about dark mode is a good one - even though our default styling might not respect the dark mode preference, as soon as someone starts trying to add dark mode support, they would get really bad selection styling if we override the default background to black.

[HaoK]

The 4.5 threshold comes from WCAG 2.0 (https://www.w3.org/TR/WCAG20/)

1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)

Also, the tool that was used to look for accessibility issues: https://accessibilityinsights.io/ flags this contrast ratio in its automated tests as failures, the exact failures are listed in the tfs bugs in the issue, #33341

[HaoK]

This contrast failure does come from bootstrap defaults itself, so this bug is basically saying we can't use the standard contrast ratios since its not accessible by default:

https://getbootstrap.com/docs/4.0/getting-started/accessibility/

Color contrast
Most colors that currently make up Bootstrap’s default palette—used throughout the framework for things such as button variations, alert variations, form validation indicators—lead to insufficient color contrast (below the recommended WCAG 2.0 color contrast ratio of 4.5:1) when used against a light background. Authors will need to manually modify/extend these default colors to ensure adequate color contrast ratios.

[SteveSandersonMS]

this bug is basically saying we can't use the standard contrast ratios since its not accessible by default

Is it possible we're misinterpreting the requirements? I just read the three issues on AzDO (1163091, 1162814, 1162783) and couldn't spot any part of them that was talking about the background color for selected text. Did I miss it?

How does this PR address #33341, when the three AzDO issues there all talk about different things (not selected text)? Don't we need to fix the other things those issues talk about? Perhaps there's some more context elsewhere, or apologies if I'm missing something obvious!

[HaoK]

The background color change affects multiple instances of the contrast failure, I'm sure there are other ways to accomplish the same result. Since there are many parts of bootstrap that fail this contrast by default, its possible I'm probably going to need to tweak a few more styles in future PRs, but here's a screen shot for what the failure looks like before the background style change in the tool

All that said, I'm certainly not a css expert or accessibility expert in any way, when I mentioned that these issues come from bootstrap itself, I was told regardless we need to fix these issues that have been flagged. I'm happy to tweak things or fix this in another way if you have ideas.

[SteveSandersonMS]

Could you clarify how changing the selected text background color would address the issues that have been raised in the AzDO reports?

1163091

1162814

1162783

None of them seem like they would be affected by the selected text background color, so it's unclear to me that we're addressing them here.

[HaoK]

Ah looks like the auto detect tool didn't flag those, thanks for catching that, I guess we have to change the link color to something that contrasts with the normal text as well. I just used the tool and tabbed through all elements on the page to make sure the failures were gone. I didn't realize I had to manually sample some elements like this. I'll see if I find a blue that passes the contrast ratio I guess.

[HaoK]

#0077CC looks like a blue that works against both black and white, I'll update to that

[HaoK]

Thanks to @SteveSandersonMS explaining some of the intricacies of css/accessibility, we've settled on hopefully a minimal targeted set of changes to address the specific issues reported:

instead of changing the selection text color, instead we are just slightly tweaking the blue for links so it passes contrast for both black and white, and changing the border color for the form inputs in identity's css to fix the contrast issues. This should be less likely to have unintended side effects.

[HaoK]

Look good to merge @SteveSandersonMS ?

[SteveSandersonMS]

Great, thanks for the updates, @HaoK!