WordPress.org

Make WordPress Core

Opened 9 days ago

Last modified 7 days ago

#41858 new defect (bug)

Improve the list table pagination links color contrast

Reported by: afercia Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-screenshots needs-patch good-first-bug
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.

Change History (2)

#1 @subrataemfluence
7 days 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 @afercia
7 days 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.

Note: See TracTickets for help on using tickets.