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.
Sample text at 16px
Small text at 14px — harder to read with low contrast
- 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.
"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:
- 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: summarize 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 outline
- 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
🔗 Link Text Examples
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.
🎯 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.
⌨️ 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.
📖 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.
👁️ 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.
More testing tools
These interactive tools complement full testing suites:
- Complete Testing Tools Guide — axe, WAVE, and more
- Quick Reference Cards — Printable checklists
- Disability Simulations — Experience barriers firsthand