WordPress.org

Make WordPress Core

Opened 6 months ago

Closed 5 weeks ago

#47150 closed defect (bug) (fixed)

Insufficient contrast on empty field borders

Reported by: anevins Owned by: audrasjb
Milestone: 5.3 Priority: normal
Severity: minor Version:
Component: Media Keywords: has-screenshots wpcampus-report color-contrast form-controls has-patch
Focuses: ui, accessibility Cc:
PR Number:

Description (last modified by afercia)

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

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

Issue description
Some interface components in the "Featured Image" modal have
insufficient color contrast for their borders when empty, below the
minimum threshold of 3:1 for interface components:

Caption, Alt Text and Description field borders: light-grey (#ddd) on lighter grey (#f3f3f3): 1.35:1
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

    .media-frame input[type=email], .media-frame input[type=number], .media-frame input[type=password], .media-frame input[type=search], .media-frame input[type=text], .media-frame input[type=url], .media-frame select, .media-frame textarea {
        ...
        border-width: 1px;
        border-style: solid;
        border-color: #ddd;
    }

Remediation Guidance
Darken the border-color to create a minimum contrast ratio of 3:1.

Recommended Code

    .media-frame input[type=email], .media-frame input[type=number], .media-frame input[type=password], .media-frame input[type=search], .media-frame input[type=text], .media-frame input[type=url], .media-frame select, .media-frame textarea {
        ...
        border-width: 1px;
        border-style: solid;
        border-color: #8f8f8f;
    }

Relevant standards

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-44 in Tenon's report

Note: The grey backgrounds #f1f1f1 or #f3f3f3 are used in many other places in WordPress (e.g. Setting Pages, etc.) so I guess it would need some more exploration.

Attachments (11)

57186390-11d60f80-6e93-11e9-9dfe-71295faf66b0.png (86.0 KB) - added by anevins 6 months ago.
border-color-suggestion-as-it-with-shadow.png (31.1 KB) - added by audrasjb 4 months ago.
1. Border color suggestion applied "as it" without editing the anything else
border-color-suggestion-without-shadow.png (30.5 KB) - added by audrasjb 4 months ago.
2. Border color contrast patched and box-shadow removed
Screen Shot 2019-07-30 at 10.31.18 AM.png (52.6 KB) - added by nrqsnchz 3 months ago.
gutenberg-style-inputs.png (56.6 KB) - added by nrqsnchz 3 months ago.
47150.diff (705 bytes) - added by audrasjb 3 months ago.
Add gutenberg styles to media modal forms elements
Capture d’écran 2019-08-17 à 09.54.40.png (221.4 KB) - added by audrasjb 3 months ago.
47150.diff result
47150.2.diff (1000 bytes) - added by audrasjb 2 months ago.
Change media modal border color + add focus styles
Capture d’écran 2019-08-27 à 08.36.45.png (214.2 KB) - added by audrasjb 2 months ago.
New border color + focus styles
47150.3.diff (1022 bytes) - added by kjellr 5 weeks ago.
47150.4.diff (1.2 KB) - added by afercia 5 weeks ago.

Download all attachments as: .zip

Change History (45)

#1 @afercia
6 months ago

  • Keywords color-contrast form-controls added

#2 @afercia
6 months ago

  • Milestone changed from Awaiting Review to 5.3

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


5 months ago

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


5 months ago

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


4 months ago

@audrasjb
4 months ago

  1. Border color suggestion applied "as it" without editing the anything else

@audrasjb
4 months ago

  1. Border color contrast patched and box-shadow removed

#6 @audrasjb
4 months ago

  • Keywords needs-design-feedback added
  • Owner set to audrasjb
  • Status changed from new to assigned

In the screenshots above, 2 solutions I tested:

  1. Border color suggestion applied "as it" without editing the anything else
  2. Border color contrast patched and box-shadow removed

In my opinion, solution 2 is better visually.
We need some design advices here :-)

#7 @afercia
4 months ago

See also the feedback from @melchoyce in #47153: use the Gutenberg style.

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


3 months ago

#9 @nrqsnchz
3 months ago

I think using Gutenberg's style is a good idea to try.

#10 @nrqsnchz
3 months ago

The exmaple above was just using Gutenberg's border color, here's an example that also uses all the other input styles:

padding: 6px 8px;
box-shadow: 0 0 0 transparent;
transition: box-shadow 0.1s linear;
border-radius: 4px;
border: 1px solid #8d96a0;

#11 @kjellr
3 months ago

