Hatnote Color Contrast Issues Across Wikipedia Pages on Minerva Night Mode
Closed, ResolvedPublic0 Estimated Story Points
Actions

Assigned To

Authored By

	KSarabia-WMF
	Feb 15 2024, 8:00 PM

Description

Context:
Per the most recent color contrast checker run, one of the top color contrast WCAG violation (at about 257 violations in the top 100 most popular pages in English Wikipedia) can be found within the text elements in .hatnote

Issue Details:
Skin: Minerva (Night Mode)
Problem Area: Hatnote

Steps to Reproduce:

Enable night mode in the Minerva skin.
Observe the color contrast within .hatnote elements.

Expected Result:
The text and background colors within the infobox should have a WCAG 2.0 level AA contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.

Actual Result:
Screenshot of color contrast issues in hatnote.

Screenshot 2024-02-15 at 1.59.26 PM.png (1×1 px, 431 KB)

QA Results - Prod

AC	Status	Details
1	✅	T357721#9614024

Related Objects
Search...

Status	Assigned	Task
Resolved	ovasileva	T341631 [EPIC] Q1 Main hypothesis: Typographical and palette customizations
Resolved	ovasileva	T341632 [EPIC] Palette customizations and dark mode
Resolved	ovasileva	T354835 [epic] Release night mode as a beta feature on desktop and mobile
Resolved	Jdlrobson	T354836 [goal] Allow desktop and mobile page chrome to appear in night mode ahead of beta release
Resolved	ovasileva	T354843 [Night mode] Make all open-by-default global navigation appear in night mode on mobile
Resolved	Jdlrobson	T356344 [Night mode] Templates can be fixed by editors when necessary for night mode
Resolved	ovasileva	T357721 Hatnote Color Contrast Issues Across Wikipedia Pages on Minerva Night Mode
Duplicate	Jdlrobson	T358007 [French Wikipedia] Minerva Night Mode Color Contrast Issue - links in .bandeau-container .bandeau-section.bandeau-niveau-information

Event Timeline

KSarabia-WMF created this task.Feb 15 2024, 8:00 PM

Restricted Application added subscribers: Masumrezarock100, Aklapper. · View Herald TranscriptFeb 15 2024, 8:00 PM

KSarabia-WMF added a parent task: T356344: [Night mode] Templates can be fixed by editors when necessary for night mode.Feb 15 2024, 8:00 PM

This should be fixed by T356427.

Jdlrobson mentioned this in T358015: Color Contrast Issue in Minerva Night Mode - a.mw-redirect.Feb 21 2024, 4:22 PM

This looks fixed so we should QA next sprint.

Jdlrobson changed the task status from Stalled to Open.Feb 21 2024, 10:43 PM

Jdlrobson moved this task from Incoming to QA on the Web-Team-Backlog (FY2023-24 Q3 Sprint 4) board.

Jdlrobson triaged this task as High priority.Feb 21 2024, 11:08 PM

Jdlrobson mentioned this in T358007: [French Wikipedia] Minerva Night Mode Color Contrast Issue - links in .bandeau-container .bandeau-section.bandeau-niveau-information.

Jdlrobson added a subtask: T358007: [French Wikipedia] Minerva Night Mode Color Contrast Issue - links in .bandeau-container .bandeau-section.bandeau-niveau-information.

Jdlrobson changed the status of subtask T358007: [French Wikipedia] Minerva Night Mode Color Contrast Issue - links in .bandeau-container .bandeau-section.bandeau-niveau-information from Stalled to Open.

Jdlrobson moved this task from Backlog to Night mode (mobile) on the FY2023-24-WE 2.1 Typography and palette customizations board.Feb 24 2024, 12:37 AM

Jdlrobson assigned this task to Edtadros.Feb 27 2024, 5:41 PM

Jdlrobson moved this task from QA to Blocked on Others on the Web-Team-Backlog (FY2023-24 Q3 Sprint 4) board.Feb 29 2024, 5:48 PM

Jdlrobson lowered the priority of this task from High to Medium.Feb 29 2024, 5:55 PM

It's now possible to test this one.

ovasileva raised the priority of this task from Medium to High.Mar 5 2024, 4:38 PM

Jdlrobson added a project: MW-1.42-notes (1.42.0-wmf.21; 2024-03-05).Mar 7 2024, 5:43 PM

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

Enable night mode in the Minerva skin.
https://en.m.wikipedia.org/wiki/Super_Bowl?minervanightmode=1
Observe the color contrast within .hatnote elements.
✅ AC1: The text and background colors within the infobox should have a WCAG 2.0 level AA contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.

Edtadros updated the task description. (Show Details)Mar 8 2024, 3:06 AM

Looks good, resolving!

Edtadros added a project: Verified.Mar 14 2024, 8:28 PM

Edtadros mentioned this in T358382: Verify 1.42.0-wmf.21 deployment.Mar 14 2024, 9:27 PM

	F41916668: Screenshot 2024-02-15 at 1.59.26 PM.png
	Feb 15 2024, 8:00 PM

	F42453804: screenshot 660.png
	Mar 8 2024, 3:05 AM

	F42453803: screenshot 661.png
	Mar 8 2024, 3:05 AM

Hatnote Color Contrast Issues Across Wikipedia Pages on Minerva Night ModeClosed, ResolvedPublic0 Estimated Story PointsActions