Steps to replicate the issue (include links if applicable):
- Navigate to any old page, such as https://en.wikipedia.org/wiki/The_Fookien_Times
- Get the colors for the brackets and plug in to contrast checker (I used Firefox's native)
What happens?: Firefox says these brackets are at ~2.5 contrast.
What should have happened instead?: Bump the contrast to at least ?
Software version (on Special:Version page; skip for WMF-hosted wikis like Wikipedia):
Other information (browser name/version, screenshots, etc.):
The styles seem to be coming from VE?
/*! * VisualEditor MediaWiki DesktopArticleTarget noscript styles * * @copyright See AUTHORS.txt * @license The MIT License (MIT); see LICENSE.txt */ /** * Hide VE edit tab and section edit things for noscript users. * For script users they're always visible unless and until ve-not-available is added. */ /* stylelint-disable selector-max-id */ .client-nojs #ca-ve-edit, .ve-not-available #ca-ve-edit, .client-nojs .mw-editsection-divider, .ve-not-available .mw-editsection-divider, .client-nojs .mw-editsection-visualeditor, .ve-not-available .mw-editsection-visualeditor { display: none; } /* stylelint-enable selector-max-id */ /* For script users, expand brackets by default, unless and until ve-not-available is added */ .client-js .mw-content-ltr .mw-editsection-bracket:first-of-type, .client-js .mw-content-rtl .mw-editsection-bracket:not( :first-of-type ) { /* @noflip */ margin-right: 0.25em; /* @noflip */ color: #54595d; } .client-js .mw-content-rtl .mw-editsection-bracket:first-of-type, .client-js .mw-content-ltr .mw-editsection-bracket:not( :first-of-type ) { /* @noflip */ margin-left: 0.25em; /* @noflip */ color: #54595d; }
Derived Requirement
Ensure that edit link brackets have sufficient contrast in dark mode, meeting WCAG AA standards.
BDD
Feature: Edit Link Brackets Contrast in Dark Mode
Scenario: Ensure sufficient contrast for edit link brackets in dark mode
Given the user has enabled dark mode
When the user views a page with edit link brackets
Then the edit link brackets should have sufficient contrast
And the contrast should meet WCAG AA standardsTest Steps
Test Case 1: Ensure Sufficient Contrast for Edit Link Brackets in Dark Mode
- Enable dark mode.
- Navigate to any old page, such as this one.
- Use a contrast checker tool to measure the contrast of the edit link brackets.
- AC1: Confirm that the edit link brackets have sufficient contrast and meet WCAG AA standards.
QA Results - Beta
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T365089#9823948 |
QA Results - PROD
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T365089#9844090 |
