Accessibility-First Image Guide: Making Visual Content Work for Everyone

Images make content engaging, but they also create barriers. A user with low vision cannot read text embedded in an image. A user with color blindness cannot distinguish red error messages from green success indicators if color is the only differentiator. A screen reader user navigates by hearing alt text, not by seeing pixels. When images are not accessible, you exclude people from your content. This guide covers the WCAG 2.2 requirements for accessible images and the practical tools you can use to meet them.

WCAG 2.2 and Images

The Web Content Accessibility Guidelines (WCAG) 2.2 is the current standard for web accessibility. Several success criteria directly address images:

1.1.1 Non-text Content (Level A)

Every image must have a text alternative that serves the same purpose. For most images, this means an alt attribute. For decorative images that convey no information, use an empty alt="" to tell screen readers to skip them. Do not omit the alt attribute entirely, as some screen readers will read the file name instead.

1.4.3 Contrast (Minimum) (Level AA)

Text within images must have a contrast ratio of at least 4.5:1 against its background. Large text (18pt or 14pt bold) needs 3:1. This applies to images of text, not to photographs or decorative images. If your infographic contains text, that text must meet the contrast requirement.

1.4.5 Images of Text (Level AA)

If the same visual presentation can be achieved with text (HTML + CSS), use text instead of an image of text. The only exceptions are customizable images (like a logo with editable text) and essential presentations (like a specific font in a brand logo). This means most infographics should be HTML pages, not images.

1.4.11 Non-text Contrast (Level AA)

Parts of graphics required to understand content must have a contrast ratio of at least 3:1 against adjacent colors. This applies to icons, chart elements, and interactive graphics. If a user needs to see a specific part of an image to understand the content, that part needs sufficient contrast.

Writing Effective Alt Text

Alt text is the foundation of image accessibility. Screen readers read it aloud, search engines use it for image search, and it displays when an image fails to load. Good alt text is concise, descriptive, and serves the same purpose as the image.

Alt Text Rules

• Describe the purpose, not the pixels. "A chart showing sales increased 40 percent in Q3" is better than "A bar chart with blue bars on a white background with x-axis labels."
• Keep it under 125 characters. Screen readers typically cut off alt text at around 125 characters. If you need more, use a caption or long description.
• Do not start with "Image of" or "Picture of." Screen readers already announce "image" before reading the alt text. Starting with "Image of" is redundant.
• Empty alt for decorative images. Use alt="" for images that are purely decorative and convey no information. This tells screen readers to skip them.
• Never use the file name as alt text. "IMG_4827.jpg" is not alt text. Neither is "screenshot-2026-07-15.png."

Alt Text Examples

Good: alt="A line chart showing website traffic doubling from 10,000 to 20,000 monthly visitors between January and June 2026"

Bad: alt="chart" (too vague), alt="An image of a chart showing data about traffic on a website over time with a blue line going up" (too verbose, starts with "image of")

Decorative: alt="" on a decorative background pattern that conveys no information

Color Contrast and Accessibility

Color contrast affects both text within images and user interface elements. The WCAG 2.2 Quick Reference defines the exact ratios:

Content Type	Level AA	Level AAA
Normal text (under 18pt)	4.5:1	7:1
Large text (18pt+ or 14pt+ bold)	3:1	4.5:1
Non-text graphics (icons, charts)	3:1	Not specified
User interface components	3:1	Not specified

Use the contrast checker to test any two colors. Enter your text color and background color, and the tool calculates the ratio and tells you if it passes WCAG AA or AAA. For converting between color formats before testing, use the HEX to RGB converter or RGB to HEX converter.

Color Blindness and Visual Design

Color blindness affects approximately 8 percent of men and 0.5 percent of women. The most common types are:

Type	Prevalence	What They See Differently
Protanopia	1% of men	Cannot see red
Deuteranopia	1% of men	Cannot see green
Tritanopia	0.003%	Cannot see blue
Protanomaly	1% of men	Reduced red sensitivity
Deuteranomaly	5% of men	Reduced green sensitivity
Achromatopsia	0.003%	No color vision at all

If your design relies on color alone to convey information, users with color blindness will miss it. Common failures include:

• Red error borders and green success borders with no icon or text label
• Charts that use red and green to distinguish data series
• Status indicators that use only color (red/yellow/green dots)
• Forms where the only error indicator is a red border

Testing for Color Blindness

The color blindness simulator shows how your images and designs look to users with each type of color vision deficiency. Upload your image and the tool simulates protanopia, deuteranopia, tritanopia, and their anomalous trichromacy variants. This is the fastest way to check if your design relies on color alone.

For color palette design, the color scheme generator can help you choose palettes that are distinguishable across color vision types. Pair it with the contrast checker to verify that your palette meets both contrast and color blindness requirements.

Practical Accessibility Fixes

Fix 1: Add Alt Text to All Images

Audit your site for missing or inadequate alt text. Every <img> tag needs an alt attribute. Use image to text to generate text descriptions from images if you need help writing alt text for large batches.

Fix 2: Replace Images of Text with HTML

