WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 20 months ago

Last modified 14 months ago

#44619 closed enhancement (fixed)

Colorize plugin card compatibility icons

Reported by: afragen Owned by: SergeyBiryukov
Milestone: 5.1 Priority: normal
Severity: trivial Version: 5.1
Component: Site Health Keywords: has-patch has-screenshots servehappy
Focuses: Cc:

Description

During the discussion of #43986 several of the screenshots demonstrated colorizing the check mark and the X in the plugin card. These CSS changes were not included in the changeset r43436.

It was suggested to create a new ticket for this enhancement so, here it is.

Attachments (3)

44619.diff (490 bytes) - added by afragen 2 years ago.
CSS to colorize the plugin card compatibility icons
screenshot_01.png (108.3 KB) - added by afragen 2 years ago.
Colorized icons on bottom of plugin card
44619.2.diff (493 bytes) - added by afragen 21 months ago.
updated patch with #design and #a11y feedback

Download all attachments as: .zip

Change History (19)

@afragen
2 years ago

CSS to colorize the plugin card compatibility icons

@afragen
2 years ago

Colorized icons on bottom of plugin card

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


2 years ago

#2 @swissspidy
2 years ago

  • Milestone changed from Awaiting Review to 4.9.9

#3 @pento
22 months ago

  • Milestone changed from 4.9.9 to 5.1

This ticket was mentioned in Slack in #core-php by afragen. View the logs.


21 months ago

#5 @flixos90
21 months ago

  • Keywords servehappy added

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


21 months ago

#7 @melchoyce
21 months ago

Thanks @afragen! The red should be #C62D2D. I'm a little unsure about the green — we don't seem to have a green that passes AA on the card background color, #FAFAFA. Closest we have is #31843F, which is AA+. I'm not sure if color contrast is absolutely integral because there's also supportive text — I'll want a second a11y opinion.

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


21 months ago

#9 @afragen
21 months ago

Thanks @melchoyce! I’ve pinged the #a11y channel. I’ll update the patch once we get some more feedback.

#10 @Daniel Koskinen
21 months ago

@melchoyce @afragen the relevant guideline would be 1.4.11 https://www.w3.org/TR/WCAG21/#non-text-contrast, which says ”Parts of graphics required to understand the content” should have at least 3:1 contrast. Since the symbols have supportive text as you say, the icons are not required to understand the meaning. So the contrast requirement does not apply to meet AA. This is how I read it anyway.

#11 @Daniel Koskinen
21 months ago

Another point: I checked the green suggested by @melchoyce with WebAIM’s colour contrast checker and it’s 4,09:1, which is sufficient for non-text content (3:1) anyway. So either way it should be OK. The green and red probably don’t have enough contrast in relation to each other, but that shouldn’t matter since the symbols also differ by shape.

#12 @afragen
21 months ago

  • Keywords dev-feedback ui-feedback needs-design removed

@melchoyce @Daniel Koskinen thanks so much for the feedback.

Version 0, edited 21 months ago by afragen (next)

@afragen
21 months ago

updated patch with #design and #a11y feedback

#13 @SergeyBiryukov
21 months ago

  • Owner set to SergeyBiryukov
  • Status changed from new to reviewing

This ticket was mentioned in Slack in #core-php by flixos90. View the logs.


20 months ago

#15 @SergeyBiryukov
20 months ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

In 44352:

Plugins: Colorize plugin card compatibility icons on Add Plugins screen.

Props afragen, melchoyce, daniel-koskinen.
Fixes #44619.

#16 @spacedmonkey
14 months ago

  • Component changed from Upgrade/Install to Site Health
Note: See TracTickets for help on using tickets.