Colour contrast
WCAG 1.4.3 · 1.4.11At least 4.5:1 for normal text and 3:1 for large text. Never use colour alone to show status or links.
Contrast ratio:
| Requirement | Needs | Result |
|---|
Saved in this browser. These are built-in preferences, not a script that paints an overlay over the page.
Open-source browser extension · WCAG 2.2
AccessForAll audits any page for what blocks blind, deaf and motor-impaired people. It repairs what can be repaired safely, and flags what needs a human decision.
Live demo
This fictional shop breaks thirteen common rules on purpose. The audit below runs on its real markup. Select a finding to locate it, then generate the accessible version and press Tab through the result.
Not sure about sizing? Read our returns policy before you order.
Last action in the shop: none yet.
Before repair
Select a finding to locate it on the page.
The rules run in your browser here. Alt text for the two product photos and the banner comes from recorded OCR results; the extension reads them with Tesseract. Generated alt text and link names are marked Review because a person should confirm them.
Connected to the engine
Send a web address or pasted HTML to the AccessForAll server. It audits the page in headless Chromium, proposes fixes, and re-tests every fix before marking it verified.
For visually impaired users
Four requirements, each with a tool you can use right now.
At least 4.5:1 for normal text and 3:1 for large text. Never use colour alone to show status or links.
Contrast ratio:
| Requirement | Needs | Result |
|---|
Text resizes to 200–300% without clipping or sideways scrolling. Drag the slider and watch the layout reflow.
Leather upper, cushioned sole. Pairs well with everything in your wardrobe.
Proper headings, landmarks and alt text let NVDA, JAWS and VoiceOver users jump around. This is the outline of this very page, read from its own markup.
For a broken page, open the demo's Screen reader view to hear what goes wrong.
Light, dark and high-contrast modes, font sizing, line spacing and target size live in one preferences panel that is part of the page itself. Overlay widgets are avoided because they often break assistive technology.
Current:
For hearing-impaired users
Captions, transcripts, text-based support and plain wording.
Synchronised captions with speaker names and sound cues, plus a full transcript you can click to seek.
Phone-only support shuts people out. Offer text-based options and let people pick how they hear back.
Support address: support@accessforall.example
Plain, direct sentences help everyone, and matter most for people who read sign language as a first language.
For motor-impaired users
Keyboard access, generous targets, adjustable time and short forms.
Every control works from the keyboard, with a focus indicator that is visible on any background. Tab into the toolbar, then use the arrow keys.
| Tab Shift+Tab | Move to the next or previous control |
| Enter Space | Activate a button or link |
| ← → Home End | Move inside a toolbar |
Tab here, then press an arrow key.
Last key:
WCAG 2.2 sets 24 px as the minimum and 44 px as the comfortable size. Pick a size; it applies to every control on this page.
A checkout session may expire only if people can pause it, add time or turn the limit off, and get a warning at least 20 seconds ahead.
Session not started.
Three fields, autofill hints, and errors that explain the fix. Try asha@gmial.com or leave the name empty.
Under the hood
The same pipeline powers the live scan above, the extension popup and a command-line run for CI.
Playwright loads the page, walks the real tab order and captures screenshots for the OCR step.
axe-core plus custom rules for focus visibility, target size, timers and contact options.
OCR reads text inside images, so banners and product shots get meaningful alt text.
Safe fixes patch the DOM. Anything that needs judgement is marked for review, with a change list.
The page is audited again and the score is recomputed, so every fix is checked, not assumed.