WordPress.org

Make WordPress Core

Opened 2 months ago

Last modified 7 hours ago

#41858 assigned defect (bug)

Improve the list table pagination links color contrast

Reported by: afercia Owned by: afercia
Milestone: 4.9.1 Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-screenshots good-first-bug has-patch
Focuses: ui, accessibility Cc:

Description

The list table pagination links (the active ones) have a color contrast ratio with the background under the required 4.5:1 to meet the WCAG at level AA. #0073aa on #e5e5e5 results in a ratio of 4.13:1, see https://jdlsn.com/color/?type=hex&color=0073aa&color2=e5e5e5

https://cldup.com/Er8cXOb4sH.png

https://cldup.com/Er8cXOb4sH.png

Also on hover/focus the colors could be improved a bit, since UI controls that change their background to blue on hover/focus are a bit out of the design patterns used in WordPress:

https://cldup.com/lVpHE7ODTv.png

The current official WordPress colors are listed on https://make.wordpress.org/design/handbook/design-guide/foundations/colors/, see alto the codepen linked there for more color variants.

These controls are links that looks like buttons, they could use the same CSS classes (with some adjustments) used for the buttons. The buttons CSS classes already provide colors for enabled and disabled states and using them would also increase consistency. Worth noting disabled controls don't need to meet the color contrast requirement.

https://cldup.com/0k0hYOY5KV.png

Alternatively, a new design could be experimented.

Attachments (3)

41858-links.diff (958 bytes) - added by benoitchantre 8 weeks ago.
Same background color as buttons
41858-buttons.diff (2.7 KB) - added by benoitchantre 8 weeks ago.
More like buttons
41858.diff (5.8 KB) - added by afercia 7 hours ago.

Download all attachments as: .zip

Change History (14)

#1 @subrataemfluence
2 months ago

  • Keywords reporter-feedback added

The following color contrast meets WCGA level AA (4.5:1) https://www.joedolson.com/tools/color-contrast.php?type=hex&color=%230066c5&color2=%23e5e5e5&alpha=1#hex

However the color #0066c5 does not fall inside the list WordPress official colors.

"Also on hover/focus the colors could be improved a bit, since UI controls that change their background to blue on hover/focus are a bit out of the design patterns used in WordPress:"

Would you mind explaining "out of the design pattern used in WordPress"?

#2 follow-up: @afercia
2 months ago

  • Keywords reporter-feedback removed

@subrataemfluence I think there are no other UI controls in WordPress that change their background to blue on hover/focus, so these links design seems inconsistent to me and I don't see why they should be an exception.

#3 in reply to: ↑ 2 @benoitchantre
2 months ago

Replying to afercia:

@subrataemfluence I think there are no other UI controls in WordPress that change their background to blue on hover/focus, so these links design seems inconsistent to me and I don't see why they should be an exception.

The Add New button.

https://cldup.com/4Tqrw1-qpT.png

#4 @benoitchantre
2 months ago

The darker background color could be remove to increase the contrast and to meet the WCAG at level AA with a 4.86:1 contrast ratio.
A significant difference on one property should be enough to differentiate the states.
No change on hover state.

https://cldup.com/ceuNP2um6l.png

I think it's right to keep the links in blue.
These are really links (like the filter links) and their look should reflect that.

Let me know if you agree. I can try to submit a patch in a few days.

#5 @afercia
2 months ago

The Add New button.

Right, but the Add New button is a pretty unique case. For these pagination links, I'd try the same colors used for normal buttons, maybe except the blue for links as you mentioned @benoitchantre

@benoitchantre
8 weeks ago

Same background color as buttons

@benoitchantre
8 weeks ago

More like buttons

#6 @benoitchantre
8 weeks ago

  • Keywords has-patch added; needs-patch removed

@afercia here are two directions with their patches.

Preview of 41858-links
Same background color as buttons.

https://cldup.com/OwmMTR8U3h.png
https://cldup.com/IYZPqcihZk.png

Preview of 41858-buttons.diff
Same styles as buttons: background color, color, rounded corners and shadow.

https://cldup.com/V_2VUQ9oS4.png
https://cldup.com/d4zb_LhuWq.png

After having tested the second version (styled like buttons), I think it is better than the first version.

Maybe @melchoyce could give her feedback on that?

#7 @afercia
8 weeks ago

@benoitchantre nice! Personally I'd prefer the second version but I'll leave this to @melchoyce @karmatosed and all the ui/design team.

#8 @melchoyce
8 weeks ago

I like the button version!

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


2 weeks ago

#10 @melchoyce
2 weeks ago

  • Milestone changed from Awaiting Review to 4.9.1

@afercia
7 hours ago

#11 @afercia
7 hours ago

  • Owner set to afercia
  • Status changed from new to assigned

Looking a bit at this, it would make sense to reuse the existing button CSS classes. They can be used for button elements and link elements. 41858.diff is a first try following this approach: it uses the buttons CSS classes and overrides only the properties necessary for the specific design of the pagination links.
I think it could be further refined, so any improvement is very welcome. @benoitchantre mind having a look? :) Worth reminding patches should be generated from the root of a cloned development repo and should not touch .rtl or minified files.

Note: See TracTickets for help on using tickets.