Page MenuHomePhabricator

WCAG Color Contrast Violations in Tables with Inline Style Attributes on Minerva Night Mode
Closed, DuplicatePublic


Per the most recent color contrast checker run, the third highest common color contrast WCAG violation can be found in inline styles in <td> in <table>

Issue Details:
Skin: Minerva (Night Mode)
Problem Area: <table> elements with background-color style attributes

Steps to Reproduce:
Go to a sample page
Run below in the console to observe the problem elements.

var tables = document.querySelectorAll('table');

// Iterate over each table
tables.forEach(function(table) {
    // Get all elements with inline style within the current table
    var elementsWithInlineStyle = table.querySelectorAll('[style]');
    // Iterate over each element with inline style
    elementsWithInlineStyle.forEach(function(element) {
        // Get the inline style attribute value
        var inlineStyle = element.getAttribute('style');
        // Check if the inline style contains color or background-color rules
        if (inlineStyle.includes('color') || inlineStyle.includes('background-color')) {
            // Add a red 1px outline to the element
   = '1px solid red';
            // Log the element to the console

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.

Proposed Solution
Make fix in the linter level

Event Timeline

Jdlrobson subscribed.

This will hopefully be fixed by T356899.
We may need to also reset the link color



would become

style="background-color:#CEE8F0; color: #333; --color-link: <original link color>"
Jdlrobson lowered the priority of this task from High to Medium.Mar 9 2024, 1:38 AM

These issues appear to have been addressed by T358239
There are a few issues relating to use of color without background which I've captured in: T360683