Free online accessibility checkers
Color contrast checkers, WCAG tools, ARIA helpers, and accessibility testing utilities.
Six checkers aimed at the two accessibility failures that show up most often in an audit: colour that cannot be read, and markup that cannot be operated with a keyboard or announced by a screen reader. The WCAG Contrast Checker computes the relative-luminance contrast ratio between a foreground and a background and gives four separate verdicts rather than one pass or fail, because the thresholds differ: 4.5:1 for AA on normal text, 3:1 for AA on large text, 7:1 for AAA normal and 4.5:1 for AAA large. When a pair fails it proposes the nearest colour that would pass, adjusting foreground or background separately so you can keep whichever one is fixed by a brand guideline, and it renders the same pair through protanopia, deuteranopia, tritanopia and achromatopsia simulation matrices so you can see which of your colour distinctions survive. The Color Contrast Matrix scales that up to a whole palette: add every colour in your system and it computes the ratio for every pair at once, sorts and filters the grid by which WCAG level a combination reaches, and exports the whole table as CSV for a design-system audit. The A11y Palette Generator works the other direction, starting from one brand colour and building primary, secondary, accent, dark, light and neutral steps in HSL, nudging the lightness of each swatch until it clears 4.5:1 against its intended background, so the palette is compliant by construction instead of by later correction. The Color Wheel supplies complementary, analogous, triadic, split-complementary and tetradic sets when you need a starting hue rather than a fix. On the markup side, the ARIA Checker parses HTML you paste using the browser's own DOMParser and runs twelve rules over the resulting tree — missing image alt text, a missing lang on the html element, empty links and buttons, unlabelled form controls, skipped heading levels, a missing h1, positive tabindex values, invalid ARIA roles, focusable elements hidden with aria-hidden, a viewport meta that blocks zoom, and a missing skip link — reporting each with the specific element and a suggested fix. The Tab Order tool parses the same kind of pasted markup and lists every focusable element in the order a keyboard will actually reach it, flagging positive tabindex values that jump the sequence and elements removed from it entirely.
5 tools · always free · no account needed
WCAG Contrast Checker
Check color contrast ratio for AA/AAA compliance
Color Wheel
Interactive color theory with harmony suggestions
ARIA Checker
Analyze HTML for common accessibility issues
Tab Order
Visualize keyboard tab order of focusable elements
Color Contrast Matrix
Check WCAG contrast ratios for all combinations of a color palette
How to choose the right tool
Decide first whether the problem is colour or structure. For colour, the choice is about how many values you are testing: use the WCAG Contrast Checker for a single pair, when you also want the suggested passing colour and the colour-blindness simulations; use the Color Contrast Matrix when you have a palette and need to know which combinations are legal before a designer picks one, since the CSV export is the artefact an audit actually wants; and use the A11y Palette Generator when the palette does not exist yet and you would rather start from a compliant set than repair one. The Color Wheel sits before all three, for choosing hues rather than verifying them. For structure, the ARIA Checker is the broad first pass over pasted markup, covering twelve of the most common WCAG failures with the offending element named; Tab Order is the narrow follow-up for exactly one question, which is whether a keyboard user reaches your controls in the order the layout implies. Run Tab Order after any change that adds a modal, a custom dropdown or a positive tabindex, because those are what break a sequence that was previously fine.
Frequently asked questions
What contrast ratio do I actually need?
WCAG 2.1 level AA asks for 4.5:1 on normal text and 3:1 on large text, where large means at least 18.66 px bold or 24 px regular. Level AAA raises those to 7:1 and 4.5:1. AA is what most legal requirements reference, including the European EN 301 549 standard and US Section 508. The checker reports all four verdicts side by side so you can see, for example, that a pair passing AA for a heading fails it for body copy at the same colours.
Can these tools check a live URL?
No. The ARIA Checker and Tab Order work on HTML you paste in, which they parse with the browser's DOMParser into a detached document. That means they cannot fetch a page for you, and equally that they never send your markup anywhere. It also means they read the markup as delivered: if your page builds its DOM with JavaScript, paste the rendered HTML copied from your browser's inspector rather than the server response.
Why is a positive tabindex flagged as a problem?
Because any element with tabindex="1" or higher is pulled to the front of the tab sequence, ahead of every element in normal document order. One such attribute reorders the whole page, and it is almost always a mistake left over from a fix to a single control. The accessible pattern is tabindex="0" to make a custom element focusable in its natural place, and tabindex="-1" to make it focusable only by script. Tab Order shows you the resulting sequence so the damage is visible.
Does passing the contrast checker mean my site is accessible?
It means one specific criterion is met for the pairs you tested. Contrast is criterion 1.4.3 out of around fifty in WCAG 2.1 AA, and colour alone says nothing about focus visibility, keyboard traps, form error handling, motion, captions or how a screen reader announces your components. Automated rules of the kind the ARIA Checker applies typically catch about a third of real issues. Use these tools to clear the mechanical failures, then test with an actual keyboard and screen reader.
How accurate is the colour-blindness simulation?
It applies standard linear transformation matrices for protanopia, deuteranopia and tritanopia, plus a luminance-weighted greyscale for achromatopsia. Those approximate the dichromatic cases well enough to reveal the common failure, which is red and green at similar lightness becoming the same colour. They do not model the anomalous trichromacies, where a cone is shifted rather than missing, and they cannot represent individual variation. Treat a simulation as evidence that a distinction is risky, not as a verdict on one person's vision.
You might also need
Generate CSS effects, convert colors, build gradients, animate timing functions, and visualize box-shadows.
Word counters, readability scores, grammar checkers, text transformers, and writing utilities.
QR generators, URL shorteners, password tools, checksum calculators, and general-purpose utilities.
Updated