[wp-trac] [WordPress Trac] #47153: Field boundaries have insufficient color contrast

[WordPress Trac]

#47153: Field boundaries have insufficient color contrast
-------------------------------------------------+-------------------------
 Reporter:  anevins                              |       Owner:  audrasjb
     Type:  defect (bug)                         |      Status:  reopened
 Priority:  normal                               |   Milestone:  5.3
Component:  Administration                       |     Version:
 Severity:  minor                                |  Resolution:
 Keywords:  needs-post-mortem has-screenshots    |     Focuses:  ui,
  wpcampus-report color-contrast form-controls   |  accessibility
  has-patch 5-3-admin-css-changes                |
-------------------------------------------------+-------------------------

Comment (by afercia):

 Worth also noting that input fields on Gutenberg already use a gray for
 the input fields that has a contrast ratio of 3.1 with the background.

 On WordPress 5.2 it's `border: 1px solid #8d96a0;` which against the
 Gutenberg white background gives a contrast ratio of exactly 3:1
 https://jdlsn.com/color/?type=hex&color=8d96a0&color2=ffffff

 For WordPress 5.3 there's the need to take into account the admin pages
 that use a `#f1f1f1` gray background thus the input fields border has been
 darkened a bit to `border: 1px solid #7e8993`, also on Gutenberg. This
 gives a contrast ratio of 3.16:1 against a `#f1f1f1` background:
 https://jdlsn.com/color/?type=hex&color=7e8993&color2=f1f1f1

 Screenshot: input field on Gutenberg WordPress 5.2 on the left, trunk on
 the right:

 [[Image(http://cldup.com/albdsYXYDC.png)]]

 Screenshot: input field on the WordPress trunk admin pages with gray
 background:

 [[Image(http://cldup.com/5TFFkywA6k.png)]]

 Compared with the borders on WordPress 5.2:

 [[Image(http://cldup.com/dJLBJcI-R1.png)]]

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/47153#comment:76>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform