Dashboard links don't always have sufficient color contrast for vision impaired users

[vrimill]

Dashboard elements may not have sufficient color contrast for vision impaired users. (Background: current Microsoft Accessibility guidelines establish standards for visibility of elements on page for vision-impaired users.)

From Keros accessibility reporting:

1. Button has insufficient color contrast for vision-impaired users:

<a class="button button-primary button-hero load-customize hide-if-no-customize" href="​https://qadevblogs.wpengine.com/visualstudio/wp-admin/customize.php">Customize Your Site</a>
Expected contrast ratio of 4.5:1
2.Element Path
li:nth-child(1) > .wpe-dify-post-date
Snippet
<div class="wpe-dify-post-date">Sept 21, 2018</div>

• Element has insufficient color contrast of 2.84 (foreground color: #999999, background color: #ffffff, font size: 9.8pt, font weight: normal). Expected contrast ratio of 4.5:1

[afercia]

The first report above refers to the primary buttons (the blue ones). I wasn't able to find a reference for the second snippet. To my knowledge the gray #999999 is not used for text, more details welcome.

Some background on the primary buttons: their contrast ratio is 4.15:1 so the contrast between background and text is not sufficient. However they use a dark text-shadow around the text. This issue was discussed at length in the following Trac ticket: #31459 see also the related changeset: [34948]

As accessibility team, we'd prefer a darker background color. However, there was no consensus with the design team. As a trade-off, the agreed solution was to use a dark text-shadow, as also suggested by this WCAG technique: ​https://www.w3.org/TR/WCAG20-TECHS/G18.html specifically in the part:

...or add a thin black outline (at least one pixel wide) around the letter in order to keep the contrast ratio between the letter and the background above 4.5:1

I'd agree the WCAG technique suggestion refers to a different use case (gradient colors) so this solution may be arguable. As said, the accessibility team would just prefer a darker background color.

Note: I'm not aware of any accessibility automated checker able to take a text-shadow into account when checking for color contrast.

[afercia]

Discussed during today's accessibility bug-scrub and agreed to ask the design team to consider to darken a bit the primary buttons blue.

[afercia]

Related: #47151.

[afercia]

Worth noting the primary-button background color has been improved in [46241] as part of the WordPress 5.3 CSS admin changes so this part of the ticket is solved.

The second part appears to be something output by a plugin (see the CSS class wpe-dify-post-date) that probably uses a #999999 grey text somewhere. That's unfortunate but there's nothing core can do about it.

@valentinbora I think this ticket can be closed, unless I'm missing something :)

[valentinbora]

Replying to afercia:

Worth noting the primary-button background color has been improved in [46241] as part of the WordPress 5.3 CSS admin changes so this part of the ticket is solved.

The second part appears to be something output by a plugin (see the CSS class wpe-dify-post-date) that probably uses a #999999 grey text somewhere. That's unfortunate but there's nothing core can do about it.

@valentinbora I think this ticket can be closed, unless I'm missing something :)

Thanks @afercia. Hereby closing, can always be reopened if need be.