Background
Although minimum contrast is not required on disabled elements, the following system elements could be more contrasted since now they are just 1.61:1:
- Disabled buttons
- Disabled FilterChip
- Disabled selected Checkbox
- Disabled selected Radio
Proposal
At the moment we are using content-inverted #fff for disabled text/icon. There are a few different options which could be used instead. The design of these options can be found in Figma. The design proposal after rounds of design review and feedback can be found below.
Design spec
Open questions
From WCAG guidelines, which have changed in the past on how to deal with disabled components, we've come to reach out about this specific question to AFB in T355337 and gathered this feedback:
To have a contrast ratio of at least 3:1 [not as strict requirement, but as best practice]
Decisions
- Through some rounds of design feedback, we have determined that it is not necessarily more contrast that is needed for disabled elements, but more clarity that an element is disabled and difference from enabled elements. This results in some lighter disabled styles.
- Disabled elements should be using -disabled tokens.
- Disabled styles across interactive elements, especially form items, should be made to have consistent styles and states.
- Generally, when it comes to disabled actions such as buttons, we should discourage use and instead encourage the use of validation (as listed in our guidelines on constructing forms), except where the action is reliant on a single action, such as adding a citation. For disabled inputs, these should be disabled because they are not meant to be legible since they are unavailable as a selection/input.
Expected changes
Application.json
| Token name | new, update, or remove? | before | after |
| background-color-disabled | update | gray300 | gray200 |
| color-disabled | update | gray500 | gray400 |
| color-disabled-emphasized | new | - | gray400 |
Dark.json
| Token name | new, update, or remove? | before | after |
| background-color-disabled | update | gray600 | gray700 |
| background-color-disabled-subtle | update | gray700 | gray800 |
| color-disabled | new | - | gray600 |
| color-disabled-emphasized | new | - | gray500 |
Acceptance criteria (or Done)
Design
- Design the Figma spec sheet and add it in this task
- Update the tokens and styles within components in Figma
Code
- Update the tokens and styles within components in Code
