Accessibility Sandbox

Accessibility Sandbox

A tiny website for the remediation session. Everything runs offline — no install, no network. Use the navigation above (or the cards below) to move between the contrast tool and the two demo pages.

Tool

Color contrast checker

The thing Acrobat won't do for you. Try a color pair or an example and see the WCAG result instantly.

 Demo 1 · Broken

Grant portal — the broken version

Start here: a realistic page with the usual problems. Tab through it, then hit “Reveal the problems.”

 Demo 2 · Fixed

Grant portal — the fixed version

The same page built right: real headings, labels, buttons, alt text, visible focus.

 Tables

Complex tables, without the pain

One report table, before and after. Plus the real Word, Excel and PDF files to open.

 Reference

Printable quick reference

The one-look desk guide: definitions, contrast, the manual test, and every UCLA tool and link.

Prefer paper? Download the handout as a PDF to print.

Using this live in the session

  1. Contrast checker — open it, click the example chips (UCLA Gold fails, UCLA Blue passes), then let people type their own hex values.
  2. The two demo pages, in order — start with Demo 1 · Broken: mouse down, press Tab (no visible focus, can't reach “Apply”), ask what people notice, then hit Reveal the problems. Then open Demo 2 · Fixed and reveal the structure.

This site itself is built to be accessible — skip link, labelled nav, visible focus — so it's safe to navigate on the projector.