List tables: Improve color contrast for post format icons

[SergeyBiryukov]

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.

[SergeyBiryukov]

In 44963:

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

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

[melchoyce]

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.

[karmatosed]

@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?

[afercia]

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]

Patch.

[mukesh27]

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.

[karmatosed]

@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.

[afercia]

@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.

[melchoyce]

@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.

[karmatosed]

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]

46591.2.diff​ takes a different approach as suggested above:

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

Example:

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 :)

[afercia]

Blue, for comparison:

[anevins]

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 --

[mapk]

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?

[afercia]

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

[karmatosed]

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.

[pento]

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

As recommended, let's remove the icons.

[mukesh27]

Patch that remove format icon with it's css

[afercia]

@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]

Updated patch.

[pento]

In 45136:

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

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