[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:  task (blessed)                       |      Status:  reopened
 Priority:  normal                               |   Milestone:  5.3
Component:  Administration                       |     Version:
 Severity:  minor                                |  Resolution:
 Keywords:  has-screenshots wpcampus-report      |     Focuses:  ui,
  color-contrast form-controls has-patch 5-3     |  accessibility
  -admin-css-changes                             |
-------------------------------------------------+-------------------------

Comment (by afercia):

 @johnjamesjacoby hello and thanks for your feedback, much appreciated. One
 of the goals of having these changes on trunk is to expose them to a
 larger audience, get feedback, and keep iterating. I'd say the feedback
 part is working well :)

 == Process

 I'd like to note these changes come from an extended ongoing effort
 between teams to improve the overall contrast of all the interactive
 elements in the WordPress admin. Explorations, discussions, and meetings
 have being going for weeks on Slack.

 A post was published on Make Design for public discussion and request for
 feedback, see :

 **Discussion: Higher contrast form fields and buttons**
 https://make.wordpress.org/design/2019/09/06/discussion-higher-contrast-
 form-fields-and-buttons/

 All the related Trac tickets are open "blessed tasks" and now grouped
 under the keyword JB mentioned above:
 https://core.trac.wordpress.org/query?keywords=~5-3-admin-css-changes.
 This also helps to address specific feedback on specific points.

 == Main goals

 **Better accessibility**

 To meet WCAG level AA, all interactive user interface controls must have a
 minimum 3:1 contrast ratio with the adjacent color. Reference with details
 on what the "adjacent color" is:

 **Success Criterion 1.4.11 Non-text Contrast**
 https://www.w3.org/TR/WCAG21/#non-text-contrast

 **Understanding Success Criterion 1.4.11: Non-text Contrast**
 https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html

 I'd also like to note the need to improve form controls contrast was
 discussed way before the current release cycle and previously reported on
 Trac in #35596 and #44606.

 **Consistency**

 I'd like to outline that it's undesirable there's no consistency between
 the Gutenberg styles and the rest of the WordPress admin. Different form
 controls styles add cognitive load for users, forcing them to "learn"
 different user interface patterns and controls feedback depending on the
 page they're using.

 Sooner or later, consistency needs to be introduced anyways. On the
 protracted lack of consistency between Gutenberg and the admin we could
 open an entirely separate conversation :)

 There are different options to introduce the necessary consistency.
 Personally (for what is worth) I'm not opposed to move the Gutenberg
 styles to the rest of the admin ''and then iterate from there''. I do know
 some Gutenberg patterns can be improved. I'd tend to think a good first
 step is to have ''only one pattern'' across all the admin and then explore
 further improvements.

 == Specific feedback

 On some of your specific points:

 > Visually, selects and secondary buttons now look nearly identical. There
 isn't enough color contrast between their background colors when side-by-
 side to naturally identify them as unique elements anymore.

 Right. This is going to change: selects will have a white background and
 secondary buttons a blue border. See #48128, #34904 and related discussion
 between teams during last weekly accessibility meeting.

 > The transition that's applied on :focus is distracting, and makes the UI
 feel sluggish when trying to quickly navigate between multiple form
 fields. The speed & snappiness is gone.

 Good point. I see now that input fields and selects do have a transition
 effect. Buttons don't. This is clearly annoying when inputs/selects live
 close to buttons and receive focus sequentially. I'd recommend to remove
 the transition for now and re-evaluate later. /Cc @kjellr

 At the very least, the transition should obey the `prefers-reduced-motion`
 setting. Personally, I'd be in favor or removing the transition entirely,
 also from Gutenberg.

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