Skip to content

Input has inadequate contrast in filledDarker/filledLighter #21449

@ecraig12345

Description

@ecraig12345

From #21174 (comment):

The filledLighter and filledDarker appearances have multiple issues with inadequate color contrast, at least on the backgrounds they were tested against: white for filledDarker, #faf9f8 (story background in the react-components storybook) for filledLighter. This violates WCAG 1.4.1 use of color.

If the filled appearances are only meant to be used against certain backgrounds, this needs to be noted very clearly in the docs; however, modifying the design to be accessible by default would be better. (Relying on a shadow for visual distinction when the shadow is optional is also a problem.)

Specific issues:

  • Distinguishing an empty input (no value or placeholder) from the surrounding page: For filled appearances, this could be achieved with either contrast of the input background against the page background, or contrast of the optional shadow against the page background. Currently, there's inadequate contrast in either case:
    • filledLighter: white input background fails vs. doc site background of #faf9f8 1.05:1 or shadow rgba(0,0,0,0.14) 1.38:1
    • filledDarker: #f5f5f5 input background fails vs. white background 1.09:1 or shadow rgba(0,0,0,0.14) 1.38:1
  • Distinguishing enabled and disabled states of an input:
    • If empty: these try to distinguish using colored background for enabled and transparent for disabled, which has the same issue as before
    • Enabled with placeholder vs. disabled with value: inadequate color different between disabled text #BDBDBD and placeholder text #707070, 2.63:1

cc @smhigley

Metadata

Metadata

Assignees

Type

No type

Projects

Status

Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions