Context:
Per the most recent color contrast checker run, there are about 72 color contrast violations in the top 100 wikipedia pages related to .sidebox elements.
Issue Details:
Skin: Minerva (Night Mode)
Problem Area: Template:Side_box
Steps to Reproduce:
Go to a sample page
Navigate to any .sidebox element
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 (hex) | Background color (hex) | Size | Contrast | AA | AAA |
|---|---|---|---|---|---|
| #EAECFO | #F9F9F9 | Small | 1.12 | X | X |
| Foreground color (hex) | Background color (hex) | Size | Contrast | AA | AAA |
|---|---|---|---|---|---|
| #6699FF | #F9F9F9 | Small | 2.64 | x | x |
Suggested fix
Proposed solution is add the following rule to Minerva's template hacks file (scoped to only apply in night mode):
.side-box, .side-box * { background: inherit !important; color: inherit !important; }Note: Jon to give the complete selector - many projects use localized versions of .side-box class.
QA Results - Beta
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T357726#9612779 |
QA Results - Prod
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T357726#9616722 |
