2063178 - Checkboxes: Default vs. disabled states are not differentiable when adjacent to each other (light mode and dark mode)

Status: NEW

(Toolkit :: UI Widgets, defect)

Description

[Natalie Stroud [:nstroud]]

Notes

This issue exists:

• in the Nova Component library Figma
• with the Nova pref turned ON and OFF

STR

Figma check

1. Open the 'Checkbox + Radio + Toggle' page in the Nova Components library Figma
2. Find the checkbox component
3. From here, grab the hex codes of the fill colors for the disabled unchecked checkbox and the default unchecked checkbox in light mode
4. Use any color contrast checking tool and plug in the hex code values to test. (WebAIM Contrast Checker link in case you need a contrast checker)
5. Now, grab the hex codes of the border colors for the disabled unchecked checkbox and the default unchecked checkbox in light mode
6. With these hex codes, repeat step 4
7. Move over to the dark mode checkboxes and repeat steps 3 through 6

--

Storybook check

1. Open Nightly
2. Visit the 'With Nested Fields' checkboxes
3. This should take you to the 'With Nested Fields' checkboxes Storybook page in dark mode. Click on the first checkbox so that it's checked and the 2nd and 3rd checkboxes become enabled. Then, in the bottom half of the page, click on the 'Controls' tab
4. Locate disabled - there should be a toggle button with 'False' and 'True'
5. When grabbing the hex code for a disabled state, change the toggle to 'True'. For the default state, change the toggle to 'False'
6. From here, grab the hex codes of the fill colors for the disabled unchecked checkbox and the default unchecked checkbox.
7. Use any color contrast checking tool and plug in the hex code values to test. (WebAIM Contrast Checker link in case you need a contrast checker)
8. Now, grab the hex codes of the border colors for the disabled unchecked checkbox and the default unchecked checkbox
9. With these hex codes, repeat step 7
10. Return to the 'With Nested Fields' checkbox Storybook page and change from dark mode to light mode
11. Repeat steps 6 through 9
12. Once you've finished both tests, open a new tab and go to about:config
13. Click the 'Accept the Risk and Continue' button
14. In the textbox, type 'nova'
15. Find browser.nova.enabled and change the pref value. So if it's 'true' change it to 'false' and vice versa.
16. Return to the Storybook tab with the 'With Nested Fields' checkboxes
17. Repeat steps 6 through 10

You have now completed color contrast checks for unchecked checkboxes in light and dark mode, with the Nova pref ON and OFF. To do this test for 'checked' checkboxes in the default and disabled states, use the checked checkbox from step 3. To test the disabled state, use the False/True toggle in the disabled section located in the 'Controls' tab from the bottom half of the page

---

Actual

Storybook / Light Mode / Nova ON / Unchecked

disabled fill #FBFBFD + default fill #FFFFFF
Contrast ratio: 1.03:1

disabled border #C3C3CC + default border #8F8F9D
Contrast ratio: 1.82:1

---

Storybook / Light Mode / Nova OFF / Unchecked

disabled fill #FFF + default fill #FFF
Contrast ratio: 1:1

disabled border #C7C7CE+ default border #8F8F9D
Contrast ratio: 1.89:1

---

Figma / Light Mode / Unchecked

disabled fill #FFF + default fill #FFF
Contrast ratio: 1:1

disabled border #C7C7CE + default border #8F8F9D
Contrast ratio: 1.47:1

---

Storybook / Dark Mode / Nova ON / Unchecked

disabled fill #222128 + default fill #2B2A33
Contrast ratio: 1.12:1

disabled border #8F8F9D + default border #8F8F9D
Contrast ratio: 1:1

---

Storybook / Dark Mode / Nova OFF / Unchecked

disabled fill #222128 + default fill #2B2A33
Contrast ratio: 1.12:1

disabled border #8F8F9D + default border #8F8F9D
Contrast ratio: 1:1

---

Figma / Dark Mode / Unchecked

disabled fill #252428+ default fill #252428
Contrast ratio: 1:1

disabled border #727175 + default border #949297
Contrast 1.57:1

---

Storybook / Dark Mode / Nova ON / Checked

disabled fill #8F8F9D+ default fill #B89CFF
Contrast ratio: 1.4:1

---

Storybook / Dark Mode / Nova OFF / Checked

disabled fill #8F8F9D + default fill #00CADB
Contrast ratio: 1.59:1

---

Figma / Dark Mode / Checked

disabled fill #746992+ default fill #B89CFF
Contrast ratio: 2.21:1

disabled checkmark #252428 + default checkmark #252428
Contrast ratio: 1:1

---

Figma / Light Mode / Checked

disabled fill #9F94BC + default fill #764EDD
Contrast ratio: 1.9:1

disabled checkmark #FFFFFF + default checkmark #FFFFFF
Contrast ratio: 1:1

---

Expected

Adjacent states are considered differentiable if:

• at least one shared visual part (such as a border or fill) has a color contrast ratio of 3:1 or higher
• or one component's state contains a non-color visual indicator (e.g., checked vs. unchecked).

Components in a hover state are considered differentiable by the location of a pointer

Comment 1

[BugBot [:suhaib / :marco]]

The severity field is not set for this bug.
:mstriemer, could you have a look please?

For more information, please visit BugBot documentation.