Follow these requirements and best practices for designing graphics and developing images for Office of Energy Efficiency and Renewable Energy (EERE) websites and applications. This includes the requirements for making images Section 508-compliant.

Requirements

All images should follow the guidance in the Energy.gov Image Guidelines document.

Include Alt Text

Screen readers use alt text to provide visually impaired users with a description of a graphic. Read our page on writing alt text to ensure your site complies with Section 508 standards.

Use Sufficient Color Contrast

508 guidelines state that there must be sufficient color contrast between text and its background color. Your graphics must meet at least AA-level conformance on W3C's Web Contrast Accessibility Guidelines.

Don't Use Color to Convey Meaning

Do not use color alone to convey meaning. This makes your image impossible to understand for colorblind users.

Avoid Flickering Images

People with photosensitive epilepsy can have seizures triggered by flickering or flashing in the 4 to 59 flashes per second (Hertz) range with peak sensitivity at 20 flashes per second. Use care when design animated GIF images or other refreshing content.

Best Practices

Following these best practices will result in higher quality images.

  • "Sharpen" your images in Photoshop using the standard sharpen filter ("Filter/Sharpen/Sharpen.")
  • Photos should not be over-optimized or degraded in any way. If degradation is noticeable in a photo, that photo should not be used. A better quality original should be found.

Writing Captions for Images

If an image is non-decorative, it should have a caption. All images or graphics taken from third party sources should also have proper attributions to where the image or graphic came from originally.

  • Captions should be written for all visitors and shouldn't duplicate alt text. Information that would benefit both sighted visitors and visitors using screen readers should be put it in the caption.
  • The caption text override box (which is accessible by checking the Display Override Text Fields box in the Media Block Editor) allows for extended formatting of image captions.
  • When formatting captions, italicize only the attribution part of the caption. The remainder of the caption should be left in plain formatting (no italics, underlines, bold, etc.). 

Adding and Editing Uploaded Media

CMS Support maintains guides for creating new media and editing previously uploaded media (requires CMS login to access).