@background-color-progressive-subtle has insufficient contrast with links in night mode
Closed, ResolvedPublic1 Estimated Story Points
Actions

Description

In night mode, @background-color-progressive-subtle is defined (core, codex) as #1d2a42. However, this color has insufficient contrast with @color-progressive used for links (#6d8af2)... at 4.49 according to the webaim checker. It would be great if it were possible to change the definition a little bit to make it WCAG AA compliant, as it's really a small change, and would allow us to more freely use this as background color in places that may have links (a recent example being mw-datatable).

P.S. There doesn't seem to be a project tag for reporting night mode issues/requests. FY2023-24-WE 2.1 Typography and palette customizations seems to be the only one, but to me it feels weird filing a task under another team's KR, so much so that I'm doing this in my volunteer capacity.

Acceptance Criteria

@color.blue800 color token has been updated in both Figma and code to fix accessibility issue.

Details

	Subject	Repo	Branch	Lines +/-
	Update Codex from 1.5.0 to 1.6.0	mediawiki/core	master	+2 K -1 K
	tokens: Update blue800 value	design/codex	main	+1 -1

Customize query in gerrit

Event Timeline

Daimona created this task.Sun, May 12, 4:06 PM

Restricted Application added a project: Design-System-Team. · View Herald TranscriptSun, May 12, 4:06 PM

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Daimona moved this task from Backlog to Night mode (mobile) on the FY2023-24-WE 2.1 Typography and palette customizations board.Sun, May 12, 4:06 PM

Daimona updated the task description. (Show Details)

Thanks for reporting @Daimona!
While I see the WCAG guidelines as guiding principles, as in 4.49:1 vs 4.5:1 is not a fail in my opinion, I assume that we could change the color slightly to also make automated tests not chew up on this every time it's encountered. cc: @DTorsani-WMF

In T364695#9788686, @Volker_E wrote:

While I see the WCAG guidelines as guiding principles, as in 4.49:1 vs 4.5:1 is not a fail in my opinion, I assume that we could change the color slightly to also make automated tests not chew up on this every time it's encountered. cc: @DTorsani-WMF

Indeed, that's the main reason why I reported this -- automated checkers really don't seem to think that 4.49 is fine.

Change #1030956 had a related patch set uploaded (by Dtorsani; author: Dtorsani):

[design/codex@main] tokens: Update blue800 value

https://gerrit.wikimedia.org/r/1030956

gerritbot added a project: Patch-For-Review.Mon, May 13, 1:22 PM

Thanks for bringing this to our attention. To appease the automated tests, I've updated this color ever so slightly to meet necessary contrast ratios in the patch listed directly above. The change is unnoticeable but fixes the issue.

I've assigned this task to myself, updated the acceptance criteria, and added it to the DST board.

CCiufo-WMF moved this task from Committed to Code Review on the Design-System-Team (DST-Sprint-22 (2024-04-29 to 2024-05-10)) board.Mon, May 13, 1:55 PM

Catrope moved this task from Code Review to Pending Release on the Design-System-Team (DST-Sprint-22 (2024-04-29 to 2024-05-10)) board.Mon, May 13, 2:33 PM

Change #1030956 merged by jenkins-bot:

[design/codex@main] tokens: Update blue800 value

https://gerrit.wikimedia.org/r/1030956

Maintenance_bot removed a project: Patch-For-Review.Mon, May 13, 3:30 PM

Jdlrobson added a project: Web-Team-Backlog (Needs Prioritization (Tech)).Mon, May 13, 3:37 PM

Jdlrobson moved this task from Backlog to Night mode coordination on the Web-Team-Backlog (Needs Prioritization (Tech)) board.Wed, May 15, 3:04 PM

Change #1032095 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/core@master] Update Codex from 1.5.0 to 1.6.0

https://gerrit.wikimedia.org/r/1032095