Focused block border color contrast ratio too low

[afercia]

When tabbing through the blocks using the keyboard, I can barely see which of the blocks is the focused one. I have some eyesight problem 🙂and I'm not the only one. There are a lot of users with vision impairments who would benefit from a higher contrast ratio.

The low contrast of the border around the focused block is particularly evident when the formatting toolbar is fixed to the top, see screenshot below (hint: the focused block is the second paragraph):

Instead, when the formatting toolbar is attached to the block, the presence of the UI helps a bit but it doesn't fully solve the issue.

I'd propose to consider to increase the gray border contrast. I guess it's not a big visual change, as the contrast when hovering is already way higher. Worth reminding the perceived contrast is not about the shade of color but it's about the luminosity contrast, and the blue used on hover has a way higher luminosity contrast:

Aside:
I'm not fully convinced about the blue, as the convention in WordPress is to use it for actionable controls; regardless, whether the final color will be blue or gray, the luminosity contrast should be higher.

/Cc @jasmussen @karmatosed

[jasmussen]

Can you take a look at the navigation mode solution propose din #5709 (comment)? In that design, navigating through blocks would show the blue outline.

[afercia]

The blue outline (or any other color with a higher luminosity contrast ratio) would be beneficial. It should be blue also when clicking on the block though.

Re: concerns with the blue which is a convention in WordPress: are we sure we want to use a blue?

[karmatosed]

I feel as we use blue throughout WordPress using it here is good. Assuming #5709 gets in what is the lightest but still accessible color of grey we can use here @afercia? Let's use that as a starting point.

[afercia]

Fine, as long as the contrast ratio is at least 3:1 (non-text contrast). Noting this is basically the same issue pointed out in #7053 /Cc @anevins12

[nbrummerstedt]

A general setting for optional high contrast ratio would be beneficial.

[karmatosed]

@nbrummerstedt are you suggesting an in general setting for WordPress? I ask as know it can adapt to high contrast settings for example on Windows.

[nbrummerstedt]

Come to think of it, such a setting should obviously be a site-wide user-setting. In that case, the suggestion belongs to wordpress/core ?
The reason I suggest it is because light grays and low contrasts can be really valuable to reduce noise and additionally hint functionality for users who are not visually impaired.

[karmatosed]

@nbrummerstedt that could be possible, core would be the place to suggest such a thing yes. I do wonder though if someone that wanted it would have already set that setting on their computer, that maybe is an assumption.

[nbrummerstedt]

@karmatosed As I see it, such a setting should be set on a per user basis, and be disabled by default.

A high contrast stylesheet should be enqueued if any of the following :

• User has manually enabled the setting
• User has enabled High Contrast in OS
• User has enabled High Contrast in browser (if such an option exists)

[afercia]

Worth reminding the color contrast ratio should meet the requirement by default, pretty much as the default WordPress admin color scheme aims to do.

[rahulbroy]

@karmatosed Blue should be fine I think, as long as the demarcation is clear.
I would also suggest to look into the contrast of the editor demarcation in general. While using the standard settings, everything is in white and I can't distinguish the difference between the background and the editor. One can get used to it but its still undesirable.

[karmatosed]

I think I'm right in closing this as we have #5709 suggesting a solution? If I am wrong we can reopen.

[afercia]

Not sure #5709 will ever get in, as it's a broader issue and currently blocked by a technical problem. Can we try to address the contrast issue separately here?