Automatic testing and background images. #2
dmbrownless
started this conversation in
Hints, Tools, and Hacks and Traps
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
There's a fairly widely known limitation with automatic contrast checks in accessibility testers that because they evaluate the DOM (document object model) rather than any composited image of the web page, they are not sensitive to the user experience, just to numerical thresholds that act as an imperfect proxy. This means they are effective blind to objects like background images that affect the perceived view but not the DOM.
E.g.
The following image is of a web page consisting of a single button with dark grey text on a white background, the page background is also white. When the button is not in focus it changes to 70% opacity (to no visible effect).
This is a WCAG2.2AA pass on most testers. It's not necessarily pretty, but the font size and colour choices make it perfectly suitable for most purposes. However the final version of the page has a background image of a snowy path, so the page is finally rendered as this.
Because the background image is not evaluated by accessibility testers, this still registers as an acceptable, accessible colour scheme.
Manual checking is essential, particularly if background images or patterns are being used. Some good tools for this (utilising foreground and background selection directly from the screen) are:
TPGi's Colour Contrast Analyser (CCA)
https://www.tpgi.com/color-contrast-checker/
WebAIM's Contrast Checker Bookmarklet
https://webaim.org/resources/contrastchecker/bookmarklet
Beta Was this translation helpful? Give feedback.
All reactions