NOTE: For issues with signatures see T359587
NOTE: For issues with style="background" see T358797
NOTE: For issues with non-standard infoboxes see T359644
Context:
Per the most recent color contrast checker run, the topmost common color contrast WCAG violation (at about 5000+ violations in the top 100 most popular pages in English Wikipedia) can be found within the text elements in the infobox.
Issue Details:
Skin: Minerva (Night Mode)
Problem Area: infobox
Steps to Reproduce:
- Enable night mode in the Minerva skin.
- Observe the color contrast within the infobox content.
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:
| Foreground Color | Background Color | Contrast | AA |
| #EAECF0 | #F8F9FA | 1.12 | No |
| #6699FF | #F8F9FA | 2.63 | No |
| #FFA500 | #F8F9FA | 1.87 | No |
- Proposed solution **
- Any infobox element using a style attribute and background or using a known header class should inherit background from the article.
- The styles should live in skins.minerva.base.styles/common/hacks.less
mw.util.addCSS(`
.infobox-above,
/* itwiki */.sinottico th,
.infobox-header {
&:not( .notheme ) {
background-color: var(--background-color-base) !important;
background: var(--background-color-base) !important;
color: var(--color-base) !important;
}
}`)- It should be possible for editors to opt out of the overrides by appending a notheme class to their HTML.
QA
- Visit https://zh.m.wikipedia.org/wiki/%E6%9E%97%E5%8D%83%E5%8F%88?minervanightmode=1
- Expected: Readable infobox
(For now, french wikipedia is expected to fail QA)
- Visit https://fr.m.wikipedia.org/wiki/Bob_Marley?minervanightmode=1
- Expected: Readable infobox with no background colors
- https://fr.m.wikipedia.org/w/index.php?title=Zin%C3%A9dine_Zidane&minervanightmode=1
- Expected: Readable infobox with no background colors
- Check colors appear for all the above pages in light mode
QA Results - Beta
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T357453#9613733 |
QA Results - Prod
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | |
| 2 | ✅ | T357453#9614014 |
| 3 | ✅ | T357453#9614014 |
| 4 | ⬜ | T357453#9614014 |
| 5 | ⬜ | T357453#9614014 |
| 6 | ✅ | T357453#9614014 |
