Make WordPress Core

Opened 5 years ago

Closed 5 years ago

#47151 closed defect (bug) (duplicate)

Button has insufficient color contrast

Reported by: anevins's profile anevins Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-screenshots wpcampus-report color-contrast needs-design has-patch
Focuses: ui, accessibility Cc:

Description

Moved from the WPCampus accessibility report issues on GitHub, see: https://github.com/WordPress/gutenberg/issues/15273

  • Severity:
    • Low
  • Affected Populations:
    • Low-Vision
  • Platform(s):
    • All / Universal
  • Components affected:
    • Edit Media

Issue description
On the Edit Media page, the "Scale" button has insufficient color
contrast, below the minimum threshold of 4.5:1 for text:

Scale button: #fff (white) on #0085ba (light blue): 4.14.
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

    .wp-core-ui .button-primary {
        ...
        background: #0085ba;
        color: #fff;
        ...
    }

Remediation Guidance
Darken the blue background to match the other blues on the page, which
have sufficient contrast relative to their white text.

Recommended Code

.wp-core-ui .button-primary {
    ...
    background: #0074a2;
    color: #fff;
    ...
}

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](https://www.tenon.io) and funded by [WP Campus](https://wpcampus.org/). This issue is GUT-75 in Tenon's report

Attachments (2)

57186407-75f8d380-6e93-11e9-8842-2ba0a84d7535.png (81.1 KB) - added by anevins 5 years ago.
47151.diff (477 bytes) - added by chetan200891 5 years ago.
Patch created.

Download all attachments as: .zip

Change History (13)

#1 @afercia
5 years ago

  • Component changed from Media to Administration

Basically, this relates to all the blue button in the admin.

See also https://github.com/WordPress/gutenberg/issues/15432

Previously on Trac:

The design of the focus outline on buttons/elements could be improved
https://core.trac.wordpress.org/ticket/34904
With some design proposals from @MichaelArestad

a11y-focus: Standardizing the handling of :focus and :hover
https://core.trac.wordpress.org/ticket/34957

Last edited 5 years ago by afercia (previous) (diff)

#2 @afercia
5 years ago

  • Keywords color-contrast added

#3 @afercia
5 years ago

  • Milestone changed from Awaiting Review to 5.3

#4 @afercia
5 years ago

Related: #45095

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


5 years ago

#6 @karmatosed
5 years ago

  • Keywords needs-design added

#7 @karmatosed
5 years ago

I am adding needs design as whilst this has some ideas, let's also get a decision on this. I agree 100% it should be worked on for 5.3.

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


5 years ago

@chetan200891
5 years ago

Patch created.

#9 @chetan200891
5 years ago

  • Keywords has-patch added; needs-patch removed

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


5 years ago

#11 @melchoyce
5 years ago

  • Milestone 5.3 deleted
  • Resolution set to duplicate
  • Status changed from new to closed

Going to close this in favor of #34904, which has some mockups we should implement to cover both button color and better focus styles.

@chetan200891 Thanks for your patch here — do you have the time to look at patching 34904?

Note: See TracTickets for help on using tickets.