RE: Checking text on image colour contrast compliance (when a colour gradient is applied)

That’s really interesting. I have done some tests and it gives accurate measurements for CSS gradients, background images and transparency. The measurements are constrained to the area the text takes up, and takes account of ascenders and descenders. It ignores the background elsewhere.

It seems that it is calculating the position of the area occupied by the text, then measuring the colour of every pixel within that area before calculating the contrast of the text against each pixel. I don’t see how else it could make measurements against background images.

So far, it has not given the wrong result for any test I have devised, which is very encouraging.

The only downside is that it doesn’t show which pixels have insufficient contrast or display the number or percentage of such pixels. If you just accept the result at face value, you may report a non-conformance when only one pixel has insufficient contrast.

Steve Green
Managing Director
Test Partners Ltd


From: James Nurthen <james@nurthen.com>
Sent: 25 June 2021 21:07
To: Kelly Childs <kelly@beaccessible.com>
Cc: Louise Lister <Louise.Lister@iop.org>; w3c-wai-ig@w3.org
Subject: Re: Checking text on image colour contrast compliance (when a colour gradient is applied)

Firefox will check this without needing an eyedropper
https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector#color_contrast


On Fri, Jun 25, 2021 at 9:39 AM Kelly Childs <kelly@beaccessible.com<mailto:kelly@beaccessible.com>> wrote:
Has anyone tried the SBF Color Contrast Check / Analyzer<https://www.sbwfc.co.kr/color-contrast-checker/>?

On Fri, Jun 25, 2021 at 4:01 AM Louise Lister <Louise.Lister@iop.org<mailto:Louise.Lister@iop.org>> wrote:

Hello,

Please would anyone be able to recommend a good tool to check contrast on the brand story images that have a filter applied. We currently have a homepage image slot which applies a darker colour gradient over an image to allow the text on top of it to stand out.  The text can also be in different sizes.

I’ve tried WCAG contrast checker but that doesn’t seem to allow for the gradient and tried Chrome colour contrast analyser instead. I don’t think that gives me a definitive picture on whether I am compliant other than the contrast on some text has a better outline than other bits of text.

If there’s any other options people can suggest that would be amazing!

Kind regards
Louise





________________________________
This email (and attachments) are confidential and intended for the addressee(s) only. If you are not the intended recipient please immediately notify the sender, permanently and securely delete any copies and do not take action with it or in reliance on it. Any views expressed are the author's and do not represent those of IOP, except where specifically stated. IOP takes reasonable precautions to protect against viruses but accepts no responsibility for loss or damage arising from virus infection. For the protection of IOP's systems and staff emails are scanned automatically..

Institute of Physics. Registered charity no. 293851 (England & Wales) and SCO40092 (Scotland)
Registered Office:  37 Caledonian Road, London, N1 9BU<https://goo.gl/maps/DUHbKcbzuUN2>
Your privacy is important to us. For information about how IOP uses your personal data, please see our Privacy Policy<https://emea01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwww.iop.org%2Fprivacy%2Findex.html&data=02%7C01%7C%7C6716aa3c6fd84da5102808d5c0b234a0%7Cf9ee42e6bad04e639115f704f9ccceed%7C0%7C0%7C636626793962820374&sdata=RI6OT4MumRlklNzF5i2M9ZxS6P%2FxxLg%2FJwcnMJ%2B0480%3D&reserved=0>
________________________________