This issue refers specifically to the Media modal, but I believe it applies to most of the Admin fields. WordPress uses the same field border color everywhere — regardless of whether its on a white background or a gray one. We'd likely want to update it in all cases. Here are a few screenshots of those Gutenberg-style fields throughout the UI:

https://cldup.com/L8W78L4nPn.png

https://cldup.com/TE-0HiOPj4.png

https://cldup.com/N4MuOgj1EI.png

https://cldup.com/pPNXYrE1gu.png

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


3 months ago

#14 @audrasjb
3 months ago

  • Keywords has-patch added; needs-patch needs-design-feedback removed

Let's start with the media modal form elements.
47150.diff adds Gutenberg styles to the media modal (see screenshot below).

@audrasjb
3 months ago

Add gutenberg styles to media modal forms elements

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


3 months ago

#16 @audrasjb
2 months ago

  • Keywords needs-design-feedback added

Hi,

Adding needs-design-feedback keyword. That'd be great if the design team could validate 47150.diff so it could be committed. See screenshot above.
cc @karmatosed @melchoyce :)

As a reminder, this patch is only adding Gutenberg styles to the media modal (#47153 is adding it to the reste of the interface).

Last edited 2 months ago by audrasjb (previous) (diff)

#17 @karmatosed
2 months ago

  • Keywords needs-design-feedback removed

I'm approving assuming it's using the colours @kjellr suggested, which seems the case.

#18 @afercia
2 months ago

  • Description modified (diff)

#19 @afercia
2 months ago

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

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

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


2 months ago

#21 @kjellr
2 months ago

Thanks, @afercia. We discussed this briefly in the #design triage today:
https://wordpress.slack.com/archives/C02S78ZAL/p1566835549342100

We tried out your proposed color — #7e8993, also known as $dark-gray-200 — and it should be fine:

Current, as shown in Gutenberg:

https://cldup.com/Sq15T9V_Gw.png

New, using $dark-gray-200:

https://cldup.com/qUEl-pW5r9.png

---

I've opened a GitHub issue to propose this change on the Gutenberg end:

https://github.com/WordPress/gutenberg/issues/17199

@audrasjb
2 months ago

Change media modal border color + add focus styles

@audrasjb
2 months ago

New border color + focus styles

#22 @audrasjb
2 months ago

Hi,

In 47150.2.diff

  • change #8d96a0to #7e8993 (dark-gray-200) for border-color
  • use Gutenberg focus styles an media modal inputs

#23 @kjellr
2 months ago

Thanks, @audrasjb. This does appear to work nicely on the Featured image screen, but I think this should really be rolled out more globally. If not for all fields at once, then at least for the other media-related fields. I'm not seeing it get picked up for the Attachment Details modal for instance:

Featured Image:

https://cldup.com/KgLgKVnTKV.png

Attachment Details:

https://cldup.com/0kT7BK3vrU.png

#24 @audrasjb
2 months ago

@kjellr thanks for your test.
Yes, that make sense but this modal is not part of the editor and would probably fit better with #47153 in my opinion.

However, we could totally handle both modals in this ticket it you prefer :)

#25 @kjellr
2 months ago

Ah, yes. Thanks — I forgot that there was another ticket for that!

Since the solution to both of these tickets is the same — and this is a global change — I actually think it makes sense to close this ticket in favor of that more broad one. That way, if we change these styles during the course of implementing #47153, we won't have to go back in and readjust any styles that were previously deployed as part of this patch.

But in general, I think this fix works, and as long as they both make it in and are in sync by 5.3 I think we're good. 🙂

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


2 months ago

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


2 months ago

#28 @kjellr
7 weeks 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.


7 weeks ago

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


6 weeks ago

@kjellr
5 weeks ago

#31 @kjellr
5 weeks ago

Just attached a super-minor update. 47150.3.diff updates the blue border color to #007cba to sync up with Gutenberg, and with the color used in the latest patch for #47153.

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

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


5 weeks ago

@afercia
5 weeks ago

#33 @afercia
5 weeks ago

47150.4.diff refreshes the patch and removes outline-offset: -2px;, not recommended any longer for Windows High Contrast Mode.

#34 @afercia
5 weeks ago

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

In 46244:

Accessibility: Improve and modernize user interface controls for better contrast. Fourth part: Media Views form controls.

Props anevins, audrasjb, nrqsnchzm, kjellr, karmatosed.
Fixes #47150.

Note: See TracTickets for help on using tickets.