Automated accessibility scans can miss contrast failures hidden in dark mode
A developer discovered that a webpage reporting zero axe accessibility violations contained button text with a near-invisible contrast ratio of 1.04:1 — but only in dark mode. The flaw stemmed from a CSS specificity conflict where a late-night dark-mode patch unintentionally overrode secondary button colours, rendering dark green text on a near-black background. The problem went undetected because axe-core evaluates contrast only in the colour scheme active at scan time, meaning CI pipelines running in light mode will not catch dark-mode contrast failures. Running the same axe scan twice on identical markup — once per theme — confirmed zero violations in light mode versus two critical failures in dark mode. The fix involved replacing direct colour overrides with theme-aware CSS tokens, eliminating the specificity contest and ensuring correct contrast across all themes.
This is an AI-generated summary. ShortSingh links to the original source for the complete article.
Discussion (0)
Log in to join the discussion and vote.
Log in