WordPress.org

Make WordPress Core

Opened 6 weeks ago

Last modified 5 minutes ago

#47153 new defect (bug)

Field boundaries have insufficient color contrast

Reported by: anevins Owned by:
Milestone: 5.3 Priority: normal
Severity: minor Version:
Component: Administration Keywords: needs-patch has-screenshots wpcampus-report color-contrast form-controls
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 (2)

57186393-2b775700-6e93-11e9-9935-c6770c0d7db9.png (258.0 KB) - added by anevins 6 weeks ago.
57186399-5792d800-6e93-11e9-9d03-dc633d1b5795.png (112.1 KB) - added by anevins 6 weeks ago.

Download all attachments as: .zip

Change History (7)

#1 @afercia
6 weeks ago

  • Component changed from Media to Administration

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

#2 @afercia
6 weeks ago

  • Keywords color-contrast form-controls added

#3 @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 #design by karmatosed. View the logs.


5 minutes ago

Note: See TracTickets for help on using tickets.