WordPress.org

Make WordPress Core

Opened 2 years ago

Last modified 13 months ago

#47153 closed defect (bug)

Field boundaries have insufficient color contrast — at Version 53

Reported by: anevins Owned by: audrasjb
Milestone: 5.3 Priority: normal
Severity: minor Version:
Component: Administration Keywords: needs-post-mortem has-screenshots wpcampus-report color-contrast form-controls has-patch 5-3-admin-css-changes has-dev-note
Focuses: ui, accessibility Cc:

Description (last modified by afercia)

Moved from the WPCampus accessibility report issues on GitHub, see : https://github.com/WordPress/gutenberg/issues/15272

  • Severity:
    • Low
  • Affected Populations:
    • Low-Vision
    • Cognitively Impaired
  • Platform(s):
    • All / Universal
  • Components affected:
    • Edit Media

Issue description
On the Edit Media page, several interactive components have insufficient
color contrast for their borders or backgrounds, below the minimum 3:1
for interface components:

Text input borders: #ddd (light-grey) against #fff (white): 1.35.
Checkbox and radio borders: #b4b9be (light grey) against #fff (white): 1.97.
Focus shadow for fields and buttons: #5b9dd9 (light blue) on #fff (white): 2.88.
Sufficient color contrast is important for users who have low-vision or
are color-blind, because content with a low contrast ratio may be
difficult or impossible for such users to see.

Issue Code

input[type=checkbox], input[type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=radio], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], select, textarea {
        border: 1px solid #ddd;
        box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
        background-color: #fff;
        ...
    }

    /* radio buttons, checkmarks */
    input[type=checkbox], input[type=radio] {
        border: 1px solid #b4b9be;
        ...
    }

    /* focus state */
input[type=checkbox]:focus, input[type=color]:focus, input[type=date]:focus, input[type=datetime-local]:focus, input[type=datetime]:focus, input[type=email]:focus, input[type=month]:focus, input[type=number]:focus, input[type=password]:focus, input[type=radio]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=text]:focus, input[type=time]:focus, input[type=url]:focus, input[type=week]:focus, select:focus, textarea:focus {
        border-color: #5b9dd9;
        box-shadow: 0 0 2px rgba(30,140,190,.8);
    }

    /* buttons at top */
    .wp-core-ui .button-secondary:focus, .wp-core-ui .button.focus, .wp-core-ui .button:focus {
        box-shadow: 0 0 3px rgba(0,115,170,.8);
    }

    #screen-meta-links .show-settings {
        border: 0;
        ...
    }

Remediation Guidance
Darken the gray borders and the focus shadow color to provide a minimum
contrast ratio of 3:1 relative to the white background.

Since box-shadow is not shown in High Contrast themes, this should
also be supplemented with a transparent outline (or replaced with a
visible outline).

Recommended Code

input[type=checkbox], input[type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=radio], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], select, textarea {
        border: 1px solid #949494;
        box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
        background-color: #fff;
        ...
    }

    /* radio buttons, checkmarks */
    input[type=checkbox], input[type=radio] {
        border: 1px solid #949494;
        ...
    }

    /* focus state */
input[type=checkbox]:focus, input[type=color]:focus, input[type=date]:focus, input[type=datetime-local]:focus, input[type=datetime]:focus, input[type=email]:focus, input[type=month]:focus, input[type=number]:focus, input[type=password]:focus, input[type=radio]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=text]:focus, input[type=time]:focus, input[type=url]:focus, input[type=week]:focus, select:focus, textarea:focus {
        border-color: #5999d4;
        box-shadow: 0 0 2px rgba(30,140,190,.8);
        outline: 1px solid transparent;
    }

    /* buttons at top */
    #screen-meta-links .show-settings:focus {
        border: 1px solid #0073aa;
        ...
    }

Relevant standards

  • 1.4.11 Non-text Contrast (Level AA)

Note: This issue may be a duplicate with other existing accessibility-related bugs in this project. This issue comes from the Gutenberg accessibility audit, performed by Tenon and funded by WP Campus. This issue is GUT-76 in Tenon's report

