-
Notifications
You must be signed in to change notification settings - Fork 2.9k
Closed
Description
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#faf9f81.05:1 or shadowrgba(0,0,0,0.14)1.38:1filledDarker:#f5f5f5input background fails vs. white background 1.09:1 or shadowrgba(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
#BDBDBDand placeholder text#707070, 2.63:1
cc @smhigley
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
Type
Projects
Status
Done