2060364 - Disabled buttons in native panels do not have enough contrast in dark mode

Status: RESOLVED DUPLICATE of bug 2063720

(Firefox :: Theme, defect)

Description

[Erik Nordin [:nordzilla]]

Attachment: enabled-vs-disabled.png

Description

I was looking at the SelectTranslationsPanel under the nova design, and the "Translate full page" button does not have enough contrast between active and disabled to meet WCAG standards. It fails both AA and AAA.

I've attached a screenshot of side-by-side panels.

• The left-side panels have the button enabled.
• The right-side panels have the button disabled.
• The top panels are from Linux.
• The button panels are from macOS.

Steps to Reproduce

1. Go to a translatable web page.
2. Select some text.
3. Right click and click the "Translate selection..." option.

• The button is enabled if the source and target languages differ.
• The button is disabled when the source and target languages are the same.

Comment 1

[Erik Nordin [:nordzilla]]

Attachment: enabled-vs-disabled.png

I accidentally attached the wrong file, which contained only the macOS panels. This one correctly has all 4 as described above.

Comment 2

[Morgan Reschenberg [:morgan]]

Natalie, was this flagged as part of the buttons feedback during the Nova components review?

If not, can you please add it to the library?
In either case, please include a link to this bug in the comment thread so the design systems folk know where this issue is tracked.

Comment 3

[Natalie Stroud [:nstroud]]

Hey Morgan! It has not but I have a note to get that bug in along with radios and checkboxes like we've been discussing.

One note here- I tested contrast between the 'Translate full page' button next to the 'Done' button in Nightly on my Windows machine and the Nova pref enabled. When I test text to text, 'fill' to 'fill', for the disabled and non-disabled versions, I'm getting that everything passes at >3:1 with the exception of the purple border to purple fill between the two.

‘Done’ vs. ‘Translate full page’ (disabled)

• Text meets contrast of 8.07:1 (contrast results)
• Button fill colors meet contrast 6.78:1 (contrast results)
• TFP purple border is 1:1 with Done purple button (contrast results)
  • TFP border has opacity applied

‘Done’ v ‘Translate full page’ (not disabled)

• Text meets contrast of 14.96:1 (contrast results)
• Button fill colors meet contrast 6.78:1 (contrast results)
• TFP purple border is 1:1 with Done purple button (contrast results)

---

I do not have access to a Linux machine to test this so I tried to test using the screenshot in this bug and an eyedrop tool with a contrast checker. Please note that the color values could be off. Regardless, in this case there are definitely contrast issues

‘Linux’

‘Done’ v ‘Translate full page’ (disabled)

• Button fill colors 2.33:1 (contrast results)
• Border and fill colors 1.83:1 (contrast results)
• Text colors 1.74:1 (contrast results)

‘Done’ v ‘Translate full page’ (not disabled)

• Button fill colors 2.06:1 (contrast results)
• Border and fill 1.53:1 (contrast results)
• Text colors 1.08:1 (contrast results)

---

@morgan, is this a Linux thing? I think the versions with the Nova purple suffice here given there's >3:1 contrast in multiple areas.

Comment 4

[Morgan Reschenberg [:morgan]]

(In reply to Natalie Stroud [:nstroud] from comment #3)

Hey Morgan! It has not but I have a note to get that bug in along with radios and checkboxes like we've been discussing.

One note here- I tested contrast between the 'Translate full page' button next to the 'Done' button in Nightly on my Windows machine and the Nova pref enabled. When I test text to text, 'fill' to 'fill', for the disabled and non-disabled versions, I'm getting that everything passes at >3:1 with the exception of the purple border to purple fill between the two.

Thanks for testing!
I believe Erik's report is about the contrast between a single button when it is enabled and that same single button when it becomes disabled (ex. Done button enabled vs Done button disabled, and separately Translate full page button enabled vs. Translate full page button disabled). It looks like you've tested across button variants instead (Done button enabled vs. Translate full page button enabled). It's great to know those pass, as their distinguishability is also part of the WCAG criteria we're assessing.

@morgan, is this a Linux thing?

We do use different colours for AccentColor on Linux, which influence the way these buttons are rendered. Erik's screenshots above include both the classic Nova variants and the Linux-specific ones.

Can you confirm if the contrast between a single button's enabled and disabled state exists in both the Nova library and the Linux screenshot?

Comment 5

[Natalie Stroud [:nstroud]]

Thank you Morgan! I re-tested and have results below. Just an FYI - the 'Done' button doesn't appear to be disabled in the Linux screenshots so I only tested 'Translate full page'. With Nova, since I'd tested buttons and reported the adjacent state contrast values, I was able to grab the values for 'Done' when it's in the disabled state. Let me know if you need anything else! :)

---

Nova / Done button

disabled fill #6F648D + default fill #B89CFF
Contrast ratio 2.37:1

disabled text #1F1E22 + default text #252428
Contrast ratio 1.07:1

---

Nova / Translate page button

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

disabled border #8773B9 + default border #B89CFF
Contrast ratio: 1.78:1

disabled text #B6B5B9 + default text #FCFBFF
Contrast ratio 1.97:1

---

Linux / Translate full page

disabled fill #3b3b3b + default fill #242329
Contrast ratio 1.13:1

disabled text #B9B9B9 + default text #FEFEFE
Contrast ratio 1.94

disabled border #5A685D + default border #4A544D
Contrast ratio 1.33:1

Comment 6

[Natalie Stroud [:nstroud]]

ni @me, need to check 'Done' button on Linux side and apply opacity layer (this is the technique being used in Nova)

Comment 7

[Natalie Stroud [:nstroud]]

Hi Erik! Thank you for reporting this :) I'm going to go ahead and close this out as a duplicate of 2063720. Buttons in Nova have several instances where it does not pass when it comes to state to state contrast.

Thanks again!