Hi, for the header section (Assorted Indian Oils), the heading typography shows failed contrast ratio despite high contrast. I used white seashell colour for the title (which has high contrast with the background), yet, when I check the contrast ratio to achieve AA, it shows the font needs to be darker (where the contrast is not supposed to be high and the font is not visible).
Can anyone help me with it? Thank you.
here is a link to get an idea of why the text is failing on the background image
https://www.brandwood.com/a11y/
there are several ways you can fix it. To better understand why and how there is a link to W3C documentation. It is a bit technical so you can find another source on the internet that may be easier for you to understand like eg. this:
or this
or …
Hi, @Stan. Thanks for sharing. I added overlay, but why do I still get a fail? I even tried with a 100% black overlay. I tried refreshing the page, but I still got the same result.
I manage to find the answer. I need to add the color with black besides overlay.
As your page where is an element that cause issue is not published I wasn’t able to test it.
I have also tried to replicate your issue in temporary project but accessibility were fulfilled (with bg colour: transparent)
Glad to see you have found how to
If you do not have further question feel free to close your request as solved
Thank you for your time, Stan
