WordPress.org

Make WordPress Core

Opened 5 months ago

Last modified 11 hours ago

#47153 assigned defect (bug)

Field boundaries have insufficient color contrast

Reported by: anevins Owned by: audrasjb
Milestone: 5.3 Priority: normal
Severity: minor Version:
Component: Administration Keywords: has-screenshots wpcampus-report color-contrast form-controls has-patch needs-testing needs-design-feedback
Focuses: ui, accessibility Cc:

Description

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:

Attachments (19)

57186393-2b775700-6e93-11e9-9935-c6770c0d7db9.png (258.0 KB) - added by anevins 5 months ago.
57186399-5792d800-6e93-11e9-9d03-dc633d1b5795.png (112.1 KB) - added by anevins 5 months ago.
Screen Shot 2019-06-20 at 2.50.52 PM.png (82.0 KB) - added by melchoyce 3 months ago.
Let's swap all core input styles for Gutenberg input styles.
Capture d’écran 2019-08-17 à 10.12.08.png (277.7 KB) - added by audrasjb 5 weeks ago.
Add gutenberg styles to media modal forms elements
47153.diff (842 bytes) - added by audrasjb 5 weeks ago.
Add gutenberg styles to edit media screen forms elements
Capture d’écran 2019-08-17 à 10.35.30.png (82.0 KB) - added by audrasjb 5 weeks ago.
Also change Classic Editor form elements
Capture d’écran 2019-08-17 à 10.41.42.png (46.7 KB) - added by audrasjb 5 weeks ago.
Publish metabox as well
Capture d’écran 2019-08-17 à 10.43.20.png (81.2 KB) - added by audrasjb 5 weeks ago.
47153.diff user edit screen
Capture d’écran 2019-08-17 à 10.43.46.png (97.5 KB) - added by audrasjb 5 weeks ago.
47153.diff writing settings screen
Capture d’écran 2019-08-17 à 10.44.11.png (75.6 KB) - added by audrasjb 5 weeks ago.
47153.diff media settings screen
Capture d’écran 2019-08-17 à 10.46.16.png (662.4 KB) - added by audrasjb 5 weeks ago.
47153.diff themes screen
Capture d’écran 2019-08-17 à 10.46.28.png (180.4 KB) - added by audrasjb 5 weeks ago.
47153.diff comments screen
Capture d’écran 2019-08-17 à 10.46.41.png (103.8 KB) - added by audrasjb 5 weeks ago.
47153.diff posts screen
Capture d’écran 2019-08-17 à 10.46.59.png (197.0 KB) - added by audrasjb 5 weeks ago.
47153.diff dashboard screen
Capture d’écran 2019-08-17 à 10.47.24.png (172.1 KB) - added by audrasjb 5 weeks ago.
47153.diff plugins screen
47153.2.diff (1.8 KB) - added by audrasjb 5 weeks ago.
Finally adding changes to screen-meta as well :)
Capture d’écran 2019-08-17 à 11.01.39.png (93.0 KB) - added by audrasjb 5 weeks ago.
47153.2.diff screen metas
Capture d’écran 2019-08-17 à 11.03.31.png (105.0 KB) - added by audrasjb 5 weeks ago.
47153.2.diff screen metas deployed
47153.3.diff (1.8 KB) - added by kjellr 3 weeks ago.

Change History (42)

#1 @afercia
5 months ago

  • Component changed from Media to Administration

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

#2 @afercia
5 months ago

  • Keywords color-contrast form-controls added

#3 @afercia
4 months ago

  • Milestone changed from Awaiting Review to 5.3

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


3 months ago

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


3 months ago

@melchoyce
3 months ago

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

#6 @afercia
3 months 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
5 weeks 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.


5 weeks ago

#9 @audrasjb
5 weeks ago

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

Related: #47150

@audrasjb
5 weeks ago

Add gutenberg styles to media modal forms elements

@audrasjb
5 weeks ago

Add gutenberg styles to edit media screen forms elements

#10 @audrasjb
5 weeks 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
5 weeks ago

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

@audrasjb
5 weeks ago

Also change Classic Editor form elements

@audrasjb
5 weeks ago

Publish metabox as well

@audrasjb
5 weeks ago

47153.diff user edit screen

@audrasjb
5 weeks ago

47153.diff writing settings screen

@audrasjb
5 weeks ago

47153.diff media settings screen

@audrasjb
5 weeks ago

47153.diff themes screen

@audrasjb
5 weeks ago

47153.diff comments screen

@audrasjb
5 weeks ago

47153.diff posts screen

@audrasjb
5 weeks ago

47153.diff dashboard screen

@audrasjb
5 weeks ago

47153.diff plugins screen

@audrasjb
5 weeks ago

Finally adding changes to screen-meta as well :)

#12 @audrasjb
5 weeks ago

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

Looks great to me. See screenshots below.

@audrasjb
5 weeks ago

47153.2.diff screen metas

@audrasjb
5 weeks ago

47153.2.diff screen metas deployed

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


5 weeks ago

#14 @audrasjb
4 weeks 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
4 weeks 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.


3 weeks ago

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


3 weeks ago

@kjellr
3 weeks ago

#18 @kjellr
3 weeks 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 weeks ago

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


2 weeks ago

#21 @kjellr
10 days 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.


8 days ago

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


11 hours ago

Note: See TracTickets for help on using tickets.