Page MenuHomePhabricator

Bad contrast of "Edit links" button in Vector skin
Closed, ResolvedPublic


In Vector skin, the "Edit links" button of Languages section of right menu do not pass WCAG's AA level (#72777d on #f6f6f6 has contrast ratio 4.17 according to or 4.18 according to Mozilla Firefox's dev tools; recommended value is 4.5).
We want to change it to #54595d to increase contrast.


image.png (511×175 px, 17 KB)

Acceptance criteria:

  • color of language link edit link on client is changed to #54595d

Event Timeline

Adding @santhosh and @Nikerabbit here, the change to originally #777 was done in part of T96547.
Agreed, if grey is the way to go, these links should feature #54595d in order to be WCAG compliant with the sidebar background.

"Edit links" is from Wikibase. What is the connection between that and CX's "grey links"?

@Nikerabbit Sorry, I put them into one bucket while inspecting, as they both currently feature the same color and should both be amended, as they fail WCAG level AA conformance.

For the record we are talking about this "edit links" link in the sidebar of a Wikipedia article:

image.png (511×175 px, 17 KB)

@Sarai-WMDE @Volker_E: #54595d is the color it should be?

Hey, @Lydia_Pintscher. Yes. Following Volker's input, it looks like we can proceed to amend the color of the languages "edit" links to #54595d (Base20) in order to make them WCAG compliant (AA) against the background of the side menu.

Change 607399 had a related patch set uploaded (by Iniquity; owner: Iniquity):
[mediawiki/extensions/Wikibase@master] Change 'Edit link' color to make it WCAG compliant

If the entire text of the Wikibase client is on the #f6f6f6 background, then maybe it’s worth replacing all inclusions?

Change 607399 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] Change 'Edit link' color to make it WCAG compliant /607399

Iniquity claimed this task.
Iniquity added a subscriber: darthmon_wmde.