Skip to content

[Bug]: Disabled Button lacks contrast for text and icon #35967

@vnbaaij

Description

@vnbaaij

Component

Other...

Package version

3.0.0-rc.13

@microsoft/fast-element version

2.10.0

Environment

not applicable

Current Behavior

Image

The icon and text are to light in relation to the disabled background color. There is not enough contrast. Especially with smaller buttons and smaller icons (like the shown chevron), it is hard to discern what is being shown.

Expected Behavior

The icon and text color should have enough contrast to discern it from the background. The current token selected for the color for a disabled button is not the right one.

Reproduction

https://stackblitz.com/edit/typescript-gutfxdng?file=index.html

Steps to reproduce

Open the reproduction link and just watch the displayed buttons.

Are you reporting an Accessibility issue?

yes

Suggested severity

High - No workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • The provided reproduction is a minimal reproducible example of the bug.

Metadata

Metadata

Assignees

Type

No type

Projects

Status

No status

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions