[wp-trac] [WordPress Trac] #47150: Insufficient contrast on empty field borders

[WordPress Trac]

#47150: Insufficient contrast on empty field borders
-------------------------------------------------+-------------------------
 Reporter:  anevins                              |       Owner:  audrasjb
     Type:  defect (bug)                         |      Status:  assigned
 Priority:  normal                               |   Milestone:  5.3
Component:  Media                                |     Version:
 Severity:  minor                                |  Resolution:
 Keywords:  has-screenshots wpcampus-report      |     Focuses:  ui,
  color-contrast form-controls has-patch         |  accessibility
-------------------------------------------------+-------------------------

Comment (by afercia):

 Worth noting WordPress core uses different shades of grey (see #35783,
 #40633, etc.) for its pages background, typically:
 - legacy admin pages: `#f1f1f1`
 - media modal dialog: `#f3f3f3`
 - customizer: `#eeeeee`

 [https://www.w3.org/TR/WCAG21/#non-text-contrast Non-text contrast] must
 have a minimum contrast ratio of at least 3:1 against adjacent color(s).
 This includes user interface components.

 The `#8d96a0` color Gutenberg uses for the form controls borders is OK in
 the Gutenberg context because the background is white:

 Luminosity Contrast Ratio: 3:1
 https://jdlsn.com/color/?type=hex&color=8d96a0&color2=ffffff

 It is not OK in core because the backgrounds are grey:

 **Legacy admin pages**
 Luminosity Contrast Ratio: 2.66:1
 https://jdlsn.com/color/?type=hex&color=8d96a0&color2=f1f1f1

 **Media modal dialog**
 Luminosity Contrast Ratio: 2.7:1
 https://jdlsn.com/color/?type=hex&color=8d96a0&color2=f3f3f3

 **Customizer**
 Luminosity Contrast Ratio: 2.58:1
 https://jdlsn.com/color/?type=hex&color=8d96a0&color2=eeeeee

 Furthermore, the core colors palette and the Gutenberg one are still
 different. There's been some prior work intended to reduce the amount of
 colors used in core but still there's work to do. It would be great to
 have some progress and finally have a unique colors palette. Not sure
 there's value in keeping two different ones, for design consistency,
 maintenance, and accessibility reasons.

 I'd like to encourage an effort to unify the two different colors palettes
 in one, final, official set of WordPress colors. Seems to me this is
 definitely a job for designers :)

 Legacy WordPress colors palette:
 https://make.wordpress.org/design/handbook/design-
 guide/foundations/colors/
 https://codepen.io/hugobaeta/full/RNOzoV/

 Exploration on a new colors palette by Hugo Baeta:
 https://codepen.io/hugobaeta/full/grJjVp

 Colors currently used in Gutenberg:
 https://github.com/WordPress/gutenberg/blob/61b133be4bd00c003c64ab6254e71f325fd3d7e8/assets/stylesheets/_colors.scss

 That said, the core form controls need a grey darker than `#8d96a0`. One
 that guarantees sufficient non-text contrast with at least the three
 background colors mentioned above.

 Amongst the current Gutenberg colors, `#7e8993` seems OK. /Cc @kjellr
 @karmatosed

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