Last updated on May 29, 2024

How do you ensure your images have sufficient contrast and color contrast?

Images are powerful elements of web content that can convey information, emotions, and aesthetics. But not everyone can see them clearly or at all. That's why you need to ensure your images have sufficient contrast and color contrast to meet the Web Content Accessibility Guidelines (WCAG).

1 What is contrast and color contrast?

Contrast is the difference in brightness or color between two elements, such as text and background, or an image and its surroundings. Color contrast is a specific aspect of contrast that measures how well two colors can be distinguished from each other. Both contrast and color contrast affect the visibility and readability of images, especially for people with low vision, color blindness, or other visual impairments.

Add your perspective

2 Why are contrast and color contrast important for accessibility?

Contrast and color contrast are important for accessibility because they help users perceive and understand the content and purpose of images. For example, if an image has low contrast or color contrast, it may blend in with the background, making it hard to notice or identify. Or, if an image uses colors that are similar or confusing to some users, it may convey the wrong message or lose its meaning. WCAG provides specific criteria and techniques for ensuring adequate contrast and color contrast for images, depending on their role and function.

Add your perspective

Dr. Keith Newton

Accessibility Director, Lead, Trainer | Prompt, Generative AI Engineer | AI/ML Architect | AI Policy | Artificial Intelligence | Machine Learning | Automation | Collaboration | Project Management | Leadership | Fitness
Report contribution
Contrast levels should be at a minimum: 3:1 Non-text content 4.5:1 Text content NOTE: These are MINIMUM guidelines. Typically, the higher the contrast ratio, the better for the perception of content

Like
Jesse Sookne

I help SaaS companies stop turning away disabled customers by making their products accessible.
(edited)
Report contribution
Contrast is important for accessibility because without sufficient contrast people may not be able to perceive parts of your web page, UI, graph, etc. People with low vision often need higher contrast to perceive and distinguish elements in a complex visual presentation like a website or a graph. Using sufficient contrast is also important in situations that many people wouldn't think of as disabilities -- for example, when viewing a phone or laptop outside in bright light. These are often called situational disabilities. When the systems we use provide sufficient contrast, this task becomes much easier.

Like

3 How do you check contrast and color contrast for images?

One way to check contrast and color contrast for images is to use online tools that analyze and calculate the contrast ratio between two colors or elements. For example, you can use the WebAIM Contrast Checker or the Colour Contrast Analyser to enter or select colors and see if they meet the WCAG standards. You can also use browser extensions or plugins that simulate different visual conditions, such as grayscale, inverted colors, or reduced contrast, to see how your images look to different users.

Add your perspective

Dr. Keith Newton

Accessibility Director, Lead, Trainer | Prompt, Generative AI Engineer | AI/ML Architect | AI Policy | Artificial Intelligence | Machine Learning | Automation | Collaboration | Project Management | Leadership | Fitness
Report contribution
Use a color contrast tool such as Colour Contrast Analyser (CCA) https://www.tpgi.com/color-contrast-checker/ to check colors in images. If the contrast is below 3:1 for non-text, it's going to be difficult for some users to perceive that content. Consider making adjustments with some of the colors in photo-editing software such as Photoshop.

Like

4 How do you improve contrast and color contrast for images?

If your images do not meet the WCAG contrast and color contrast requirements, you can try to improve them by adjusting their brightness, saturation, hue, or opacity. You can also use filters, borders, shadows, or overlays to create more contrast between the image and the background or other elements. Alternatively, you can replace or redesign your images with more suitable colors or shapes that create enough contrast and color contrast.

Add your perspective

5 How do you use alt text for images?

Another way to ensure your images are accessible is to use alt text, which is a short description of the image that is read by screen readers or displayed when the image is not available. Alt text helps users who cannot see or access the image to understand its content and function. WCAG provides guidelines and examples for writing effective alt text for different types of images, such as informative, decorative, functional, or complex.

Add your perspective

Dr. Keith Newton

Accessibility Director, Lead, Trainer | Prompt, Generative AI Engineer | AI/ML Architect | AI Policy | Artificial Intelligence | Machine Learning | Automation | Collaboration | Project Management | Leadership | Fitness
Report contribution
Add a short description of the image that will allow someone, without seeing it, to understand what's in the scene. Here are a few examples: 1. A dog licking its paw 2. A young boy reads a book 3. Three girls running across a field of grass By sticking with succinct (short but complete) descriptions, a non-visual user is quickly able to perceive and understand the image as it relates to the rest of the content.

Like

6 How do you test your images for accessibility?

Finally, you can test your images for accessibility by using various methods and tools that check your web content against the WCAG criteria and provide feedback and suggestions. For example, you can use the WAVE Web Accessibility Evaluation Tool or the Lighthouse Accessibility Audit to scan your web pages and identify any issues or errors with your images or other elements. You can also use manual testing techniques, such as keyboard navigation, zooming, resizing, or using screen readers, to experience your web content from different perspectives and ensure your images are accessible to all users.

Add your perspective

7 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?

Add your perspective

Anisat A.

Frontend Developer and Accessibility | Technical Writer | AWS Community Builder
Report contribution
Some ways to get started with ensuring that images are accessible are; - Make sure to use descriptive alt text that concisely describes both the content and purpose of the image. - You can check the alt text by temporarily deleting the image source and making sure that the text accurately describes the image's purpose even when the image isn't there. - Ensure that decorative images have empty alt attributes or are marked as decorative to prevent screen readers from announcing unnecessary content. By incorporating these steps, you can ensure that your images are accessible and inclusive for all users.

Like

Web Content Accessibility Guidelines (WCAG)

How do you ensure your images have sufficient contrast and color contrast?

1

2

3

4

5

6

7

1 What is contrast and color contrast?

2 Why are contrast and color contrast important for accessibility?

3 How do you check contrast and color contrast for images?

4 How do you improve contrast and color contrast for images?

5 How do you use alt text for images?

6 How do you test your images for accessibility?

7 Here’s what else to consider

Web Content Accessibility Guidelines (WCAG)

Rate this article

Thanks for your feedback

More articles on Web Content Accessibility Guidelines (WCAG)

More relevant reading