1755564 - Spell checker dotted line is badly visible to colour blind people in dark mode

Status: RESOLVED FIXED

(Thunderbird :: Theme, enhancement)

Description

[ygrange]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:96.0) Gecko/20100101 Firefox/96.0

Steps to reproduce:

Open Thunderbird or (in dark mode).

Type the word sdijoch
(I am not sure if this is not a problem with a component shared between thunderbird and firefox since it also happens on this page)

Actual results:

A red dotted line appears under sdijoch. Because the background is dark, the red dots are sheer invisible to my eyes.

Expected results:

Dots appear that I can actually see (maybe just give the the option to configure it myself and I am happy).

Comment 1

[Elizabeth Mitchell]

I am confirming that inside Windows the spell check appears as red on a dark gray background (as a red squiggly line). That is not enough color contrast. I will test this on MacOS to confirm further and compare.

Comment 2

[Alessandro Castellani [:aleca]]

Good, thanks for confirming the bug.
Feel free to take it and fix it you want, or you can ask for some directions and help to Richard (Paenglab) since he's the theme module owner and might be able to guide you.
Not sure if the red line is something coming from toolkit (Firefox shared code) or something we do.

Comment 3

[Elizabeth Mitchell]

In MacOS, the spell check is a dotted red line, which is even less legible than what is visible in Windows (a red squiggly line).

With color vision differences, the visibility further decreases.

I plan to look into this further in the future.

Comment 4

[Elizabeth Mitchell]

This problem also exists inside Firefox in dark mode.

Comment 5

[Alessandro Castellani [:aleca]]

Gentle ping to Emilio to see if he has some ideas on where this is styled and if there's a way to tweak it, or it inherits the OS style.

Comment 6

[Emilio Cobos Álvarez (:emilio)]

Right now this is in https://searchfox.org/mozilla-central/rev/3c194fa1d6f339036d2ec9516bd310c6ad612859/widget/windows/nsLookAndFeel.cpp#183-185 for windows (and similar code paths for other platforms). It seems all platforms hard-code both light and dark colors to red.

You can play with the ui.spellCheckerUnderline and ui.spellCheckerUnderline.dark and suggest better colors potentially? I'd be happy to implement that.

What do other browsers do here btw?

Comment 7

[Alessandro Castellani [:aleca]]

Redirecting the request to Elizabeth, I'll let her handle this to check other browsers and find a better AAA contrast colors.

Comment 8

[Elizabeth Mitchell]

Thank you. I will look into the accessibility on this and recommend colors that would be more accessible in dark mode. I will also look into what other browsers do for spell check in dark mode.

Comment 9

[Elizabeth Mitchell]

I researched this.

The best color contrast across all types of color visibility is going to be a lighter color.

This light blue is all around accessible, but is not in the red color family.

• #76EDFF

If you want to use a color in the red family, it will need to be an orange or pink to be accessible, especially for people who can't see reds vividly. The color contrast of red to the dark gray background used in dark mode is not enough contrast.

Here are some recommendations in the red family (oranges and pinks):

• #D66BBD
• #FFA05C
• #FF99A2

These are not as recommended due to less contrast, but are also possible:

• #F56600
• #FFC0CB

All of these are colors with screenshots of how this looks in the interface are available at this Figma link. I will clean up the Figma preview so it is viewable in smaller pieces. I will get to this part later.

Testing used the WebAIM: Contrast Checker and Firefox's accessibility color tool in Developer Tools.

I was not able to find information on how Chrome and Edge deal with spell checkers in dark mode.

Comment 10

[Elizabeth Mitchell]

Based on the information above, let me know if you have questions or feedback. Thank you!

Comment 11

[Emilio Cobos Álvarez (:emilio)]

Hi, thanks for all that! I think my preference would be to prefer the red-ish tone (so my preferences off-hand would be FFA05C / FF99A2). But! I just remembered we have an existing precedent for this, for active links (which in light mode also use almost red, #ee0000, via the browser.active_color pref). We're using #ff6666 for those, do you think that would work for the spell-checker as well?

I'll put up a patch tentatively with that but it's one line to change either way after my patches.

Comment 12

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1755564 - Make SpellCheckerUnderline go through the stand-in color code-path. r=mstange,spohl

This doesn't change behavior since it's red for all platforms including
the standins.

Depends on D157748

Comment 13

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1755564 - Tweak spell checker underline color in dark mode. r=mstange,spohl

I think this is a slightly better color and saves me from actually
making a decision over the options in comment 9 and so on.

I'll ask Firefox UX to take a look at comment 9 so that they can
evaluate and make a decision (and maybe tweaking our link colors), if we
want to change it.

Depends on D163402

Comment 14

[Emilio Cobos Álvarez (:emilio)]

Attachment: test-case

Comment 15

[Elizabeth Mitchell]

Hi,

#ff6666 is better contrast than the current color and does better with accessibility than the light mode color. Here are the WebAIM Contrast Checker results. I also checked this with the different color vision filters in Firefox and the spell check line is visible underneath the text.

Is #ee0000 the color used for the light mode spellchecker?

Thank you!

Comment 16

[Emilio Cobos Álvarez (:emilio)]

No, for light mode spell-checking we use #ff0000

Comment 17

[Elizabeth Mitchell]

Thank you!

Comment 18

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/7d5e54f69007
Make SpellCheckerUnderline go through the stand-in color code-path. r=geckoview-reviewers,calu
https://hg.mozilla.org/integration/autoland/rev/05e6afe9862e
Tweak spell checker underline color in dark mode. r=spohl

Comment 19

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/7d5e54f69007
https://hg.mozilla.org/mozilla-central/rev/05e6afe9862e