Make WordPress Core

Opened 15 months ago

Last modified 7 months ago

#45095 new defect (bug)

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

Reported by: vrimill Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Administration Keywords: needs-patch color-contrast
Focuses: ui, accessibility Cc:
PR Number:


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
<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)

#1 @mukesh27
15 months ago

  • Focuses accessibility added

#2 @SergeyBiryukov
15 months ago

  • Component changed from General to Administration
  • Focuses ui added

#3 @afercia
15 months ago

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.

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.

15 months ago

#5 @afercia
15 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.

This ticket was mentioned in Slack in #design by mindmantra. View the logs.

15 months ago

#7 @afercia
7 months ago

  • Keywords color-contrast added

Related: #47151.

Note: See TracTickets for help on using tickets.