Page MenuHomePhabricator

[Accessibility] Links in dark themes don't have enough contrast
Closed, InvalidPublicBUG REPORT

Assigned To
None
Authored By
NHarateh_WMF
Sep 27 2019, 3:40 PM
Referenced Files
F30763896: Screen Shot 2019-10-16 at 2.41.31 PM.png
Oct 16 2019, 1:47 PM
F30763898: Screen Shot 2019-10-16 at 2.41.10 PM.png
Oct 16 2019, 1:47 PM
F30763903: Screen Shot 2019-10-16 at 2.41.18 PM.png
Oct 16 2019, 1:47 PM
F30763897: Screen Shot 2019-10-16 at 2.41.02 PM.png
Oct 16 2019, 1:47 PM
F30518090: IMG_0061.PNG
Oct 1 2019, 3:06 PM
F30518089: IMG_0064 2.PNG
Oct 1 2019, 3:06 PM
F30518091: IMG_0063.PNG
Oct 1 2019, 3:06 PM

Description

This was reported by one of our visually impaired users on OTRS.

I am a technically blind person with just ufficient sight to be able to read my ipad. I make extensive use of Wikipedia and happily make a small monthly conribution to your organisation. I am able to read more easily with the Wikipedia app set to a black background and white print. However, the links within articles (hyperlinks, I think they are called) remain in a sort of royal blue and are not contrasty enough to be legible for those of us who are visually impaired.
Is there any possibility that the link colouring could be made customisable or even to change the colour to a more contrasty one?
I look forward to your keeping up your excellent work.


Proposed solution

1. Update link color on black mode to #3E71D6

In order to achieve WCAG AA compliance against both the primary text color (#FFF) and the background (#000) we need to update the current blue link color on black mode to #3E71D6. Unfortunately, this new color is not WCAG AA compatible with the dark mode background color (#2E3136) so we will keep the current blue link color on dark mode (#69F) and dark mode like sepia mode will not be WCAG compliant across text and background colors. The purpose of the two non WCAG compliant modes (dark and sepia) will continue to be to provide a low contrast theme for users who have blue light sensitivity.

2. Underline links when iOS high contrast setting is detected

If a user has the iOS high contrast setting set on their device, we would like to be able to add an underline to links in the article view.

Event Timeline

I've looked into the current color contrast and it looks like Stratosphere blue (#69F) is AA or AAA compliant against our themed background colors, unfortunately it does not pass AA contrast with the plain text color (#FFF). In order to pass contrast against the plain text color we would need to change the link color to #3E71D6 in which case it would no longer past contrast agains the Dark (#2E3136) background color.

Unfortunately, in order to have AA compliance against the Dark background color we need to use the current color. There isn't really a solution that allows for necessary contrast against all of the different color combinations we have present. I would also point out that the link color on Apple's dark mode is also not complaint against white.

Text color contrast

ThemeTextLinkContrast ratioWCAG compliance level
Dark + Black#FFFFFF#6699FF current2.78Not compliant
Dark + Black#FFFFFF#3E71D6 necessary for contrast against white4.63AA
Dark + Black#FFFFFF#0B85FD Apple dark mode link color3.63Not compliant

Background color contrast

ThemeBackgroundLinkContrast ratioWCAG compliance level
Dark#2E3136#6699FF current4.7AA
Black#000000#6699FF current7.57AAA
Dark#2E3136#3E71D6 necessary for contrast against white2.82Not compliant
Black#000000#3E71D6 necessary for contrast against white4.54AA
Dark#2E3136#0B85FD Apple dark mode link color3.60Not compliant
Black#000000#0B85FD Apple dark mode link color5.79AA

Possible solutions:

  • Have different link colors on Dark and Black mode, with Black mode attaining compliance against all of the different color combinations by updating the link color to #3E71D6. Keep #69F for Dark mode
  • Same as above, but sunset Dark mode
  • Keep colors as they are
  • Keep colors as they are but allow for a setting to be turned on where links are underlined

@Volker_E, do you have any suggestions for this conundrum? (thanks in advance for your help!)

@cmadeo Would you mind sharing screenshots of the current states in white, dark & black mode?

@Volker_E thanks for taking a look, here are the current states

DefaultDarkBlack
IMG_0064 2.PNG (1×750 px, 1 MB)
IMG_0063.PNG (1×750 px, 1 MB)
IMG_0061.PNG (1×750 px, 1 MB)

There seems to be a solution requested, that's out of touch with level AA contrast requirements from reading the user feedback. The level AA contrast ratio for links to surrounding text has to fulfill 3:1, not 4.5:1, see https://webaim.org/blog/wcag-2-0-and-link-colors/

Nonetheless, I don't think that there will be one blue fitting all these requirements.
A ratio-requirements achieving color were #37d (without going into details on other design questions connected) would provide 4.35:1 to #fff and 4.82:1 to #fff. For black-mode. Dark mode would need a different link color from my estimation.

@Volker_E thanks for your help and input!

@JMinor do you have a preference for separate blues for black and dark mode or would it be better to look for a way to allow for underlining links? I'm open to move forward on either.

If we want to detect iOS high contrast setting this looks like it may be relevant:
https://stackoverflow.com/a/32463170

@Mhurd would you mind sharing a screenshot with me of an article in black mode with underlined links?

@cmadeo Sorry about the delay here are all the themes w/underlines:

Screen Shot 2019-10-16 at 2.41.02 PM.png (1×1 px, 1 MB)

Screen Shot 2019-10-16 at 2.41.10 PM.png (1×1 px, 1 MB)

Screen Shot 2019-10-16 at 2.41.18 PM.png (1×1 px, 1 MB)

Screen Shot 2019-10-16 at 2.41.31 PM.png (1×1 px, 1 MB)

Thanks @Mhurd! These look good, I think it'd be great to go forward with the plan of underlining links when iOS high contrast setting is detected