Help:Lint errors/night-mode-unaware-background-color

While this lint is designed to improve Wikipedia's night mode, it is really about ensuring our content is portable and can be rendered in contexts other than a Wikipedia article. Understanding the false positives that this lint may cause, assistance remains available on the project talk page (see below) and suggestions are welcome. While some lints logged under night-mode-unaware-background-color in the Wikipedia night theme may appear unnecessary and already meet WCAG color contrast rules, it remains vital to pinpoint them, as a significant number are likely problems in other contexts where people consume our knowledge.

This documentation outlines the specifications and usage guidelines for the "night-mode-unaware-background-color" linter, a tool designed to assist in identifying potential issues related to background colors when Wikimedia content is used outside the default experience e.g. in a night theme environment or when rendered by the Wikipedia app or embedded in another site which may use color schemes other than our own. It is important to note that this lint is currently in the analysis stage and editors are not expected to take immediate action based on its findings.

Overview

The "night-mode-unaware-background-color" linter is designed to detect certain instances where background colors assume a certain text color, and may not be suitable for a night mode environment amongst other environments. This lint specifically targets most inline background colors that lack an accompanying color inline style within the same tag.

Its primary objective is to ensure that background colors meet accessibility standards, particularly in terms of color contrast, as outlined by the WCAG 3:1 standard, via explicit color definitions other than making assumptions about how the page will be rendered.

How to fix

Previously, it was safe to define a background using an inline style as we could assume that the default text color was always black, but this has never been true for sites or apps which reuse our content, and as MediaWiki adds support for native themes such as dark mode, this is no longer the case for Wikimedia sites either. These native themes may alter colors where a background is detected without a color.

We therefore recommend always defining a text color alongside a background color per the guidelines on our recommendations page.

Examples

Problematic HTML	Good HTML
<span style="background: white;">This is meant to be black text on white background in day theme! We are assuming the text color of the rendering is always going to be black since it has been that way since Wikipedia was invented. But now.. it's white text on white background in night theme so we must specify the color.</span>	<span style="background: white; color:black;">This is meant to be black text on white background in day theme! We are assuming the text color of the rendering is always going to be black since it has been that way since Wikipedia was invented. But now.. it's white text on white background in night theme so we must specify the color.</span>
<span style="background:red;">This is black text on red background!</span>	<span style="background:red;color:black;">This is black text on red background!</span>
<span style="background:red;"> <!-- if text is ever added it here it is //implied// that it will inherit from the stylesheet but this has not been made explicit-->hello. <span style="color:yellow;">I am yellow text!</span> </span>	<span style="background:red;color:inherit;"> <!-- The color: inherit has clarified what the behaviour should be here --> hello. <span style="color:yellow;">I am yellow text!</span> </span>
<span style="background:red;color:yellow;">Foo <span style="background:blue;"> <!-- while it is implied from the context the color of this text will be yellow it is not clear if that is deliberate or a mistake (perhaps the parent is from another template that recently changed Night themes will convert this to black unless specified.--></span></span>	<span style="background:red;color:yellow;">Foo <span style="background:blue;color:inherit;">bar</span></span>

Identifying problematic elements

The following JavaScript code will help identify elements in the page that trigger the lint.

Array.from($('[style*="background"]')).filter((a)=>!a.style.color)

Current status

As of now, the "night-mode-unaware-background-color" lint is assigned a priority level of none. This means it is not listed in "Page information" and is not visible on the main lint error page, and there are no expectations for editors to address identified issues until further notice. The lint is undergoing analysis to determine the validity and impact of its findings. Once this phase is completed, the priority level will be adjusted accordingly after we've addressed any concerns raised by the community.

Usage guidelines

While editors are not required to take action on the lint findings at this time, those who wish to contribute to the analysis process or address potential issues can follow these guidelines:

1. Review Lints: Editors can review the lints generated by the "night-mode-unaware-background-color" linter rule to identify instances where inline background colors lack a color inline style. Note that some instances may be transcluded via templates.
2. Ensure Color Contrast: Verify that background colors meet the color contrast criteria outlined by the WCAG 3:1 standard. Editors can use tools such as WebAIM: Contrast Checker to check if their color styles adhere to these standards.
3. Inspect Pages: Use plugins such as the WCAG Color Contrast Checker Chrome Plugin to inspect pages and ensure that content complies with WCAG color contrast criteria, particularly for elements that you are responsible for.
4. Communicate Concerns: If you have any questions or concerns regarding the lint or its findings, we encourage you to leave comments on the project talk page and clarification.