E-mail List Archives
Number of posts in this thread: 6 (In chronological order)
From: Brian Lovely
Date: Jun 12, 2025 7:52AM
Subject: Contrast of text on a multicolored background
No previous message | Next message →
It's easy enough to check color contrast against a solid background, but is there a tool to check contrast against a multicolored background, for example a photograph?
Thank you,
Brian Lovely
From: Steve Green
Date: Jun 12, 2025 7:57AM
Subject: Re: Contrast of text on a multicolored background
← Previous message | Next message →
As long as it's real text rather than an image of text, then yes. Here are a couple of options.
* Brandwood checker for real text overlaying images - https://www.brandwood.com/a11y/. This allows you to upload an image and set the colour, size and position of the text. It only takes measurements at 8 points, which isn’t terribly useful, but it could be ok for background gradients or textures rather than images.
One issue is that if you change the text colour, the results do not update unless you change the font size or move the text. I reported this to the developer 6 years ago, but they haven’t fixed it.
* Firefox - https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/index.html#color-contrast. This built-in tool takes a brute force approach of measuring the contrast between every pixel in a piece of text (including ascenders and descenders) and every adjacent colour in the background. If the contrast is insufficient even for just one pixel, it reports a failure. Unfortunately, it does not tell you which pixel(s) have insufficient contrast or how many.
To use it, right-click on the piece of text you want to check, then select Inspect Accessibility Properties from the dropdown menu.
The Accessibility Inspector will open, and the relevant node will be highlighted. Expand the node and select the text leaf. The colour contrast ratio will be displayed in the right-hand panel.
Steve Green
Managing Director
Test Partners Ltd
From: Brian Lovely
Date: Jun 12, 2025 8:03AM
Subject: Re: Contrast of text on a multicolored background
← Previous message | Next message →
Thanks Steve! There used to be a Chrome plugin that would calculate contrast around the edges of text, and outline text wherever contrast was sufficient. If the text was at least 50% outlined, you could assume human pattern recognition would allow users to understand the text. I looked for that plugin but couldn't find it.
Thank you,
Brian Lovely
From: Jared Smith
Date: Jun 12, 2025 8:04AM
Subject: Re: Contrast of text on a multicolored background
← Previous message | Next message →
You can use the eyedropper tool within the color picker in WAVE or in WebAIM’s contrast checker (https://webaim.org/resources/contrastchecker/) to sample various foreground and background color from images or when various colors are used. Unfortunately Firefox does not provide the eyedropper in their color input.
Jared
From: Brian Lovely
Date: Jun 12, 2025 8:14AM
Subject: Re: Contrast of text on a multicolored background
← Previous message | Next message →
Thanks Jared! That outliner thing looked weird. It would cover the image and text with a semitransparent overlay, then place those white pixels. You ended up with a weird grey image with a scraggly white outline of text, but once you understood what it was doing it was handy as all get out.
Thank you,
Brian Lovely
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > on behalf of Jared Smith via WebAIM-Forum < = EMAIL ADDRESS REMOVED = >
Sent: Thursday, June 12, 2025 10:04 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Cc: Jared Smith < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Contrast of text on a multicolored background
You can use the eyedropper tool within the color picker in WAVE or in WebAIM’s contrast checker (https://webaim.org/resources/contrastchecker/) to sample various foreground and background color from images or when various colors are used. Unfortunately Firefox does not provide the eyedropper in their color input.
Jared
From: Brian Lovely
Date: Jun 13, 2025 5:48AM
Subject: Re: Contrast of text on a multicolored background
← Previous message | No next message
Here's that plugin: Color Contrast Analyzer <https://chromewebstore.google.com/detail/color-contrast-analyzer/dagdlcijhfbmgkjokkjicnnfimlebcll> Unfortunately, it's not available anymore. It was a great way to easily see if text against a multicolored background has sufficient points of contrast for human pattern recognition to understand it.
<https://chromewebstore.google.com/detail/color-contrast-analyzer/dagdlcijhfbmgkjokkjicnnfimlebcll>
Color Contrast Analyzer - Chrome Web Store <https://chromewebstore.google.com/detail/color-contrast-analyzer/dagdlcijhfbmgkjokkjicnnfimlebcll>
Analyze a web page or portion of a web page for conformance with WCAG 2.0 Color Contrast requirements.
chromewebstore.google.com
Thank you,
Brian Lovely