Overlays are a semi-transparent layer between an image and text, allowing text to be easier to read.

Choosing a style to match the image

Picking the right overlay is a subtle art. Choose an overlay that doesn’t drastically alter the appearance of the image. The goal is to add just enough so the images looks untreated – whilst boosting text clarity. The overall colour, exposure, crop and style of image will influence which one you choose.

<aside> ⚠️ See our Accessibility Guidelines on text contrast

</aside>

https://www.figma.com/file/a0xD8Q9AS85pIEnNtBBf2s/Supernova-Images?node-id=16148%3A63791&t=5inWcAKBVt35sCas-1

Text placement

The placement of text will also have an effect. You may need to pick different overlays at different breakpoints where text moves.

https://www.figma.com/file/a0xD8Q9AS85pIEnNtBBf2s/Supernova-Images?node-id=16152%3A47661&t=5inWcAKBVt35sCas-1

<aside> ✅ Dos

</aside>