WCAG Color Contrast Checker errors/warnings about things that are not on page. How to find and fix?

44 Views Asked by At

I'm using the WCAG Color contrast checker extension for Firefox. I have fixed most errors, but some I cannot find.

How do I find and fix the things it says are hidden? What does it mean by hidden? For example I cannot see anything at all on the page that is white with red background, and when I click them they obviously do not locate and show a red box around them like some others do. How do I fix these hidden errors?

Also, I notice that it seems to report errors with contrast when background is set to transparent, and thinks background colour is black, instead of colours actually behind the item.

WCAG Color contrast checker extension in Firefox

1

There are 1 best solutions below

0
On

Unfortunately WCAG Color Contrast Checker does not specify contrast offending elements by e.g. CSS-path. Hidden elements might show up after submenus are opened, CSS is disabled or viewport resized (CSS breakpoints).

Last resort for finding persistently hidden elements is removing areas step by step from the DOM by DevTools inspector until the element disappears from WCAG-Tool. Then go back by Strg-Z and narrow down recursively.