[wp-trac] [WordPress Trac] #41858: Improve the list table pagination links color contrast

[WordPress Trac]

#41858: Improve the list table pagination links color contrast
-------------------------+-------------------------------------------------
 Reporter:  afercia      |      Owner:
     Type:  defect       |     Status:  new
  (bug)                  |  Milestone:  Awaiting Review
 Priority:  normal       |    Version:
Component:               |   Keywords:  has-screenshots needs-patch good-
  Administration         |  first-bug
 Severity:  normal       |
  Focuses:  ui,          |
  accessibility          |
-------------------------+-------------------------------------------------
 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

 [[Image(https://cldup.com/Er8cXOb4sH.png)]]

 [[Image(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:

 [[Image(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
 [https://codepen.io/hugobaeta/full/RNOzoV/ 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.

 [[Image(https://cldup.com/0k0hYOY5KV.png)]]

 Alternatively, a new design could be experimented.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/41858>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform