Skip to content

Disabled inputs look the same as enabled inputs in dark themes #4356

@iansan5653

Description

@iansan5653

In light themes, disabled inputs are clearly distinguishable from regular inputs. This is really useful for determining which inputs to fill, and it helps users understand why an input cannot be focused.

Regular vs disabled TextInput in light theme, showing that the disabled input looks faded out and has a gray background

In dark themes there is no such distinction. Disabled inputs look exactly the same as regular inputs:

In dark theme, both the regular and disabled inputs look exactly the same

The same is true in high contrast dark themes:

The inputs also look the same in dark high contrast theme

While I don't know if there's a specific WCAG standard governing disabled input styling, I believe this is still an accessibility concern. A mouse user is able to hover over the input and see that it can't be clicked, but they will still be confused as to why, since the input doesn't look disabled. A keyboard user will be worse off, as they will see the input and expect it to be focusable, yet when navigating the page they will be unable to activate it. A voice control user will also be unable to activate the input and won't be able to see why. This is confusing for all users, but it's especially confusing for users who are using less common input modalities.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions