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 is not enough contrast. Here are some recommendations in the red family (oranges and pinks): - #D66BBD - #FFA05C - #FF99A2 Not as recommended, but also possible: - #F56600 - #FFC0CB All of these are colors with screenshots of how this looks in the interface are available at [this Figma link](https://www.figma.com/proto/cMKiBxhwisvm10stHggW4I/Thunderbird-Design-System?node-id=2302%3A17945&scaling=min-zoom&page-id=2279%3A17911). 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](https://webaim.org/resources/contrastchecker) 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.
Bug 1755564 Comment 9 Edit History
Note: The actual edited comment in the bug view page will always show the original commenter’s name and original timestamp.
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](https://www.figma.com/proto/cMKiBxhwisvm10stHggW4I/Thunderbird-Design-System?node-id=2302%3A17945&scaling=min-zoom&page-id=2279%3A17911). 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](https://webaim.org/resources/contrastchecker) 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.
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](https://www.figma.com/proto/cMKiBxhwisvm10stHggW4I/Thunderbird-Design-System?node-id=2302%3A17945&scaling=min-zoom&page-id=2279%3A17911). ~~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](https://webaim.org/resources/contrastchecker) 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.