University of Arizona · Digital Accessibility

Interactive Accessibility Tools

Nine hands-on tools to practice, test, and learn accessibility skills — from checking color contrast and writing alt text to simulating low vision and taking a WCAG quiz. No installation needed; everything runs right here in your browser.

Color Contrast Checker

Enter foreground and background colors to instantly calculate their contrast ratio. WCAG 2.2 Level AA requires at least 4.5:1 for normal text and 3:1 for large text (18 pt+ or 14 pt+ bold). This checker shows pass/fail results for both AA and AAA conformance levels, helping you pick color combinations that everyone can read — including people with low vision or color blindness.

Enter hex color (e.g., #1565c0)
Enter hex color (e.g., #ffffff)

Sample text at 16px

Small text at 14px — harder to read with low contrast

21:1
Contrast ratio
✓
AA Normal text (4.5:1)
✓
AA Large text (3:1)
✓
AAA Enhanced (7:1)
About contrast requirements
  • WCAG AA Normal text: 4.5:1 — Required for body text
  • WCAG AA Large text: 3:1 — For text 18pt+ or 14pt+ bold
  • WCAG AAA Enhanced: 7:1 — Recommended for best readability
  • UI Components: 3:1 — For icons, borders, focus indicators

Alt Text Practice

Practice writing effective alternative text for five different types of images. After you submit, a rule-based scoring engine will evaluate your text against curated model answers, key-concept coverage, and common anti-patterns — no AI involved.

What is alt text and why does it matter?

"Alt text" (the alt attribute on an <img> element) provides a text equivalent of an image for people who cannot see it. Screen readers read this text aloud, and it appears when images fail to load.

Good alt text is concise, descriptive, and focused on the image's purpose in context — not its pixel-level appearance. For decorative images that carry no information, the correct practice is an empty alt attribute (alt="").

W3C Alt Text Decision Tree ↗ — use this to decide what kind of alt text an image needs.

Context:

Practice image placeholder
Image 1 of 5
Alt text tips and resources
  • Be concise but descriptive (usually under 125 characters).
  • Don't start with "Image of…" or "Picture of…" — redundant with the element's role.
  • Context matters — the same image may need different alt text on different pages.
  • For decorative images, use empty alt (alt="").
  • Describe purpose, not just appearance.
  • Charts & graphs: summarise the data or trend.
  • W3C Images Tutorial ↗
  • WCAG 2.2 SC 1.1.1 — Non-text Content ↗

Heading Structure Validator

Paste your page’s heading structure to check for hierarchy issues. Screen reader users navigate by headings, so a logical outline — H1 → H2 → H3, without skipping levels — is essential for usability. The validator flags skipped levels, missing H1 elements, and pages with multiple H1 headings, then displays a visual outline of your document structure.

Heading structure rules
  • Every page should have exactly one H1
  • Don't skip heading levels (H2 → H4 is bad)
  • Headings should create a logical outline
  • Use headings for structure, not just styling
  • Screen reader users navigate by headings

Learn to write descriptive, meaningful link text by studying good and bad examples side by side. Screen reader users often browse a list of links pulled out of context — so vague text like “click here” or “read more” tells them nothing about where the link goes. These examples show why clear link text matters and how to write it well.

"Click here"

To learn more about our accessibility services, click here.

Bad — doesn't describe destination
"accessibility services"

Learn more about our accessibility services.

Good — describes what you'll find
"Read more"

University announces new research center. Read more.

Bad — no context when links are listed
"Read more about the new research center"

University announces new research center. Read more about the new research center.

Good — works out of context
"https://arizona.edu/forms/registration.pdf"

Download the form: https://arizona.edu/forms/registration.pdf

Bad — URLs are hard to read/hear
"Registration form (PDF, 245KB)"

Download the Registration form (PDF, 245KB).

Good — describes content and format
The "list of links" test: If someone hears only the link text (via screen reader's links list), will they understand where each link goes?

Accessibility Quick-Start Wizard

Answer three quick questions about your role and needs, and get a personalized list of accessibility resources, guides, and support actions. Takes about 30 seconds.

Launch the Wizard →

WCAG Quick Quiz

Test your accessibility knowledge with 10 scenario-based questions covering WCAG 2.2, ARIA, keyboard access, and more. Instant feedback and explanations help you learn as you go.

Take the Quiz →

Keyboard Navigation Simulator

Practice using Tab, Shift+Tab, Enter, Escape, and Arrow keys to navigate common UI patterns like menus, modals, tabs, and forms. See your keystrokes visualized in real time.

Try the Simulator →

Readability Scorer

Paste any text to get its Flesch-Kincaid reading level, word and sentence counts, and plain-language suggestions. Aim for grade 8 or below to reach the widest audience.

Score Your Text →

Low Vision Simulator

Experience how cataracts, color blindness, tunnel vision, and low contrast affect web content. Apply real-time CSS filters to sample content to understand the barriers people face.

Try the Simulator →

More testing tools

These interactive tools complement full testing suites: