A very common pattern on the web is to overlay text on a photo. It’s a lovely effect but one that requires care to get right.
The difficulty arrises for the web developer wishing to produce an accessible site because they can never be sure what the colour of the photo will be.
A common pattern to work around this is to put a tint on the photo using a pseudo element.
Something I see too often with this pattern, is the web developer picks a value that looks good with the sample image without taking in to account how their authors will use it in the CMS.
If, as is often the case, the text is white the author may use a predominately white photo with standard sized text. If the tint isn’t strong enough the text will be difficult to read for users with the best vision, let alone for users with poor vision.
To stress test the image, you need to test the readability of your text on a background of the same colour as your text.
For white text, you need to test your semi-transparent black tint against an entirely white background, you will discover the minimum opacity to pass WCAG AA is 42%.
For clarity, to pass the WCAG AA standard, the tint needs to be rgba( 0, 0, 0, 0.42 ). A huge white blob in your browser won’t look as nice as white text on a holiday photo, but stress testing your designs isn’t about making them pretty, it’s about accessibility.
For black text on a white tint, the minimum opacity of the tint needs to be 35% to pass accessibility standards.
I calculated these ratios using Lea Verou‘s contrast-ratio.com, which allows for semi-transparent backgrounds to be specified and will provide WCAG AA and AAA results for all possible colour combinations.
If you look at the source code of this page, you will notice that some of the ratios I have used are higher than that specified by the calculations used by WCAG to specify the accessible value.
I’ve done this for a couple of reasons: nice round numbers are easier to specify in my CMS; and, as with any algorithm, the contrast ratio calculations defined by WCAG are imperfect.
