Text at 1:1 contrast is not an axe violation. It is incomplete.
I shipped a button whose label was invisible. Same colour as its own background — 1:1 contrast, no readable text at all. It was only broken in dark mode, and my CI was green the entire time. It was green for two reasons. I expected the first one. The second one is why I am writing this. Reason one: the headless browser boots in light mode axe evaluates the colour scheme that is actually rendered.…
The wire material provides an account of a situation where a text with 1:1 contrast, which is invisible, was shipped in a button. The button remained green during testing due to two reasons. The first reason was that the headless browser used by the CI evaluated the colour scheme that was rendered in light mode, which matched the palette that was painted. The second reason was that axe, a tool used to evaluate accessibility, did not report an invisible text as a violation.
The reporter discovered that the text and its background were the same value in dark mode, making it impossible to read. Despite this, the AXE did not report it as a violation, instead classifying it as incomplete. The reporter points out that this is the right call for a linter, but the wrong call for a pipeline that asserts on violations and throws incomplete results away.
To address this issue, the reporter made two changes. The first change was to collect incomplete results and label them distinctly, rather than treating them as failures. The second change was to not set resultTypes to only violations, as this would silently truncate incomplete results before they could be seen.
The reporter also created a tool called a11y-matrix, which runs axe across different modes, such as dark mode, reduced motion, forced colors, mobile, and 320px reflow width. This tool reports only what each state uniquely breaks, providing a more detailed report of accessibility issues.
The reporter also points out an example where a wide data table was measured to be covered by an overlay or scrolled out of view inside a scroll container. The reporter made a change to the page to suppress the finding while printing the count and the reason, rather than silently. This change allowed the reporter to measure the DOM directly and suppress the finding while still printing the count and the reason.
Overall, the wire material provides a detailed account of a situation where a text with 1:1 contrast, which is invisible, was shipped. The reporter explains the two reasons why the button remained green during testing and how the reporter addressed the issue of invisible text being classified as incomplete rather than a violation.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — it may contain errors, so check the original before relying on it.
