Contrasts
SCA’s objective is to comply with the WCAG accessibility standard, according to which images with text should be readable with high contrast.

Body text against an image:

When we use body text on an image, we nearly always need to find calm areas of the image in order to achieve sufficient legibility.

Heading against an image:

When we use a heading on an image it is okay for the image to be a bit jumbled, but remember not to place headings above eyes or other important parts of the image.

Heading against picture

This is worth bearing in mind that even if headings can work against a somewhat more jumbled background, it may be a good idea to use calm image compositions for background images if possible.

Tips for images

The example below shows text against an image, and the legibility is not the best. SCA’s objective is to comply with the WCAG accessibility standard, so therefore be careful to ensure that the text has a high degree of contrast with the image.

Try to adjust the images to make them darker or lighter, or crop them differently in order to make the text more legible. Remember that the images are cropped differently at different widths by browsers, so that the text will appear in different places. In some cases a different image may be used in mobile mode.

Heading against picture