Note: Partly covered also in #15275.

Note: The media modals aren't part of Gutenberg. This issue should be moved to the core Trac under the Media component.

Note: There are also a few related core Trac tickets, see:

Change History (88)

#1 @afercia
2 years ago

  • Component changed from Media to Administration

Basically, this applies to al the input fields in the admin.

#2 @afercia
2 years ago

  • Keywords color-contrast form-controls added

#3 @afercia
2 years ago

  • Milestone changed from Awaiting Review to 5.3

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


2 years ago

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


2 years ago

@melchoyce
2 years ago

Let's swap all core input styles for Gutenberg input styles.

#6 @afercia
2 years ago

@melchoyce thanks! Would you say the Gutenberg style should be used also for #47150? (I guess yes and it would make sense to me)

#7 @melchoyce
2 years ago

Yeah, I think we should go with what @kjellr mocked up in that ticket. Thanks for checking 👍

This ticket was mentioned in Slack in #accessibility by audrasjb. View the logs.


2 years ago

#9 @audrasjb
2 years ago

  • Owner set to audrasjb
  • Status changed from new to assigned

Related: #47150

@audrasjb
2 years ago

Add gutenberg styles to media modal forms elements

@audrasjb
2 years ago

Add gutenberg styles to edit media screen forms elements

#10 @audrasjb
2 years ago

  • Keywords has-patch added; needs-patch removed

In 47153.diff I added Gutenberg styles to the edit media screen.

I didn't changed the styles of the help tabs (top right screen elements) since it has to be handled in a global ticket for the whole WP admin interface in my opinion.

#11 @audrasjb
2 years ago

FWIW, 47153.diff also changes the Classic Editor screen (see screenshot below).

@audrasjb
2 years ago

Also change Classic Editor form elements

@audrasjb
2 years ago

Publish metabox as well

@audrasjb
2 years ago

47153.diff user edit screen

@audrasjb
2 years ago

47153.diff writing settings screen

@audrasjb
2 years ago

47153.diff media settings screen

@audrasjb
2 years ago

47153.diff themes screen

@audrasjb
2 years ago

47153.diff comments screen

@audrasjb
2 years ago

47153.diff posts screen

@audrasjb
2 years ago

47153.diff dashboard screen

@audrasjb
2 years ago

47153.diff plugins screen

@audrasjb
2 years ago

Finally adding changes to screen-meta as well :)

#12 @audrasjb
2 years ago

In 47153.2.diff: I finally added these changes to screen meta elements as well :)

Looks great to me. See screenshots below.

@audrasjb
2 years ago

47153.2.diff screen metas

@audrasjb
2 years ago

47153.2.diff screen metas deployed

This ticket was mentioned in Slack in #design by audrasjb. View the logs.


2 years ago

#14 @audrasjb
2 years ago

  • Keywords needs-testing needs-design-feedback added

Adding needs-design-feedback so the patch could get a review from the design team.
See screenshot above.

Adding needs-testing keyword as well, since it's a pretty big modification on the interface and there could be a lot of edgecases.

#15 @afercia
2 years ago

Worth noting while the Gutenberg #8d96a0 color works on a white background, it doesn't on the core grey backgrounds. Typically: #f1f1f1, #f3f3f3, #eeeeee.

For more details, please see ticket:47150#comment:19

This ticket was mentioned in Slack in #core by pento. View the logs.


2 years ago

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


2 years ago

@kjellr
2 years ago

#18 @kjellr
2 years ago

