id	summary	reporter	owner	description	type	status	priority	milestone	component	version	severity	resolution	keywords	cc	focuses	prnumber
47150	Insufficient contrast on empty field borders	anevins	audrasjb	"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**
* 1.4.11 Non-text Contrast (Level AA) https://www.w3.org/TR/WCAG20/#visual-audio-contrast-without-color

**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 `#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.''"	defect (bug)	closed	normal	5.3	Media		minor	fixed	has-screenshots wpcampus-report color-contrast form-controls has-patch		ui, accessibility