You may be looking to make your designs both accessible and attractive. Modern web designers use gradient backgrounds for a glassy or highly distinctive look. It’s important to ensure that your background gradients have accessible colour contrasts compared to the foreground text.
You can make sure your designs are accessible by ensuring that all colour-stop points of your background are contrastful enough compared to the foreground text colour for your compliance requirements. For WCAG 2 AA, this ratio should be at minimum 4.5:1.
- Check your colour-stop points against the foreground text colour using a colour contrast checker.
- If you cannot determine the colours programatically, use a colour picker to test the darkest part of the text with the darkest part of the background, and the lightest part of the text with the lightest part of the background.
- Make sure to test your contrast checks for all states of the text for example hover, visited, focused for links and buttons.
Note: Logos, disabled form fields, and disabled buttons are exempt and do not need to be tested for contrast.
One strategy, popularized by Stripe, that you can use against non-contrastful backgrounds is to use an intermediate block with a contrasting background colour such as this one. This can help you balance the need for highly stylized content that stands out, while maintaining accessibility for your users.
This is another effective technique which employs a background colour specifically highlighting the text to ensure an appropriate level of contrast.
ACHECKS will scan your pages regularly identifying accessibility issues including contrast checks comparing foreground text to background colours. Check out the ACHECKS pricing plans if you prefer to automate checks throughout your website.
For more informative posts and tips relating to accessibility, you can sign up to the ACHECKS newsletter below.