HTML Accessibility Auditor

Most quick accessibility checks are either a superficial keyword scan or a heavyweight library you have to trust as a black box. This tool takes a third path: it parses whatever HTML you paste using the browser's own built-in DOMParser — no axe-core, no external accessibility library, nothing downloaded — and then walks the resulting DOM tree with a set of hand-written checks that mirror common, real WCAG 2.1 failure patterns. That means the logic is fully inspectable and the audit runs entirely inside your browser: the markup you paste, and any color pair you test, are never uploaded or sent anywhere.

The checks cover the failures that show up most often in real pages: <img> elements with no alt attribute at all (a genuine WCAG failure, distinct from the deliberately empty alt="" used for decorative images, which is correctly left unflagged), form controls with no way for assistive technology to know what they are for (checked against every real path to a label — a matching <label for>, being wrapped inside a <label>, or an aria-label/aria-labelledby attribute), heading levels that jump without warning (an <h1> straight to an <h3>, or a document with no <h1> at all, or more than one), links with no href or with vague, out-of-context text like "click here" or "read more", and a missing lang attribute when a full HTML document (not just a fragment) is pasted in.

The standout piece is genuine contrast math, not a superficial 'looks readable' heuristic. For any element carrying an inline color and background-color, the tool reads both values, resolves them to real RGB numbers via the browser's own CSS engine (so hex, rgb(), hsl() and named colors like 'tomato' all work identically), and computes the exact WCAG relative luminance for each — L = 0.2126×R + 0.7152×G + 0.0722×B, with every channel gamma-corrected first using the real sRGB transfer curve — before combining them into the official contrast ratio formula, (lighter L + 0.05) / (darker L + 0.05). The element's own font-size and font-weight decide whether the stricter 'normal text' thresholds or the more lenient 'large text' thresholds (18pt+, or 14pt+ bold) apply, and the result is checked against all four real WCAG numbers at once: 4.5:1 and 3:1 for AA, 7:1 and 4.5:1 for AAA — never collapsed into a single fake good/bad verdict.

This is a deliberately honest, pragmatic subset of a full accessibility audit, not a certification tool: it does not evaluate JavaScript-driven interactivity, ARIA widget patterns beyond basic labeling, keyboard focus order, or anything that requires actually rendering and running the page. Treat it as a fast first pass that catches some of the most common and most consequential WCAG failures — missing alt text, unlabeled fields, broken heading hierarchy, low-contrast text and vague links — before a page ships, alongside (not instead of) a full manual review or a dedicated auditing tool for anything shipping to production.