WordPress.org

Make WordPress Core

Opened 4 months ago

Last modified 4 days ago

#47150 assigned defect (bug)

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:

Description

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 #f3f3f3 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 (7)

57186390-11d60f80-6e93-11e9-9dfe-71295faf66b0.png (86.0 KB) - added by anevins 4 months ago.
border-color-suggestion-as-it-with-shadow.png (31.1 KB) - added by audrasjb 2 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 2 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 weeks ago.
gutenberg-style-inputs.png (56.6 KB) - added by nrqsnchz 3 weeks ago.
47150.diff (705 bytes) - added by audrasjb 4 days 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 4 days ago.
47150.diff result

Download all attachments as: .zip

Change History (22)

#1 @afercia
4 months ago

  • Keywords color-contrast form-controls added

#2 @afercia
3 months ago

  • Milestone changed from Awaiting Review to 5.3

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


2 months ago

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


2 months ago

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


2 months ago

@audrasjb
2 months ago

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

@audrasjb
2 months ago

  1. Border color contrast patched and box-shadow removed

#6 @audrasjb
2 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
2 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 weeks ago

#9 @nrqsnchz
3 weeks ago

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

#10 @nrqsnchz
3 weeks 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
2 weeks 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.


4 days ago

#14 @audrasjb
4 days 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
4 days ago

Add gutenberg styles to media modal forms elements

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


4 days ago

Note: See TracTickets for help on using tickets.