1546213 - reader view's default view does not have sufficient color contrast for links

Status: RESOLVED FIXED

(Toolkit :: Reader Mode, defect, P3)

Description

[Asa Dotzler [:asa]]

Attachment: image.png

According to a quick test with the color contrast checker in the Firefox developer tools, reader view's link coloring has a contrast of 3.31 which is below the 4.5 that WCAG suggests.

Comment 1

[:Gijs (he/him)]

This needs updated design colours - Abraham, are you the right person to ask about this?

Comment 2

[Abraham Wallin]

Technically, no I'm not responsible for the design of reader. But, I can suggest using #0060df which is one of the Firefox Blue from the photon design system. #0060df will have a contrast ratio of 5.62 on a white background.

Bryan Bell might be able to confirm or suggest a different color?

Comment 3

[Abraham Wallin]

Dark mode would need a different shade of blue. I'd recommend #45a1ff as it will result in a 4.69 contrast ratio on a #333 background.

Comment 4

[Julien Wajsberg [:julienw]]

Hey,
Somebody mentioned this over Twitter, so I had a quick look using the devtools :)

For desktop

normal text

#0060df (blue 60) works fine for both white (5.65 contrast) and sepia (4.80) backgrounds.
and #45a1ff (blue 40) gives indeed 4.69 in the dark background.

selected text

I also looked at the result of selected text.
white and sepia background don't change the style of it, but for dark mode, we get these values:
For the body text, we have #0095DD on white, which gives a ratio of 3.31 which isn't enough. If we want to still use a blue, what about #0060df (blue 60) here as well?
For links, we have #DD4800 on white, which gives 4.19, which isn't enough either. If we want to stay on an orange, I propose #a44900 (orange 70) from the photon spec, which gives a contrast of 5.94.

visited links

With white and sepia backgrounds, the current value is #c2e which again doesn't give enough ratio. Staying pink-ish and looking at the photon spec, I see #b5007f (magenta 70) could fit. Or #9400ff (purple 50), but I prefer magenta, which is the closer to the original color. They both work both on white and sepia backgrounds.
For dark mode, none of the magenta and purple values in the photon spec fit, so I propose my own very special color #e675fd (just played with the devtools' color picker :) ).

active color

This is the color when clicking on the buttons at the left. This is currently #0B83FF, I suggest that we use the same color as links.

Of course, this is all for Desktop, the file where all this is defined is https://searchfox.org/mozilla-central/source/toolkit/themes/shared/aboutReader.css.

For Android

The situation is different, but still bad.

1. I found this file: https://searchfox.org/mozilla-central/source/mobile/android/themes/core/aboutReader.css. I believe this is for the old Firefox for Android. I think it's different because it was here before. But I believe it's legacy now.
2. For fenix, I believe this is what's used:
   https://github.com/mozilla-mobile/android-components/blob/cb5fb4ca9d38dc06e5c073dc1fa99a946a233f61/components/feature/readerview/src/main/assets/extensions/readerview/readerview.css

Especially the link color is good for dark mode but bad for white and sepia backgrounds, with the same value #00acff:
https://github.com/mozilla-mobile/android-components/blob/cb5fb4ca9d38dc06e5c073dc1fa99a946a233f61/components/feature/readerview/src/main/assets/extensions/readerview/readerview.css#L175-L180

In dark mode the text selection is quite bad because it hasn't been updated like on desktop.

So this will need to be updated too.

Hey Abraham, Bryan isn't at Mozilla anymore so I guess it would be nice to have a rubber stamp from you :) What do you think?

Comment 5

[Abraham Wallin]

With Bryan no longer at Mozilla I guess I'm inheriting reader mode by default. Thanks for digging into this Julien. Let's go with the following on desktop.

Dark mode

• Link color = #45A1FF
• Selected background color = #3E6D9A
• Link color when selected = #fff (Keep underline)
• Visited link color = rgba(255, 26, 217, 0.3);

Light & Sepia mode:

• Link color = #0095dd (remains as is)
• Selected background color = blue-40-a30: rgba(69, 161, 255, 0.3); (remains as is)
• Link color when selected = #333 (Keep underline)
• Visited link color = #b5007f

Active link (buttons on side)

• Same as link color

Comment 6

[Julie]

Hi,
Is there any chance that this ticket will be processed soon as there is apparently all the information now?
Thank you!

Comment 7

[:Gijs (he/him)]

(In reply to Julie from comment #6)

Is there any chance that this ticket will be processed soon as there is apparently all the information now?

I mean, it's worth noting 2 things:

(In reply to Abraham Wallin from comment #5)

With Bryan no longer at Mozilla I guess I'm inheriting reader mode by default. Thanks for digging into this Julien. Let's go with the following on desktop.

Dark mode

• Link color = #45A1FF
• Selected background color = #3E6D9A
• Link color when selected = #fff (Keep underline)

I assume we also keep normal text as white, rather than the blue we currently use, or it'd be blue-on-blue which is definitely not enough contrast.

Light & Sepia mode:

• Link color = #0095dd (remains as is)

Well, comment #0 was about light mode, in which contrast is 3.31::1 for links, and in sepia it's 2.81::1. So this still needs to be more contrast-ful.

Abraham is unfortunately now also no longer at Mozilla. It looks like on in-content pages we use blue-60 ( https://searchfox.org/mozilla-central/rev/58e955b8005b4845c42e874a6b9aa5b223ef0d82/toolkit/themes/shared/in-content/common.inc.css#39 ), defined at https://design.firefox.com/photon/visuals/color.html#blue , and that yields enough contrast in both light and sepia themes, so I'll just put up a patch with that...

Comment 8

[:Gijs (he/him)]

Attachment: Bug 1546213 - fix link colours in reader mode to have more contrast, r?jaws

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/d10ecc77057b
fix link colours in reader mode to have more contrast, r=jaws

Comment 10

[Julie]

Oh you're right for contrasts! I didn't read enough carefully the comment #5.

Thank you so much for checking and fixing this ticket!

Comment 11

[Andreea Pavel [:apavel]]

https://hg.mozilla.org/mozilla-central/rev/d10ecc77057b