This page uses javascript to help render elements, if you have problems please enable javascript.
 
You are now inside the main content area
 
 
 
left col

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.

right col
 
 
left col

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.

right col
 
left col

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

right col
 
left col

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.

right col
 
left col

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.

right col
 
left col
right col
 
 
left col
ajax space

Example Header

This text should be easy to read, you should not have to squint or turn off the background to get through the text.

Depending on your own image this may need no extra help, or you may need to increase the darkening.

right col
 
left col
right col
 
left col

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.

right col
 
left col
right col
 
 
left col
ajax space

Example Header

This text should be easy to read, you should not have to squint or turn off the background to get through the text.

Depending on your own image this may need no extra help, or you may need to increase the lightening.

right col
 
left col
right col