How to keep text readable on a gradient
Check the colours directly behind your text and keep controls readable across the whole background.
Check the area behind the text
A gradient has different colours in different positions. A readable heading at one point can become difficult to read when the page resizes. Test desktop and mobile layouts with the actual text placement.
Add a calm surface when needed
Place longer text inside a solid or lightly translucent card, or add a dark or light overlay to the background. Use the light and dark variations as starting points, then check the final combination.
Measure the final contrast
WCAG requires at least 4.5:1 for normal text and 3:1 for large text at level AA, subject to its exceptions. Measure against the background immediately behind each text region; a light or dark label alone does not guarantee accessible contrast.
Source: WCAG contrast requirements
Try these landing page backgrounds
Open an example to compare palettes and export the background.
