WordPress.org

Make WordPress Core

Opened 6 weeks ago

Last modified 34 hours ago

#47157 new defect (bug)

Insufficient contrast on link text on 'Media Dialog' and 'Block Types'

Reported by: nrqsnchz Owned by:
Milestone: 5.3 Priority: normal
Severity: normal Version:
Component: Administration Keywords: wpcampus-report has-screenshots color-contrast has-patch needs-refresh
Focuses: accessibility Cc:

Description

Moved from the WPCampus accessibility report issues on GitHub.

Severity: Medium
Affected Populations:

  • Low-Vision
  • Cognitively Impaired

Platform(s):

  • All / Universal

Components affected:

  • Block Types
  • Media Dialog

Issue description

When the "Featured Image" modal is open, there are two controls coded
as links which have insufficient color contrast, below the minimum
threshold of 4.5:1 for text:

"Upload Files" and "Media Library" blue hover color: blue (#00a0d2) on white (#fff): 3.01:1

Sufficient color contrast is important for users who have low-vision or
are color-blind, because text with a low contrast ratio may be difficult
or impossible for such users to see.

Issue Code

.media-frame a:active, .media-frame a:hover {
  color: #00a0d2;
}

Remediation Guidance

Darken the hover color to match the focus color, or otherwise to provide
a contrast ratio of 4.5:1 or greater.

Recommended Code

.media-frame a:active, .media-frame a:hover {
  color: #124964;
}

Relevant standards

[https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
1.4.3 Contrast (Minimum) (Level AA)]

Note: This issue may be a duplicate with other existing accessibility-related bugs in this project. This issue comes from the Gutenberg accessibility audit, performed by Tenon and funded by WP Campus. This issue is GUT-43 in Tenon's report

Attachments (2)

57186434-164ef800-6e94-11e9-8cdc-f15e98a631d4.png (579.8 KB) - added by nrqsnchz 6 weeks ago.
Screenshot of the Media Library UI, highlighting the link text on the tabbed navigation
47157.diff (356 bytes) - added by ronakganatra 4 weeks ago.
Changed css color as mentioned in the suggestion above.

Download all attachments as: .zip

Change History (9)

@nrqsnchz
6 weeks ago

Screenshot of the Media Library UI, highlighting the link text on the tabbed navigation

#2 @afercia
6 weeks ago

Quoting comments from the GitHub Issue:

@afercia:

Worth noting this applies to all the links in WordPress but only to the blue used for the hover state.

I'd like to discuss this a bit more in depth, as I'm not 100% sure the hover state needs sufficient contrast,

@StommePoes

I would say hover needs sufficient contrast for the cases of low-viz screen-mag users for whole avoiding a hovered state can be difficult (depending on zoom level and the size of the control of course).

#3 @afercia
6 weeks ago

  • Component changed from Media to Administration
  • Keywords has-screenshots color-contrast added

#4 @afercia
5 weeks ago

  • Milestone changed from Awaiting Review to 5.3

@ronakganatra
4 weeks ago

Changed css color as mentioned in the suggestion above.

#5 @afercia
4 weeks ago

  • Keywords has-patch needs-refresh added; needs-patch removed

@nrqsnchz @ronakganatra thank you for the ticket and the patch.

As mentioned in a previous comment, the hover state insufficient contrast applies to many other places in WordPress where controls (links, link-buttons, etc.) use the color #00a0d2 for hover. For completeness, also the controls that use a red color may have an insufficient color contrast on hover.

Worth also considering the background color is not always white. Various shades of gray are used across the admin, for example in the Customiser the grays are different from the ones used in the standard admin pages. See #35622.

Generally, the color used for the hover state shouldn't be "lighter" than the one used for the normal state. Instead, it should be darker to increase contrast.

I guess before any patch, this issue probably requires some broader discussion.

Note for anyone willing to test contrast: if you're using the Chrome dev tools, be aware that sometimes the calculated contrast ratio is inaccurate because the Chrome color picker contrast checked appears to be unable to get the background color when set on ancestors that are very far in the DOM.

Some screenshots to illustrate the hover state on different background colors:

Zebra-striped tables:

http://cldup.com/q5MYm6DKL1.png

Default WordPress background #f1f1f1:

http://cldup.com/rawfy7Eth9.png

Red links:

http://cldup.com/PGDfF4zXTZ.png

This ticket was mentioned in Slack in #core by marybaum. View the logs.


12 days ago

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


34 hours ago

Note: See TracTickets for help on using tickets.