Accessibility : Failing sufficient contrast due to text on background image (WCAG 1.4.3)

[RababGomaa]

Institutional landing page - currently in beta
Scenario of failure
User opening web page on an tablet e.g. IPad, the decorative image appears under the intro text

Description of Failure
-Contrast not sufficient due to decorative image coded but not responsive e.g. visual does not adjust position properly upon user agent and devices & user resolution

Related WCAG technique
Failure of Success Criterion 1.4.3 and 1.4.6 due to using background images that do not provide sufficient contrast with foreground text (or images of text)

Screenshot
Image demonstrating the failure on AAFC - after applying the beta template code

[jmealing]

Hi - this image is definitely not meant to be implemented this way.

If departments wish the image to be visible underneath the text, they should pick an image/visual treatment with appropriate contrast.

Alternatively, the template includes classes so the image can be disabled for a tablet/mobile view.

[jkshapiro]

The template should work at all resolutions.

[jmealing]

It does work in all resolutions. It's just a matter of applying the right class when you do not have an image that does not run full width in the background (with appropriate contrast).

Though, I just realized the class to hide the image for the tablet view is not included in the guidance yet, and it should be. I've made a note to update it ASAP. We only have a hidden in mobile class in the current guidance.

[jmealing]

We've updated the live ILP guidance with the tablet instructions/class.

Can I close this issue, or is there still more to discuss?

[RababGomaa]

Hello @jmealing
### Failure 1:
Scenario: On a webpage with the classes added to the div e.g. <div class="ip-cover-img ip-cover-hide-mobile ip-cover-hide-tablet ">, the background image still appears under the text on tablet landscape view.

Description of Failure
The CSS code in https://design.canada.ca/css/ip.css does not cover proper min-max width for tablet
@media screen and (max-width: 768px) { .ip-cover-hide-tablet {background-image: url("none") !important;} @media screen and (max-width: 425px) { .ip-cover-hide-mobile {background-image: url("none") !important;} }

Suggested solution
Adding a min-width attributes and leverage the code & values used in WET 4 view-source:https://wet-boew.github.io/wet-boew/theme-wet-boew/css/theme.min.css for tablet .hidden-sm and mobile .hidden-xs .
@media (max-width:767px) { .hidden-xs {display:none!important} } @media (min-width:768px) and (max-width:991px) { .hidden-sm {display:none!important} }

### Failure 2
Adding the guidance about makes it clear for the users. Thank you!

ip-cover-hide-mobile or the ip-cover-hide-tablet class in addition to ip-cover-img to hide the image in mobile or tablet view.

However, the demo page as is uses a background image without the classes. I recommend updating the HTML of the demo to include those classes to avoid confusion
<div class="ip-cover-img ip-cover-hide-mobile ip-cover-hide-tablet ">