Context:
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
element.style.outline = '1px solid red';
// Log the element to the console
console.log(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.
Proposed Solution
Make fix in the linter level