1995394 - Cancel button container has insufficient color contrast (below 3:1)

Status: RESOLVED INVALID

(Firefox :: PDF Viewer, defect)

Description

[Daniel Bodea [:danibodea]]

Attachment: minimum color contrast on Cancel button.png

Note

• The Cancel button from the Add comment dialog has a small color contrast to the background of the dialog.

Found in

• Beta v145.0b3

Affected versions

• Beta v145.0b3
• Nightly v146.0a1

Tested platforms

• Affected platforms: all
• Unaffected platforms: none

Steps to reproduce

1. Load a PDF.
2. Insert a highlight (or any other element).
3. Choose nay color (or leave default).
4. Click the Add/Edit comment button under the selected element.

Expected result

• The color contrast between the Cancel button background color and the dialog's background color is al least 3:1.

Actual result

• The color contrast between the Cancel button background color and the dialog's background color is about 1.13:1.

Regression range

• Not a regression.

Additional notes

• This is consistent with the Figma design and it appears visible enough avoid confusion, however, non-text elements (such as button containers) must meet a minimum contrast ratio of 3:1 between the container color and its background.
• This issu reproduces for all element types (highlight, text insert, etc.), any color selection and any browser theme.

Comment 1

[Calixte Denizet (:calixte)]

:danibodea, do you have a link about this 3:1 ratio between the two background colors ?
For example in about:settings, they're several buttons here or in the dialogs (like the one for the font settings) and the contrast ratio isn't 3:1 at all.
Even for the bookmark buttons or the tab ones, the background is the same as the one for Firefox.

Comment 2

[Daniel Bodea [:danibodea]]

I believe this rule is best described here, at the User Interface Components section:

• https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html

For clearer and more accessible explanations, please refer to the following sources:

• https://www.digitalpolicy.gov.hk/en/our_work/digital_government/digital_inclusion/accessibility/promulgating_resources/handbook/new_success_criteria/wcag_1411.html#:~:text=Success%20Criterion%201.4.-,11%20%E2%80%93%20Non%2DText%20Contrast,contrast%20ratio%20against%20adjacent%20colour.&text=The%20grey%20textboxes%20on%20the,with%20low%20vision%20to%20identify.&text=Dark%20border%20is%20applied%20to,they%20can%20be%20identified%20easily.
• https://www.audioeye.com/post/accessibility-for-buttons/
• https://yatil.net/blog/non-text-contrast-in-detail-ui-components

Note: This report compares the button’s background with the dialog’s background. However, there is a thin white/gray border around the button that may need to be compared with the dialog background instead. This suggests I may have misinterpreted the guidelines.

It might be helpful to bring in a more experienced Accessibility Engineer for a second opinion, as these guidelines can be difficult to interpret with certainty.

@Anna: Can you help me understand the minimum color contrast requirements for this specific situation?

Comment 3

[❌ Anna Yeddi [:ayeddi] ❌ On leave until 2027-01-04]

Attachment: White Cancel button label text against its light pink background with the Colour Contrast Analyzer showing 2.3:1 in contrast ratio that is failing Text Contrast criterion

The label text in this case has insufficient color contrast against its light pink background - it is 2.3:1 in contrast ratio that is failing the WCAG 2.2 Level AA Text Contrast criterion. It is expected to be 4.5:1 or more for the text of this size.

Comment 4

[Calixte Denizet (:calixte)]

:danibodea, how did you create this annotation ?
Is it a pink highlight ?
I tried to play with the ink stuff (a.k.a. drawing tool) and I don't manage to have the same pink.
Could you tell me what tool you used and if you select a color from the color picker, could you give the RGB values ?
Your pink is very light and normally the color is computed to have at least a ratio 4.5:1 when in dark mode, see:
https://github.com/mozilla/pdf.js/blob/520363b350648ea066b4bd6b3d5697398a7e4096/src/display/display_utils.js#L911
My function can be wrong for sure but I'm a bit doubtful.

Is your screen correctly calibrated ?

Comment 5

[❌ Anna Yeddi [:ayeddi] ❌ On leave until 2027-01-04]

(In reply to Daniel Bodea [:danibodea] from comment #2)

I believe this rule is best described here, at the User Interface Components section:

• https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html

[...]

Note: This report compares the button’s background with the dialog’s background. However, there is a thin white/gray border around the button that may need to be compared with the dialog background instead. This suggests I may have misinterpreted the guidelines.

It might be helpful to bring in a more experienced Accessibility Engineer for a second opinion, as these guidelines can be difficult to interpret with certainty.

@Anna: Can you help me understand the minimum color contrast requirements for this specific situation?

Thank you for tagging me, @Daniel! I agree, the Non-text contrast Success Criterion is a confusing one and the Understanding documentation for it often adds even more to the confusion. And the boundaries description from that Understanding doc is a good example of that gray area of the Guidelines (text styling is mine and added for clarity):

This success criterion does not require that controls have a visual boundary indicating the hit area, but if the visual indicator of the control is the only way to identify the control, then that indicator must have sufficient contrast.
Basically, if the "Cancel" button would be an inline control surrounded by text or be right next to the "Add comment" dialog's heading, then the border or, if no border is provided, the background of a button would be expected to have at least 3:1 in color contrast for that border (or background) color against the dialog's own background color.

In this case, these button would fail under this special case because of the button's position within the containing dialog:

A button which has a distinguishing indicator such as position, text style, or context does not need a contrasting visual indicator to show that it is a button, although some users are likely to identify a button with an outline that meets contrast requirements more easily.

Thus, while the pink background of the "Cancel" button is not failing WCAG for the lack of contrast against the pink background of the dialog, it does fail WCAG for the lack of color contrast against this button's text label color, which would be access-S3 (if you'd like to edit the bug's title, we could set the a11y severity as such)

Comment 6

[Calixte Denizet (:calixte)]

:danibodea, or maybe you created the annotation in light mode, then switch to dark mode, did you ?
The colors aren't updated when switching from a light to dark (or the opposite) mode.

Comment 7

[Daniel Bodea [:danibodea]]

Attachment: restart fixes the issue.png

Yes, I was changing colors and themes and must have forgot to restart, so in the screenshot above, bug 1989574 also reproduced, which influences the button's text color.

Considering Anna's input, I believe we can close this report because the label's color should have been dark.

Comment 8

[Daniel Bodea [:danibodea]]

because the originally reported issue is not valid, I will close thie report as INVALID.