Change background to contrast content

How to use it

Switch to a different background colour part way through your website.

When to use it

If you're showing content in a part of your website that won't have very good contrast against your background colour, such as mostly-white app screenshots against a white background, you can transition to a different background colour for that section, to make sure there's good contrast for the content.

What to watch out for

Normally the colour change doesn't have to be too dramatic, unless you have a good reason to want it to be. However, if the colour change is not large enough, the point where one colour changes to another might look too "soft" or "fuzzy", and it won't look as clean as you might light.

Having said that, you don't need to worry too much about the contrast between background colours in terms of accessibility, so you can get away with colour differences that would normally fail the WCAG guidelines for foreground-on-background colour pairs.

Examples