WordPress.org

Make WordPress Core

Opened 14 months ago

Closed 9 months ago

Last modified 3 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 14 months ago.
CSS to colorize the plugin card compatibility icons
screenshot_01.png (108.3 KB) - added by afragen 14 months ago.
Colorized icons on bottom of plugin card
44619.2.diff (493 bytes) - added by afragen 10 months ago.
updated patch with #design and #a11y feedback

Download all attachments as: .zip

Change History (19)

@afragen
14 months ago

CSS to colorize the plugin card compatibility icons

@afragen
14 months ago

Colorized icons on bottom of plugin card

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


13 months ago

#2 @swissspidy
13 months ago

  • Milestone changed from Awaiting Review to 4.9.9

#3 @pento
11 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.


11 months ago

#5 @flixos90
11 months ago

  • Keywords servehappy added

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


10 months ago

#7 @melchoyce
10 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.


10 months ago

#9 @afragen
10 months ago

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

#10 @Daniel Koskinen
10 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
10 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
10 months ago

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

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

Last edited 10 months ago by afragen (previous) (diff)

@afragen
10 months ago

updated patch with #design and #a11y feedback

#13 @SergeyBiryukov
10 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.


9 months ago

#15 @SergeyBiryukov
9 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
3 months ago

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