Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Insufficient contrast on link text #15276

Closed
karlgroves opened this issue Apr 30, 2019 · 4 comments

Comments

5 participants
@karlgroves
Copy link

commented Apr 30, 2019

Insufficient contrast on link text

  • 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

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

@afercia

This comment has been minimized.

Copy link
Contributor

commented May 1, 2019

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,

@melchoyce

This comment has been minimized.

Copy link
Contributor

commented May 5, 2019

Full report screenshot:
image

@StommePoes

This comment has been minimized.

Copy link

commented May 5, 2019

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

@gziolo gziolo moved this from To do to Move to Trac in Accessibility Audit May 6, 2019

@afercia

This comment has been minimized.

Copy link
Contributor

commented May 6, 2019

@afercia afercia closed this May 6, 2019

Accessibility Audit automation moved this from Move to Trac to Closed May 6, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.