Insufficient contrast on empty field borders

[karlgroves]

Insufficient contrast on empty field borders

• 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

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

[afercia]

Worth noting the media modals aren't part of Gutenberg. This issue should be moved to the core Trac under the Media component.

Also, 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.

[melchoyce]

Full report screenshot:

[anevins12]

Moved to Trac: https://core.trac.wordpress.org/ticket/47150

[afercia]

Closing as moved to Trac.