Lighten or Darken Backgrounds

Accessibility for all pages means your content is free of distraction as possible.  Background image can make your text hard to read.  If its your own image and you want to darken it you can always use something like Photoshop to make the image better for background use; otherwise, we offer these built in styles to help.

Finding Balance

The default darkening on stock photos or image backgrounds is a modest amount. 

This does not make it perfect for all images. Use these styles to make content easy to read for all.

Washes vs Light or Dark

These styles will fill the entire section or box not just the text content. 

To only make the text impacted you should use a wash style.

What's The Goal?

When looking for the best fit ask yourself if you have any trouble easily distinguish each letter in words.  Background images are tricky because they aren't all the same shade across the whole background.  Accessiblity doesn't just mean screen readers will pick up the slack.  Anyone from perfect to low vision must be able to read it with ease.  

High contrast between the background and text color, at least 4.5 to 1, is the recommended minium.  WebAIM has created a great tool which you can use to veryify that your meeting this standard.

WebAIM color contrast checker

Lighten or Darken Boxes

If you are using a stock photo or image in a box it will go behind the entire content.  There is a default darkening that will happen to help make the text more readible to users.  Depending on the image that might be too much, or not enough so you can append to the box style to help fine tune your content.

• background-lighter
• background-darker

Use either of these in your box style and it will help modify the overlay to make text easier to read.

Darkening

The three styles below will darken the image overlay.  You can decide which is right for your page, but the text needs to be easily read.

Lightening

In some cases using a lighter color behind the text is the best choice.  Use the resource below to see how adding light colors can impact the readiblity of your content.