Skip to main content

We’ve built a form that uses full blead images behind each question.

The accessibility checker is telling us that we have issues with Color Contrast for text of both questions and answers.

 

We have dialed back the brightness -80% on each image to the point where it is almost black to try to address this. See basic examples below.

 

 

In the design theme, the question and answer text is set to white. #FFFFFF

When the theme background is set to #888888, the accessibility checker flags the issues. If we change the theme background to #000000 (black) the issues go away. Neither of these background colors are ever seen on our forms.

So…..

What is the accessibility checker actually checking? Is it the form that’s being presented or is it the design theme? From what I can tell, it’s the design theme, which appears to be completely irrelevant to forms where the text sits on top of an image.

If the checker is not actually checking our form (but rather the underlying background color which is never seen) does anyone know how we can check the contrast of our actual form?

 

 

 

 

Hi @digitalmacdonald Thanks for stopping by the community! This article here has a bit more information on how the accessibility checker actually works. Hopefully that helps clarify a bit!


Hi @Liz 

I should have prefaced my question by saying that I’d read that article, and I can’t see where it addresses the question at all. If fact it feels ambiguous to the point of being potentially misleading in instances where images are present in the form. Would you be able/willing to point out what information in that article you think is relevant, or maybe expand on your comment a bit?

Summarized Questions:

What is the accessibility checker actually checking? Is it the form that’s being presented or is it the design theme? From what I can tell, it’s the design theme, which appears to be completely irrelevant to forms where the text sits on top of an image.

If the checker is not actually checking our form (but rather the underlying background color which is never seen) does anyone know how we can check the contrast of our actual form?

 

With the above in mind as my summarized questions, it seems to me that the checker is not checking the actual background as presented in the form, but is instead checking the design theme. 

The article states:

The accessibility checker checks for the the following:

- Button color contrast against the background

- Button text color contrast against button background

- Question text color contrast against the background

- Answer text color contrast against the background

 

However my testing suggests that it does NOT check against the background of the form (see initial post), but in fact tests against the background of the design theme.

This results in false test results for a form with full image backgrounds. In our case, it resulted in several hours of changing images in order to achieve a pass mark in a test that appears to have no relationship with the contrast that would be visible on the form itself. 


Hi @digitalmacdonald 

The accessibility checker only checks the text color against the theme background color. It doesn’t currently check the contrast against a background image if that’s being used. It checker should show a warning if there’s a background image that contrast accessibility can’t be guaranteed when using an image.

You should be able to test using this tool: https://www.brandwood.com/a11y/

Hope that helps

Joyce


Reply