If you have banners or headers that are images of text, replace them with HTML and CSS. This improves accessibility, SEO (search engines read HTML text, not text in images), and performance (HTML text is smaller than image files). Use the image to text tool to extract text from existing images so you can recreate them as HTML.

Fix 3: Add Text Labels to Color-Only Indicators

If your forms use red borders for errors and green borders for success, add text labels and icons. "Error: Email is required" with a warning icon is accessible. A red border alone is not.

Fix 4: Test Your Color Palette

Run every text-to-background combination through the contrast checker. Then run your images through the color blindness simulator. Fix any failures by darkening text colors or lightening backgrounds until the ratios pass.

Fix 5: Provide Text Alternatives for Charts and Infographics

Charts and infographics are images, but the data they convey needs a text alternative. Add an aria-label or a visible caption that summarizes the key data points. For complex charts, provide a data table in HTML below the image.

Using OCR for Accessibility

Optical character recognition (OCR) can extract text from images, which is useful for creating text alternatives. The image to text tool uses Tesseract.js to recognize text in images. This helps with:

• Extracting text from infographics to create HTML alternatives
• Generating alt text drafts from images that contain text
• Converting scanned documents to searchable text

For making searchable PDFs from scanned images, the image to searchable PDF tool embeds an invisible text layer behind the image, making the PDF accessible to screen readers and searchable by text.

Real-World Examples

A university website had 200 course description pages with hero images that contained text overlays. None of the images had alt text, and the text in the images was not available as HTML. A screen reader user could not access the course information. The team used the image to text tool to extract the text from all 200 images, then recreated the text as HTML overlays on the images with proper alt attributes. The fix took one day and made 200 pages accessible.

A financial dashboard used red and green to indicate stock price movements. Users with deuteranopia (the most common color vision deficiency) could not tell which stocks were up or down. The team added arrow icons (up and down) next to the color indicators and added text labels ("+2.3%" and "-1.1%"). They verified the fix with the color blindness simulator. The dashboard became usable for all color vision types.

A marketing team created an infographic about their product launch. The text in the infographic had a contrast ratio of 2.8:1, failing WCAG AA. They used the contrast checker to find a darker text color that achieved 4.7:1. They also added an HTML summary of the infographic data below the image, satisfying the "images of text" requirement.

Tips for Best Results

1. Write alt text when you add the image. Do not leave it for later. Writing alt text in the moment, when you know the image's purpose, produces better descriptions than batch-writing them weeks later.

2. Test with a screen reader. Free screen readers like NVDA (Windows) and VoiceOver (macOS/iOS) let you experience your site the way your users do. Navigate through your images and listen to the alt text.

3. Use the W3C Web Accessibility Evaluation Tools list to find additional testing tools. The WebAIM site also provides excellent accessibility resources and the popular WAVE evaluation tool.

4. Do not rely on automated tests alone. Automated tools catch missing alt text and contrast failures, but they cannot tell you if the alt text is meaningful or if the image's purpose is clear. Manual review is essential.

5. Consider cognitive accessibility. Complex infographics can be overwhelming. Provide a simple text summary alongside the visual. Use clear, plain language in your alt text and descriptions.

FAQ

What is the minimum contrast ratio for text in images?

WCAG 2.2 Level AA requires 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). Level AAA requires 7:1 for normal text and 4.5:1 for large text. Use the contrast checker to verify your colors.

How long should alt text be?

Aim for under 125 characters. Screen readers typically pause or cut off at this length. If you need more space, use a caption or a separate long description (aria-describedby pointing to a hidden text block).

Should decorative images have alt text?

No. Decorative images that convey no information should have an empty alt="" attribute. This tells screen readers to skip them. Do not omit the attribute entirely, as some screen readers will read the file name instead.

How do I test my site for color blindness accessibility?

Upload your images or screenshots to the color blindness simulator to see how they look to users with different color vision deficiencies. Check if any information is lost when color is removed or altered.

Is WCAG 2.2 legally required?

In many jurisdictions, yes. The Americans with Disabilities Act (ADA) in the US, the European Accessibility Act, and similar laws in other countries require digital accessibility. WCAG 2.2 is the most commonly referenced standard. Even where not legally required, accessibility is a best practice that expands your audience.

What is the difference between WCAG Level A, AA, and AAA?

Level A is the minimum (no major barriers). Level AA is the target for most organizations (addresses the most common barriers). Level AAA is the highest (not always achievable for all content). Most accessibility regulations reference Level AA.

Related Tools

• Color Blindness Simulator - Test images for color vision deficiencies
• Image to Text - Extract text from images for alt text and HTML alternatives
• Image to Searchable PDF - Create accessible PDFs with text layers
• Color Scheme Generator - Generate accessible color palettes
• Contrast Checker - Verify WCAG contrast ratios

Conclusion

Accessible images come down to four things: alt text for every meaningful image, sufficient color contrast for text and graphics, alternatives to color-only indicators, and HTML alternatives for images of text. The contrast checker catches contrast failures. The color blindness simulator catches color-dependent designs. The image to text tool helps extract text for alternatives. Run these checks on every page, write meaningful alt text for every image, and your visual content will work for everyone, not just the 92 percent of users with typical vision.