Document Image Accessibility: Alt Text, Contrast, and WCAG
Make document images accessible with useful alt text, contrast fixes, and WCAG basics so scans, charts, and PDF exports work for every reader.
TL;DR: Document images fail accessibility when teams treat them as decoration. Meaningful alt text, sufficient contrast, readable structure, and text alternatives for charts are WCAG basics—and they apply to PDF page exports, intranet scans, and blog embeds alike.
A scanned contract posted on your client portal. A JPG infographic exported from a quarterly report. A PNG of a table someone screenshot-ed because “PDF was easier.” Each is an image of a document—and each can lock out users who rely on screen readers, high-contrast modes, or zoom beyond 200%.
Document image accessibility sits at the intersection of disability law, brand trust, and plain good publishing. WCAG (Web Content Accessibility Guidelines) 2.2 gives testable criteria; this article translates them into practices content and ops teams can apply without hiring a full-time accessibility engineer.
Why document images are a special case
Unlike hero photos, document images carry information: clause text, invoice line items, org charts, compliance checklists. When that information exists only as pixels:
- Screen readers announce “image” with no content—or read garbage OCR if embedded poorly
- Low-contrast scans become unreadable for low-vision users
- Mobile zoom reveals blocky compression instead of text
- Search and assistive tech cannot index the words inside
Accessibility is not only about websites. Email attachments, Notion pages, Slack uploads, and help-center articles all inherit the same obligations when your organization serves the public or operates in regulated sectors.
WCAG basics that apply to document images
You do not need to memorize every success criterion. Focus on these clusters:
| WCAG principle | Document image application |
|---|---|
| Perceivable | Provide text alternatives; ensure contrast; offer resizable text where possible |
| Operable | Keyboard-accessible viewers; no seizure-inducing flash in embedded scans |
| Understandable | Alt text matches purpose; language declared |
| Robust | Works with assistive tech; semantic HTML around embeds |
For most teams, Level AA is the practical target—often referenced by ADA-related litigation and public-sector procurement.
Success Criterion 1.1.1 — Non-text content (alt text)
Every informative image needs a text alternative that serves the same purpose.
Bad alt text: “document,” “scan001,” “PDF page”
Better alt text: “Signed 2026 vendor agreement, page 1: parties, effective date March 1, 2026”
Best approach when full text matters: Provide the full text in HTML or a linked accessible PDF with a proper text layer—not a 40-word summary of a 40-page contract.
Rules of thumb:
- Decorative page borders or stock photos → empty alt (
alt="") - Informative charts → short summary + long description or data table
- Functional icons (download PDF) → describe the action, not the pixel art
- Complex multi-page scans → link to an accessible version; use alt to summarize scope
Success Criterion 1.4.3 — Contrast (minimum)
Text in images must meet contrast ratios against backgrounds:
- 4.5:1 for normal text
- 3:1 for large text (18pt+ or 14pt bold)
Gray-on-gray scans, yellow highlighter over body text, and faded fax output often fail. Before publishing:
- Adjust levels or binarize scans intended for web
- Avoid embedding critical text inside low-contrast marketing overlays
- Prefer HTML text over text baked into images when redesigning
Success Criterion 1.4.4 — Resize text
If users zoom to 200%, content should not clip or overlap. Pure images of text do not reflow—another reason to supply HTML or tagged PDF alongside JPG exports.
Alt text workflows for common document scenarios
Scanned PDF pages on the web
Do not upload 300 DPI scans without a plan:
- Primary: Host a tagged, OCR’d PDF with reading order fixed.
- Supplement: Offer HTML summary for key fields.
- If image-only is unavoidable: Write alt describing document type and offer download of accessible alternative on request.
Exporting pages to images for preview? Use consistent naming and captions beneath the image—captions are visible to all users and help screen reader context when alt alone is insufficient.
Charts and tables exported as PNG
A table screenshot is an accessibility dead end. Provide:
- An HTML
<table>with headers (<th scope="col">) - Or a CSV download linked adjacent to the image
- Alt text like: “Bar chart: Q1–Q4 revenue; Q4 highest at $2.1M” plus link to data
Forms and instructions photographed
HR and gov sites love phone photos of paper forms. Replace with:
- Fillable PDF with labels
- Web form with
<label>elements tied to inputs - Step-by-step text instructions—not only an image of the steps
Social and blog embeds
Marketing teams export PDF pages to JPG for Twitter or blog heroes. Pair every embed with:
- Descriptive alt in the CMS
- A text link to the full accessible report
- Captions that do not duplicate alt verbatim (redundant for screen reader users if both say the same thing—vary or use caption for attribution, alt for content)
When generating web previews from PDF, a clean pdf to jpg converter export at moderate DPI keeps file sizes reasonable while you maintain a separate accessible source document.
Contrast and legibility fixes before publish
| Problem | Fix |
|---|---|
| Yellowed scan background | Grayscale + auto-levels; avoid aggressive JPG compression |
| Faint pencil signatures | Keep signature image; duplicate signer name in adjacent text |
| Color-only status indicators | Add labels (“Approved,” “Pending”) not only red/green dots |
| Watermarks over text | Reduce opacity in source; never watermark required reading text |
Test with browser zoom at 200% and with Windows High Contrast Mode or macOS Increase Contrast enabled.
Testing checklist ops teams can run monthly
- Automated pass — axe, WAVE, or Lighthouse on pages with document embeds
- Screen reader spot check — NVDA (Windows) or VoiceOver (Mac) on three representative pages
- Keyboard-only navigation — can users reach downloads and linked accessible versions?
- Color contrast sampler — WebAIM Contrast Checker on text regions inside images
- Policy review — are teams uploading raw scans without OCR or alt?
Log failures in the same ticket queue as broken links—accessibility is operational quality, not a one-time audit.
Legal and business context (not legal advice)
Public-sector sites, education, healthcare, and financial services face growing enforcement around digital accessibility. Even without a lawsuit, inaccessible document images:
- Exclude customers and employees
- Increase support calls (“I can’t read this attachment”)
- Slow procurement when RFPs require WCAG 2.2 AA conformance
Building habits early—alt text, contrast checks, text alternatives—is cheaper than remediating years of scan-only archives.
Practical policy snippet for content teams
Publishing rule: No informative document may go live as image-only. Required: (1) text alternative or tagged PDF, (2) contrast check for scans, (3) caption or visible summary for charts, (4) retention of source editable file.
Train authors in 30 minutes. Templates do the rest.
Bottom line
Document image accessibility is not optional polish—it is how teams honor WCAG basics and serve every reader. Write alt text that reflects purpose, fix contrast before export, and never treat a scan as a substitute for structured text. The JPG is the preview; the accessible document is the product.