(Whoops... I originally posted this over in #47150. Sorry about that.)


👋 Thanks for the patch and screenshots, @audrasjb. I've updated the patch to include the same color used in #47150 (#7e8993 instead of #8d96a0).

First, a small note: While this adopts the border color from Gutenberg, it doesn't entirely adopt the entire treatment: Focused fields in Gutenberg have a thicker border. I think we should probably tie that into this patch too so that things are consistent:

https://cldup.com/i4XHxpyXzh.png

On, then on to the larger notes:

In general, the interface in WP-Admin is very light and low-contrast. It's made up of lots of light grays. We do need to change the field border color to a darker one, but in an interface as light as this, adding such a dark color creates a visual hierarchy shift in a few areas. Before we move forward, I'd like for us to at least have a plan in mind for balancing that out.

Here's a before and after screenshot of the Categories page for example:

Before
https://cldup.com/XVgt_6YCiR.png

After
https://cldup.com/gNiniheJ6z.png

A couple specific things to point out: In the before screenshot, the table comes forward as the main focal point, while the "Add a new category" sidebar on the left recedes into the background. In the after screenshot, the sidebar is overwhelmingly prominent — it's definitely the first thing that draws the eye. The new dark borders of the "Bulk Actions" dropdown also add a heaviness that outweighs the table.

This new imbalance is especially obvious when focusing in on the relationship between the select components and their action buttons:

Before
https://cldup.com/FHyGDliQLC.png

After
https://cldup.com/AJA3RPWRs3.png

In the before screenshot, the button is (rightly, I'd say) more prominent than the select. That hierarchy is flipped in the new screenshot. (Since Gutenberg uses the same styles that are in this new screenshot, I wonder if this should be udpated there too. 🤔)

---

Anyway, I took a really quick stab at evening out some of these imbalances, to create a hierarchy that's more similar to what we have today:

https://cldup.com/5WgHZIzrSY.png

In this new example, I've:

  • Darkened the borders of our default buttons so that they're more on par with the hierarchy of the form fields.
  • Darkened the checkbox borders to match the form field borders.
  • Darkened the borders and dividers inside of the table on the right, to try returning a bit more visual weight to it.

It's not a fully-thought out solution, but it could be a start. Since this is a substantial change, I'd love to get some other designers to weigh in on all this too.

cc @melchoyce, @jasmussen and @davewhitley — I think you'll all be interested in this discussion.

This ticket was mentioned in Slack in #accessibility by audrasjb. View the logs.


2 years ago

This ticket was mentioned in Slack in #design by kjell. View the logs.


2 years ago

#21 @kjellr
2 years ago

Just a brief update: The design team is discussing this issue along with a couple other relevant tickets here:
https://make.wordpress.org/design/2019/09/06/discussion-higher-contrast-form-fields-and-buttons/

Feel free to weigh in there if anyone else has thoughts. Once we have alignment there, we'll bring any related design changes back into this ticket. 👍

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


2 years ago

This ticket was mentioned in Slack in #design by kjell. View the logs.


2 years ago

This ticket was mentioned in Slack in #design by afercia. View the logs.


2 years ago

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


2 years ago

@kjellr
2 years ago

#26 @kjellr
2 years ago

I just added 47153.4.diff. This adds the double-wide border for the focused state for form fields. It also:

  • Updates the blue color to the one used in Gutenberg.
  • Adds the darker borders to checkboxes + radio buttons. (For now, it does not make these borders 2px like Gutenberg's. That is a more complicated fix, and I think it should be handled alongside tickets like #47498)
  • It updates the meta options / help border to use the colors used in #48101.

Screenshots

https://cldup.com/mJJup3VmLu-3000x3000.png

https://cldup.com/C4Efo7pYEv-1200x1200.png

https://cldup.com/ftYb2RyiR9-3000x3000.png

#27 @kjellr
2 years ago

Oh, also! The latest patch also ensures that textboxes have rounded borders. This is great except for one glaring bug: The title field in Gutenberg.

https://cldup.com/4JizANRmpb-3000x3000.png

I'm pretty sure this is the only case where we do not want the field to have rounded corners, so it seems like something that should be fixed in Gutenberg. If this gets merged into core, I suggest we open a ticket there.

Last edited 2 years ago by kjellr (previous) (diff)

This ticket was mentioned in Slack in #accessibility by kjell. View the logs.


2 years ago

@afercia
2 years ago

#29 @afercia
2 years ago

47153.5.diff refreshes the patch after recent changes.

#30 @afercia
2 years ago

47153.6.diff adds a missing semicolon.

@afercia
2 years ago

#31 @afercia
2 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 46247:

Accessibility: Improve and modernize user interface controls for better contrast. Fifth part: Common form controls.

Props anevins, melchoyce, audrasjb, kjellr.
Fixes #47153.

#32 @afercia
2 years ago

  • Keywords needs-testing needs-design-feedback removed

@audrasjb
2 years ago

Missing styles in Install Screen

This ticket was mentioned in Slack in #accessibility by audrasjb. View the logs.


2 years ago

@audrasjb
2 years ago

Missing styles in Login Screen

#34 @audrasjb
2 years ago

@ocean90 found Login and Installation screens are missing new form styles. See screenshots above.

For reference, see related slack discussion: https://wordpress.slack.com/archives/C02RP4X03/p1569271942495500

Will reopen the ticket after WP 5.3 Beta 1 is released.

#35 @afercia
2 years ago

Reported by @desrosj on Slack.

On macOS Firefox:

1
The top and bottom of the select elements feels really tight:

http://cldup.com/R6CrA4zwsR.png

2
The text is not centered within the dropdown. This is obvious when focused:

http://cldup.com/qL2RwRbXi0.png

3
In the media library, clicking the Bulk Select button causes a 1px jump of the filter area/page

#36 @afercia
2 years ago

Tested a bit also on Windows, spotted a few important things to notice and address (see screenshots below);

  • The Select elements aren't that bad with Windows Firefox: this probably because the different system font metrics and line-height. I'd think also the padding needs adjustments.
  • Internet Explorer 11: the select elements still display the native arrow: this can be targeted with the proprietary ::-ms-expand
  • Internet Explorer 11: in the Quick Edit form some input fields are so narrow that the values can't be read
  • some textarea elements miss a focus style, for example: the Edit Comment textarea

@afercia
2 years ago

Select elements on Windows Firefox

@afercia
2 years ago

Select elements with Internet Explorer 11

@afercia
2 years ago

Quick edit form with Internet Explorer 11

@afercia
2 years ago

Edit comment textarea: no focus style in all browsers

#37 @afercia
2 years ago

Re: the select elements: looks like min-height doesn't work well with Firefox. It probably needs to use some combination of padding and line-height instead. /Cc @kjellr

Other (proprietary) selectors to target custom browsers UI will need to be used, e.g.:

select:-moz-focusring
select::-ms-value
select::-ms-expand

As a source of inspiration for cross-browser styled selects, see below. Though the implementation is slightly different, some of the CSS rules used in these examples might greatly help:

Scott O'Hara Styled Selects
https://scottaohara.github.io/a11y_styled_form_controls/src/select/
https://github.com/scottaohara/a11y_styled_form_controls/blob/master/src/assets/css/select.css

Yoast styled select
https://github.com/Yoast/wordpress-seo/blob/304116593abb8a06f74b9c8ae20f55ec8c689ba8/css/src/yst_plugin_tools.scss#L773

both inspired by:

Scott Jehl
Styling a Select Like It’s 2019
https://www.filamentgroup.com/lab/select-css.html

#38 @kjellr
2 years ago

Attached 47153-login-screen.patch, which is a tiny patch to fix the card border and focus styles on the login screen.

https://cldup.com/8sz1lnRCJi-2000x2000.png

#39 @talldanwp
2 years ago

It seems a lot of those issues mentioned with select elements are related to the changes in #47477. I've uploaded a patch there that fixes:

  • Fixes to margin of select elements to ensure text is centered
  • Fixes to quick edit form
  • Removal of native down arrow on select elements in IE

Of the issues mentioned I haven't been able to solve the following, so they're still up for grabs:

  • Edit comment textarea: no focus style in all browsers
  • In the media library, clicking the Bulk Select button causes a 1px jump of the filter area/page
  • The top and bottom of the select elements feels really tight
  • Missing styles in Install Screen

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


2 years ago

#41 @audrasjb
2 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened
  • Type changed from defect (bug) to task (blessed)

Reopening this ticket as a blessed task to allow us to iterate on the related changes.

Reopened tickets: #47153, #47477, #47498, #48101

#42 @afercia
2 years ago

In 46293:

Accessibility: Implement the new focus styles on the login screen after [46247].

Props @kjellr.
See #47153.

#43 @desrosj
2 years ago

Login screen looks good! One thing I am noticing on Firefox for MacOS (and I am also seeing it in the latest screenshot above), the password field is a different height than the username field. This is also causing the eye icon to not be vertically centered.

#44 @kjellr
2 years ago

Login screen looks good! One thing I am noticing on Firefox for MacOS (and I am also seeing it in the latest screenshot above), the password field is a different height than the username field. This is also causing the eye icon to not be vertically centered.

You're right. I bet that is related to the min-height changes that came in via #47477.

@afercia
2 years ago

#45 @afercia
2 years ago

on Firefox for MacOS (and I am also seeing it in the latest screenshot above), the password field is a different height than the username field.

Thanks @desrosj. Yep, old known stuff: Firefox / Chrome use a different default min line-height for input fields.

47153.7.diff addresses this issue by setting an explicit line-height. Worth exploring if all input fields would need a line-height as well.

Also, makes the username and password fields (and toggle button) scale better with text. This can be tested on Firefox: go to View > Zoom > Zoom Text Only, and then use the zoom normally. Some quick testing would be nice :)

This ticket was mentioned in Slack in #design by kjell. View the logs.


2 years ago

#47 @azaozz
2 years ago

Also note that #42888 and [46256] possibly introduce a regression as all paragraph tags in wp-login.php have been removed or replaced with divs.

May be missing something but why was this necessary? Also don't see that mentioned anywhere?

Last edited 2 years ago by azaozz (previous) (diff)

This ticket was mentioned in Slack in #accessibility by kjell. View the logs.


2 years ago

@desrosj
2 years ago

Port input field size is not matching

@desrosj
2 years ago

Date custom format fields don't have the new changes

#49 @afercia
2 years ago

Port input field size is not matching

@desrosj Unless I'm missing something that's the intended rendering. Some inputs have a small-text CSS class intended to make them... smaller :) They're smaller also on 5.2.3 and all previous versions.

@johnjamesjacoby
2 years ago

Classic Editor Publish Time Date drop-down select styling conflict (overlapping SVG carrot)

#50 @johnjamesjacoby
2 years ago

I understand all of the reasons why the work being done here is good. I also appreciate greatly the attention to detail that is going into all of this.

But... I don't think the end result is more visually appealing than it was before.

It's rigid, monochromatic, and inconsistently so. Form fields, meta-boxes, and list tables have strong borders, but the primary and secondary navigation have no lines or borders at all. Inner and outer shadows have been removed from some places and not others.

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.

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.

It mostly seems like all of the global problems Gutenberg has got moved into the rest of WordPress Admin.

So much is being done here, which is great to see, but this is practically a complete styling overhaul, while also feeling incomplete at the same time.

Maybe this should have been a blog post instead... but I also want to raise concerns here, so that they're out in the open asynchronously. I'm sure I'm wrong, but just in case, here it is.

#51 @afercia
2 years ago

  • Keywords 5-3-admin-css-changes added

#52 @audrasjb
2 years ago

@johnjamesjacoby thanks for your feedback. Worth noting the patch on this ticket should be tested along with other 5-3-admin-css-changes tickets: https://core.trac.wordpress.org/query?keywords=~5-3-admin-css-changes

See screenshot below for a better view of current work :-)

@audrasjb
2 years ago

Current trunk (WP 5.3 beta 1)

@audrasjb
2 years ago

Pending patches applied

#53 @afercia
2 years ago

  • Description modified (diff)
Note: See TracTickets for help on using tickets.