WordPress.org

Make WordPress Core

Opened 2 years ago

Last modified 13 months ago

#47153 closed defect (bug)

Field boundaries have insufficient color contrast — at Initial Version

Reported by: anevins Owned by:
Milestone: 5.3 Priority: normal
Severity: minor Version:
Component: Administration Keywords: needs-post-mortem has-screenshots wpcampus-report color-contrast form-controls has-patch 5-3-admin-css-changes has-dev-note
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:

Change History (2)

Note: See TracTickets for help on using tickets.