Page MenuHomePhabricator

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

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

ACStatusDetails
1T358012#9624111

Related Objects

StatusSubtypeAssignedTask
Resolvedovasileva
Resolvedovasileva
Resolvedovasileva
ResolvedJdlrobson
Resolvedovasileva
ResolvedJdlrobson
ResolvedJdlrobson
ResolvedJdlrobson
ResolvedJdlrobson
ResolvedJdlrobson
ResolvedJdlrobson
ResolvedJdlrobson
ResolvedNone
DeclinedJdlrobson
ResolvedSToyofuku-WMF
ResolvedJdlrobson
ResolvedKSarabia-WMF

Event Timeline

This should be tested in production only.

Jdlrobson lowered the priority of this task from High to Medium.Mar 8 2024, 11:50 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:

screenshot 697.png (821×1 px, 310 KB)

screenshot 700.png (735×1 px, 419 KB)

screenshot 696.png (679×1 px, 405 KB)

screenshot 698.png (669×1 px, 401 KB)

screenshot 699.png (761×1 px, 456 KB)

@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.

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.