WordPress.org

Make WordPress Core

Opened 8 months ago

Closed 7 months ago

#46591 closed defect (bug) (fixed)

List tables: Improve color contrast for post format icons

Reported by: SergeyBiryukov Owned by: pento
Milestone: 5.2 Priority: normal
Severity: normal Version:
Component: Post Formats Keywords: has-patch
Focuses: ui, accessibility Cc:
PR Number:

Description

Background: #35497

As a follow-up to [44961], based on the feedback from Slack discussion, a few further adjustments should be made to post format icons in the Posts list table:

  • Color contrast for the icons should be improved, it's too low at the moment.
  • CSS transition effect on the icons should be removed.

Note: These icons are also used in the Formats meta box in the Classic Editor. However, there is also some text, and the icons are only used as a decorative element. In the post list, they are the only indication of the format (without text), so should have the appropriate contrast.

Attachments (5)

Icon colors.png (34.5 KB) - added by melchoyce 8 months ago.
46591.diff (515 bytes) - added by mukesh27 8 months ago.
Patch.
46591.2.diff (1.9 KB) - added by afercia 8 months ago.
46591.3.diff (3.0 KB) - added by mukesh27 8 months ago.
Patch that remove format icon with it's css
46591.4.diff (1.2 KB) - added by mukesh27 7 months ago.
Updated patch.

Download all attachments as: .zip

Change History (33)

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


8 months ago

#2 @SergeyBiryukov
8 months ago

In 44963:

Post Formats: Remove CSS transition effect on post format icons in the Posts list table.

Props afercia, melchoyce.
See #46591, #35497.

#3 @SergeyBiryukov
8 months ago

  • Component changed from Administration to Post Formats
  • Owner set to SergeyBiryukov
  • Status changed from new to accepted

#4 @melchoyce
8 months ago

In Icon colors.png:

  • The top image is the current icon color, which does not have enough contrast.
  • The middle image uses #6C7781, which is the lightest grey in our palette that passes at AA.
  • The bottom image uses standard link blue.

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


8 months ago

#6 @karmatosed
8 months ago

@melchoyce if it's a link I sort of like the last option. However, looking at where we have icons and links in other situations, I don't see an existing pattern of having the link color. Perhaps we can just increase contrast for now?

#7 @afercia
8 months ago

Worth noting the icon is now part of the link. When hovering the link, the grey icon turns into blue anyways. Visually, that's not supre nice. I'd rather go with the default blue: when hovering it turns into the slightly lighter blue for hovered links.

@mukesh27
8 months ago

Patch.

#8 @mukesh27
8 months ago

As per @afercia thoughts now icon is part of the menu link so color should be #0073aa and hover color #00a0d2 as per link color. @melchoyce 3rd mock-up is perfect for icon color.

#9 @mukesh27
8 months ago

  • Keywords has-patch 2nd-opinion added

#10 @karmatosed
8 months ago

@afercia thanks for the context. Is there a reason this now does that over the way previously icons were treated? I'd love to know more.

#11 @afercia
8 months ago

@karmatosed see #35497.

Previously, the icons were separated link pointing to the lists for audio, video, image, etc. formats.

Now they're part of the post title links: they inherit the hover style from the post title links. No other reasons.

@melchoyce #6C7781 is ok on the white zebra striped rows. But on the light gray zebra striped ones (#f9f9f9) contrast is only 4.34:1, see https://jdlsn.com/color/?type=hex&color=6C7781&color2=f9f9f9. The blue #0073aa is OK for both.

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


8 months ago

#13 @melchoyce
8 months ago

@melchoyce #6C7781 is ok on the white zebra striped rows. But on the light gray zebra striped ones (#f9f9f9) contrast is only 4.34:1, see https://jdlsn.com/color/?type=hex&color=6C7781&color2=f9f9f9.

Ah, good catch, I only tested on white — we'd need to go one level up and use #606A73 instead to meet contrast on both.

Does the icon need to be a part of the title link? It almost makes it feel like the icon is part of the title itself.

#14 @karmatosed
8 months ago

Does the icon need to be a part of the title link? It almost makes it feel like the icon is part of the title itself.

I agree. I am not sure it should be as we don't in other cases.

@afercia
8 months ago

#15 @afercia
8 months ago

  • Keywords needs-design-feedback added; 2nd-opinion removed

46591.2.diff takes a different approach as suggested above:

  • moves the icons out of the links
  • changes the icons color to #606a73

Example:

http://cldup.com/ZEfuGzuHxJ.png

Personal opinion: it was better without icons :) Readability is better without the indented text. Also, if the icons have to stay, I'd slightly prefer them to be blue.

No strong opinions though, please let's try to help this ticket move on :)

#16 @afercia
8 months ago

Blue, for comparison:

http://cldup.com/h_3cqL7mUo.png

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


8 months ago

#18 @anevins
8 months ago

I think I would prefer a DL in terms of semantics, because the table takes more effort to get it predictable through the use of row scope. Whereas a DL is meant to be read out with Terms and Descriptions from the very start and could have a better chance for being more predictable.
-- Wrong ticket --

Last edited 8 months ago by anevins (previous) (diff)

#19 @mapk
8 months ago

I'm in favor of removing the icon here. The icon next to the checkbox is a bit much to parse.

If we do keep the icon, maybe we can consider moving the icon closer to the description of the Post Format? Something like below?

https://cldup.com/ijiNYrnv_o.png

#20 @afercia
8 months ago

Friendly reminder we're in beta 1 and this issue needs a final design decision :) /Cc @karmatosed @mapk

#21 @karmatosed
8 months ago

I would be ok not having icons at this point. I don't think icons should be blue as there doesn't seem visual precedent for icons being the same link colour.

#22 @karmatosed
8 months ago

  • Keywords needs-design-feedback removed

#23 @pento
8 months ago

  • Keywords needs-refresh added

Thank you for the design feedback, @karmatosed, and @mapk!

As recommended, let's remove the icons.

@mukesh27
8 months ago

Patch that remove format icon with it's css

#24 @mukesh27
8 months ago

  • Keywords needs-testing added; needs-refresh removed

#25 @afercia
8 months ago

  • Keywords needs-refresh added; needs-testing removed

@mukesh27 thanks for the patch. The CSS should stay though. The format icons are still used in the Classic Editor > Post Formats meta box. Reminder: to test, there's the need to activate a theme that supports post formats, e.g. Twenty Seventeen.

@mukesh27
7 months ago

Updated patch.

#26 @mukesh27
7 months ago

  • Keywords needs-refresh removed

#27 @pento
7 months ago

  • Owner changed from SergeyBiryukov to pento
  • Status changed from accepted to assigned

#28 @pento
7 months ago

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

In 45136:

Post Formats: Remove the post format icons from the post list table.

Props mukesh27, melchoyce, karmatosed, afercia, mapk.
Fixes #46591.

Note: See TracTickets for help on using tickets.