How to fix accessibility issue with large font and background image?

41 Views Asked by At

I have an image of ice-cream and on top of that I am adding a heading text in very large font, but font color is showing accessibility issue to me with background. How to fix this without changing the font color. Below is screenshot for reference. enter image description here

1

There are 1 best solutions below

0
slugolicious On BEST ANSWER

When you have text on top of an image, it gives you a variable color background. Technically, the contrast must pass on all variations of the purple compared to white. Some parts of the purple are darker and has a 12:1 (passing) contrast but other parts of purple are very light and have a 1.6 (failing) contrast.

Since your font is large, you're allowed to have a 3:1 contrast rather than 4.5:1.

One way to fix this is to have a semi-transparent or opaque box around the text. Perhaps something like this:

enter image description here