Navbox Related Color Contrast Issue in Minerva Night Mode
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	KSarabia-WMF
	Feb 20 2024, 4:20 PM

Description

An common color contrast issue related to navboxes has been identified by Night Mode Checker.

Regex Criteria: .(navbox-even|navbox-abovebelow|navbox-title)
Error Type: Navbox Related
Location: Elements with .navbox-even, .navbox-abovebelow, or .navbox-title class

Success Criteria:
Find instances of this element and investigate the style rules causing the color contrast issue in night mode.
Propose solution here to address if there isn't one already.

QA Steps

Verify that there are no WCAG Color Contrast errors on the .navbox element on https://en.wikipedia.org/wiki/Paris?useskin=minerva&minervanightmode=1

QA Results - Prod

AC	Status	Details
1	✅	T358012#9624111

Related Objects
Search...

Status	Assigned	Task
Open	Jdrewniak	T341631 [EPIC] Q1 Main hypothesis: Typographical and palette customizations
Open	Jdrewniak	T341632 [EPIC] Palette customizations and dark mode
Open	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
Open	ovasileva	T354843 [Night mode] Make all open-by-default global navigation appear in night mode on mobile
Open	None	T356344 [Night mode] Templates can be fixed by editors when necessary for night mode
Resolved	Jdlrobson	T358387 [EPIC] Ensure all template text is readable in night mode: Fix all templates using background without color
Resolved	Jdlrobson	T358164 Set color/background to inherit or #333 on common templates/use of HTML4 bgcolor
Resolved	Jdlrobson	T358012 Navbox Related Color Contrast Issue in Minerva Night Mode
Resolved	Jdlrobson	T356899 [Spike] Explore automatic night mode fixes with content transform team
Resolved	Jdlrobson	T358238 Implement Linting Rule for Template Style Fixes
Resolved	Jdlrobson	T359205 Deployment Ticket - Linting Rule for Template Style Fixes
Resolved	None	T358241 Document new night mode linting rules
Declined	Jdlrobson	T358239 Automatic Correction of Template and Inline Styles
Resolved	SToyofuku-WMF	T358240 [Spike 4hours] Performance Impact Assessment for Night Mode Style Correction
Resolved	Jdlrobson	T358388 Tag problematic pages with tracking category
Resolved	KSarabia-WMF	T358003 [3hr] [FRENCH WIKIPEDIA] Color Contrast Issue in Minerva Night Mode - .alternance

Event Timeline

KSarabia-WMF created this task.Feb 20 2024, 4:20 PM

Restricted Application added a subscriber: Masumrezarock100. · View Herald TranscriptFeb 20 2024, 4:20 PM

Jdlrobson claimed this task.Feb 21 2024, 11:16 PM

Jdlrobson triaged this task as High priority.

Jdlrobson edited projects, added Web-Team-Backlog (Needs Prioritization (Tech)); removed Web-Team-Backlog.

Jdlrobson added a parent task: T358164: Set color/background to inherit or #333 on common templates/use of HTML4 bgcolor.Feb 22 2024, 12:57 AM

Jdlrobson moved this task from Backlog to Night mode coordination on the Web-Team-Backlog (Needs Prioritization (Tech)) board.

Jdlrobson mentioned this in T358164: Set color/background to inherit or #333 on common templates/use of HTML4 bgcolor.Feb 22 2024, 1:08 AM

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:36 AM

This should be tested in production only.

Jdlrobson added a project: MW-1.42-notes (1.42.0-wmf.21; 2024-03-05).Mar 8 2024, 12:58 AM

Jdlrobson lowered the priority of this task from High to Medium.Mar 8 2024, 11:50 PM

Edtadros updated the task description. (Show Details)Mar 12 2024, 4:15 PM

Test Result - Prod

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

Test Artifact(s):

QA Steps

✅ ❓ Verify that there are no WCAG Color Contrast errors on the .navbox element on https://en.wikipedia.org/wiki/Paris?useskin=minerva&minervanightmode=1
This is a pass per T358012#9624722 T358012#9624741
@Jdlrobson / @KSarabia-WMF, It appears that only the uniquely stylized elements within Nav Boxes do not passthe WCAG Color Contrast checker. Here are some examples:

@Edtadros I think we can ignore components with inline background color and color style rules that don't pass 3:1 contrast ratio. However, we need a way to track these since these won't be flagged by the upcoming linter (T358238) since they have both inline background color and color. They just happen to not have 3:1 ratio.
cc: @Jdlrobson Would it make sense to make a follow up ticket about this?

Agree these are not in scope for this ticket! Need time to think about whether new tickets are needed or whether these are isolated issues.

Edtadros updated the task description. (Show Details)Mar 13 2024, 9:56 PM

Edtadros added a project: Verified.

The issues Edward flags are also an issue in the standard theme which is out of scope for our work here so no need for a follow up ticket.

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

	F42577173: screenshot 699.png
	Mar 12 2024, 4:29 PM

	F42577172: screenshot 698.png
	Mar 12 2024, 4:29 PM

	F42577171: screenshot 696.png
	Mar 12 2024, 4:29 PM

	F42577170: screenshot 700.png
	Mar 12 2024, 4:29 PM

Navbox Related Color Contrast Issue in Minerva Night ModeClosed, ResolvedPublicActions

Description

QA Steps

QA Results - Prod

Related ObjectsSearch...

Event Timeline

Test Result - Prod

QA Steps

Navbox Related Color Contrast Issue in Minerva Night Mode
Closed, ResolvedPublic
Actions

Related Objects
Search...