WordPress.org

Make WordPress Core

Opened 7 weeks ago

Last modified 5 days ago

#47151 new defect (bug)

Button has insufficient color contrast

Reported by: anevins Owned by:
Milestone: 5.3 Priority: normal
Severity: normal Version:
Component: Administration Keywords: needs-patch has-screenshots wpcampus-report color-contrast needs-design
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 (1)

57186407-75f8d380-6e93-11e9-8842-2ba0a84d7535.png (81.1 KB) - added by anevins 7 weeks ago.

Download all attachments as: .zip

Change History (9)

#1 @afercia
7 weeks 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 2 weeks ago by afercia (previous) (diff)

#2 @afercia
7 weeks ago

  • Keywords color-contrast added

#3 @afercia
7 weeks ago

  • Milestone changed from Awaiting Review to 5.3

#4 @afercia
2 weeks ago

Related: #45095

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


11 days ago

#6 @karmatosed
8 days ago

  • Keywords needs-design added

#7 @karmatosed
8 days 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 days ago

Note: See TracTickets for help on using tickets.