Imagery

How images are used on the site effect the message, the brand perception, and accessibility. Please review these for use case scenarios and reference our examples and templates when creating images for specific pages.

Accessibilty WCAG 2.0 Considerations

All images, form image buttons, and image map hot spots have appropriate, equivalent alternative text. (WCAG2 1.1.1)

Images that do not convey content, are decorative, or with content that is already conveyed in text are given null alt text (alt="") or implemented as CSS backgrounds. All linked images have descriptive alternative text. (WCAG2 1.1.1)

Equivalent alternatives to complex images are provided in context or on a separate (linked and/or referenced via longdesc) page. (WCAG2 1.1.1)

<img src="/images/homepage_hero.png" alt=""/>

<div class="homepage_hero" title="CareCredit homepage hero image" style="background-image:url(/images/homepage_hero.png)">

Hero Image

Imagery should be authentic and typically shows a vibrant person in a natural environment. The person appears friendly and confident and the photo should capture a moment in the person's life. Hero images need to be high resolution and at least 3000px wide. Desktop images have a fade on the left side for copy, whereas mobile hero images have text below.

Example: Desktop Hero

Download Template

Example: Mobile Hero

Text in Images

To be legible for the greatest number of users, it is important to ensure that any text that is superimposed over imagery has enough contrast with the background image. If text is placed within the image, it should be edited so that text backgrounds where text will be placed are totally white. Alternatively, text may be placed below the image in certain situations where creating a white space for text is not possible, such as tiles.

Example: Hero Image with partially white background for overlying text

Make sure there is enough white spread for contrast and legibility

Example: Tile Image with text placed below the image