Steps to replicate the issue (include links if applicable):

• Enable dark mode on mobile site - log in, click settings, click "advanced mode" to make the dark mode show up
• Visit a page which has been recently edited
• Scroll down to bottom of page

What happens?:

Text is #101418 on background #36c with a contrast ratio of 3.44:1, not sufficient for WCAG AA compliance

Notes for first-time taskers

• Click "mobile view" at the bottom of the page to get mobile site
• you will need to install Extension:MobileFrontend to test this
• The fix will live in the https://www.mediawiki.org/wiki/Skin:Minerva_Neue skin
• Adding the notheme class to any element will make the element look the same in night and day themes - this should be used here.

Requirement

Ensure that the "last modified" bar has sufficient contrast in dark mode on mobile, making the text legible and compliant with WCAG AA standards.

BDD

Feature: Sufficient Contrast for "Last Modified" Bar in Dark Mode

  Scenario: Ensure "last modified" bar contrast in dark mode
    Given the user has enabled dark mode on the mobile site
    When the user visits a recently edited page and scrolls to the bottom
    Then the text in the "last modified" bar should have sufficient contrast and be legible

Test Steps

Test Case 1: Ensure Sufficient Contrast for "Last Modified" Bar in Dark Mode

1. Enable dark mode on the mobile site by logging in, clicking settings, and enabling "advanced mode."
2. Visit a page that has been recently edited.
3. Scroll to the bottom of the page.
4. AC1: Confirm that the text in the "last modified" bar has sufficient contrast and is legible, meeting WCAG AA standards.

QA Results - Beta

QA Results - PROD