Opened 5 years ago
Closed 5 years ago
#47151 closed defect (bug) (duplicate)
Button has insufficient color contrast
Reported by: | 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
- 1.4.3 Contrast (Minimum) (Level AA) https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
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)
Change History (13)
This ticket was mentioned in Slack in #accessibility by afercia. View the logs.
5 years ago
#7
@
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
This ticket was mentioned in Slack in #accessibility by audrasjb. View the logs.
5 years ago
#11
@
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?
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