Project 97, SEO and site tools

Accessibility Checker

Find the most common accessibility problems in seconds. Each issue is explained in plain words and highlighted on the page so you can fix it.

Main API: getComputedStyle
Rules: WCAG 2.2 basics
Dependencies: None
Your browser: Checking

Check a page

Run the check on the sample page, or paste your own HTML. Click an issue to highlight the element.

?Press the button to check the sample.

How it works

Load the page in a frameThe sample or your pasted HTML goes into an iframe with srcdoc, so its styles are real and can be measured.
Run simple rulesThe script looks for missing lang and alt, skipped headings, unlabeled fields, empty buttons and vague link text.
Measure real contrastFor every piece of text it reads the computed colours, walks up to find the background and works out the WCAG contrast ratio.

function luminance([r, g, b]) {
  return [r, g, b].map((v) => { v /= 255; return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4; })
    .reduce((s, v, i) => s + v * [0.2126, 0.7152, 0.0722][i], 0);
}
const ratio = (Math.max(L1, L2) + 0.05) / (Math.min(L1, L2) + 0.05);
if (ratio < 4.5) report("Low contrast", el);          // 3 for large text

doc.querySelectorAll("img:not([alt])").forEach((img) => report("Missing alt", img));