Context:
Per the most recent color contrast checker run, one of the top color contrast WCAG violation (at about 237 violations in the top 100 most popular pages in English Wikipedia) can be found within the text elements in .div.MainPageBG.mp-box
Issue Details:
Skin: Minerva (Night Mode)
Problem Area: Main Page
Steps to Reproduce:
- Go to Main Page in night mode
- Observe the color contrast within .mp-box 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 .mp-box.
Proposed solution
For now we will add the following rule (and associated skin-night-mode-clientpref-2 @prefers media query):
.skin-night-mode-clientpref-1 .page-Main_Page .mw-parser-output * {
background: inherit !important;
color: inherit !important;
border-color: var(--border-color-subtle) !important;
}TODO
- The styles should live in skins.minerva.mainPage.styles and only apply when wgMinervaApplyKnownTemplateHacks is enabled.
- Use a common mixin night-mode-strip-colors() for consistency with the existing night-mode-invert()
Additional QA (exploratory)
- Check other main pages on other projects
QA Results - Beta
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T357722#9612250 |
QA Results - Prod
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T357722#9632476 T357722#9635260 |
