WordPress.org

Make WordPress Core

Opened 6 weeks ago

Last modified 4 hours 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: needs-patch has-screenshots wpcampus-report color-contrast form-controls needs-design-feedback
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 (3)

57186390-11d60f80-6e93-11e9-9dfe-71295faf66b0.png (86.0 KB) - added by anevins 6 weeks ago.
border-color-suggestion-as-it-with-shadow.png (31.1 KB) - added by audrasjb 4 hours 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 hours ago.
2. Border color contrast patched and box-shadow removed

Download all attachments as: .zip

Change History (9)

#1 @afercia
6 weeks ago

  • Keywords color-contrast form-controls added

#2 @afercia
6 weeks ago

  • Milestone changed from Awaiting Review to 5.3

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


6 days ago

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


6 days ago

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


7 hours ago

@audrasjb
4 hours ago

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

@audrasjb
4 hours ago

  1. Border color contrast patched and box-shadow removed

#6 @audrasjb
4 hours 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 :-)

Note: See TracTickets for help on using tickets.