Page MenuHomePhabricator

Color Contrast Issue in ambox
Closed, DuplicatePublic

Description

Context:
Per the most recent color contrast checker run, there are about 40 color contrast violations in the top 100 wikipedia pages related to Template:Ambox.

Issue Details:
Skin: Minerva (Night Mode)
Problem Area: Template:Ambox.

Steps to Reproduce:
Go to this sample page

Paste below into DevTools to view an sample:

// Select the desired element
const targetElement = document.querySelector("div.mw-content-ltr.mw-parser-output > section.mf-section-4.collapsible-block > .box-Overly_detailed.box-Overly_detailed.plainlinks.metadata.ambox.ambox-style.ambox-overly_detailed > tbody > tr > .mbox-text.mbox-text > .mbox-text-span.mbox-text-span > b");

// Check if the element is found
if (targetElement) {
  // Scroll to the element
  targetElement.scrollIntoView({ behavior: 'smooth' });

  // Apply red outline style after scrolling
  targetElement.style.outline = '2px solid red';
} else {
  console.error('Element not found');
}

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.

Actual Result

Screenshots of color contrast issues.

Screenshot 2024-02-15 at 4.58.59 PM.png (490×1 px, 93 KB)