924583 - [a11y] Link contrast is not sufficient

Status: RESOLVED WONTFIX

(developer.mozilla.org Graveyard :: Design, defect)

Description

[Isac Lagerblad (:icaaq)]

1. Press Cmd+N to open a new browser window, then type https://developer.mozilla.org/en-US/docs/Web/HTML in the address bar and press Enter
2. Use eg. the color contrast analyzer [1] to check the contrast between background and font-color.
3. The result is:

Foreground: #0095DD - Background: #FFFFFF

The contrast ratio is: 3.3:1

Text failed at level AA
Text failed at level AAA
Large text passed at level AA
Large text failed at level AAA

1.4.3 Contrast (Minimum):  Text (and images of text) have a contrast ratio of at least 4.5:1, except if the text is pure decoration.  Larger scale text (at least 18 point or 14 point bold) or images of text can have a contrast ratio of 3:1. (Level AA)

1.4.6 Contrast (Enhanced): Text (and images of text) have a contrast ratio of at least 7:1, except if the text is pure decoration.  Larger scale text (at least 18 point or 14 point bold) or images of text can have a contrast ratio of 4.5:1. (Level AAA)

Note: Fonts that are extraordinarily thin or decorative are harder to read at lower contrast levels.

The contrast should be enhanced to fit the current standards.

1. http://www.paciellogroup.com/resources/contrastAnalyser

Comment 1

[ali spivak]

Sean, can you please take a look at this bug and make a proposal for how we can make the recommended changes to accommodate for accessibility/screen readers? If this is not something you are willing to do, please explain why.

Comment 2

[trisha]

David, I was talking to Luke about this and he said to flag you before I code.  I have some experience with color contrast, I worked on a few patches for WordPress MP6.  I also have a willing test subject (my son is legally blind).  He doesn't use a screen reader so contrast is especially important for him.

Let me know if it's ok to work on this and I'll start a patch.  My starting point in the past has been this document: http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

I've seen the app that icaaq uses and am interested in trying it. I've used this in the past: http://leaverou.github.io/contrast-ratio/

Comment 3

[David Walsh :davidwalsh]

Any insight you could provide would be great Trisha!  Thank you!

Comment 4

[David Walsh :davidwalsh]

Do we have a proposal for color here?

Comment 5

[MDN Team (:mdn-dev)]

Commits pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/91ed9b57c3485309eba10838f33bd3465f3248b5
Bugs 924767 & 924583: Increase contrast on text and links

Fix Bug 924767 - text contrast
Bug 924583 - link contrast
Fix Bug 1306286 - homepage contrast

Subtle increase to contrast of body text since we were already meeting WCAG guidelines here.

Less subtle increase to link colour. Still don't met WCAG guidelines but significant improvement, especially on non-white backgrounds.

Homepage contrast issues should be fixed by combination of text contrast changes and changing colour of callout background.

https://github.com/mozilla/kuma/commit/87f5709dbd47e7b6073cf4cc114835c2b1e8002f
Merge pull request #4021 from mozilla/924767-924583-1306286-contrast

Bugs 924767, 924583, 1306286: Increase contrast on text and links r=escattone

Comment 6

[[github robot]]

Commit pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/63c8aa47ac01103d8748ade5fa32751ee4ac49cb
Bug 924583: Use $blue-dark for link color against grey background (#4996)

When against a grey background, the blue color used for links is below the minimum 4.5 ratio needed to meet the WCAG AA guidelines, even after #4983.

Comment 7

[BMO Automation]

MDN Web Docs' bug reporting has now moved to GitHub. From now on, please file content bugs at https://github.com/mdn/sprints/issues/ and platform bugs at https://github.com/mdn/kuma/issues/.