Opened 14 months ago
Last modified 6 months ago
#45095 new defect (bug)
Dashboard links don't always have sufficient color contrast for vision impaired users
Reported by: |
|
Owned by: | |
---|---|---|---|
Milestone: | Future Release | Priority: | normal |
Severity: | normal | Version: | |
Component: | Administration | Keywords: | needs-patch color-contrast |
Focuses: | ui, accessibility | Cc: | |
PR Number: |
Description
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:
- 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
Change History (7)
This ticket was mentioned in Slack in #accessibility by afercia. View the logs.
13 months ago
#5
@
13 months ago
- Keywords needs-patch added
- Milestone changed from Awaiting Review to Future Release
Discussed during today's accessibility bug-scrub and agreed to ask the design team to consider to darken a bit the primary buttons blue.
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:
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.