What WCAG version does this checker cover?

The tool covers rules drawn from WCAG 2.0, 2.1, and 2.2 at levels A, AA, and AAA. The 40+ rules address the most commonly encountered real-world accessibility failures across the major success criteria, including 1.1.1 (non-text content), 1.3.1 (info and relationships), 1.4.3 (color contrast), 2.1.1 (keyboard), 2.4.4 (link purpose), 3.1.1 (language), and 4.1.2 (name, role, value).

Is this tool a replacement for axe DevTools or Lighthouse?

No — it complements them. This tool is optimized for static HTML analysis: paste code and get instant results during development, code review, or design handoff. axe DevTools and Lighthouse run against a live, rendered page and can catch dynamic issues like focus management, live region announcements, and CSS-driven color combinations that static analysis cannot detect. Use both for thorough coverage.

Why does color contrast only check inline styles?

Color contrast requires knowing the final computed color and background-color of each element, which is only determined after external CSS and inheritance rules are applied. Because this tool analyzes an HTML string without a live DOM or CSS engine, it can only inspect colors declared directly in inline style attributes. For full contrast coverage, use your browser's DevTools accessibility panel or a dedicated contrast checking tool against your live site.

What does WCAG Level A, AA, and AAA mean?

WCAG has three conformance levels. Level A covers the most fundamental barriers — issues that make content completely inaccessible to some users. Level AA covers the standard expected for most public-facing websites and is the baseline required by laws such as the EU Web Accessibility Directive and US Section 508. Level AAA is the highest level and covers additional enhancements; meeting it fully is not required for all content types but is recommended where possible.

My HTML is a component snippet, not a full page — will it still work?

Yes. The checker handles HTML fragments gracefully. Rules that apply only to full documents (such as the check, missing , and page-level landmarks) are only reported when a root or element is detected. Fragment-specific rules such as missing alt text, unlabeled inputs, and invalid ARIA roles apply regardless of document completeness.

What does a critical vs serious issue mean?

Critical issues are complete barriers — for example, an image with no alt attribute leaves screen reader users with no information about that content. Serious issues are significant obstacles that degrade the experience substantially, such as a form input with no label. Moderate issues reduce usability for some users but do not completely block access. Minor issues are best-practice improvements. Fixing critical and serious issues first will have the greatest accessibility impact.

Is my HTML sent to a server?

No. All 40+ accessibility rules run entirely in your browser using client-side JavaScript. Your HTML is never transmitted to DevFlow servers for analysis. The optional AI explanation feature sends only the specific issue context and element snippet to the AI provider, not your entire HTML document, and no data is logged or stored.

How is the accessibility score calculated?

The score starts at 100 and deductions are applied per issue based on severity: critical issues deduct 10 points each, serious deduct 5, moderate deduct 2, and minor deduct 1. Each severity tier has a maximum contribution cap so that a page with many minor issues is not penalized as heavily as a page with a few critical failures. The final score is floored at 0. A score of 80 or above is considered good; 50–79 needs work; below 50 indicates significant accessibility barriers.

Can I use the API to check accessibility programmatically?

Yes. POST your HTML to /api/tools/a11y-checker with an optional wcagLevel (A, AA, or AAA) and an optional categories array to filter which rule groups to run. The API returns the full structured result including issues, the score object, and a summary string. This makes it suitable for CI/CD pipelines, design system validation scripts, or automated accessibility regression testing.

What does the skip navigation link check do?

The skip link check looks for a 'Skip to main content' or similar anchor as the first focusable element on a full page. Skip links allow keyboard-only users to bypass repeated navigation blocks (such as a header with many links) and jump directly to the main content. Without one, keyboard users must tab through every navigation item on every page before reaching the content they came for.

DevFlow

Accessibility Checker Online — Free WCAG Compliance Scanner | DevFlow

Free online accessibility checker and WCAG compliance scanner. Paste any HTML and instantly detect accessibility issues across 40+ rules covering images, forms, headings, ARIA, color contrast, keyboard navigation, links, tables, and multimedia. Get a WCAG 2.2 compliance score (A/AA/AAA), severity-grouped issue list with line numbers, and AI-powered explanations with code fix suggestions. Supports WCAG 2.0, 2.1, and 2.2 guidelines. Runs entirely in your browser — no data is ever sent to a server.

JavaScript is required to use this interactive tool. Please enable JavaScript in your browser, or use our Accessibility Checker API for programmatic access.

How to Accessibility Checker Online

Paste any HTML — a full page, a component snippet, or a template fragment — into the input panel. The checker works with both complete documents and partial HTML without requiring a doctype or root element.
The tool runs 40+ WCAG rules instantly in your browser and displays an overall accessibility score from 0 to 100, along with separate pass rates for WCAG Level A, Level AA, and Level AAA criteria.
Choose the WCAG conformance level you are targeting using the A / AA / AAA toggle. Level AA is the legal minimum for most jurisdictions, including the EU Web Accessibility Directive and the US Section 508 standard.
Review the score card to see how many issues are critical, serious, moderate, or minor, and how many elements and rules were evaluated. A score of 80 or above is considered good; below 50 indicates significant barriers.
Use the severity filter buttons to focus on critical and serious issues first. These map to WCAG failure conditions that completely block access for screen reader users, keyboard-only users, or users with low vision.
Expand any issue card to see the exact HTML element that triggered the rule, a plain-English explanation of the problem, and a suggested fix with a corrected code snippet wherever one can be generated.
Filter by category (images, forms, headings, ARIA, color, keyboard, links, landmarks, tables, multimedia, language, structure) to audit a specific aspect of your HTML in isolation.
Copy the report as a Markdown document for embedding in pull request descriptions, accessibility audits, or issue trackers. Use the JSON copy format for structured processing or API pipeline integration.

Accessibility Checker Features

40+ WCAG 2.2 rules across 12 accessibility categories: images, forms, headings, ARIA, color contrast, keyboard navigation, links, landmarks, tables, multimedia, language, and document structure.
Weighted accessibility score (0–100): critical issues deduct the most points, capped per severity tier so that a single very-bad rule cannot dominate the entire score.
WCAG Level A / AA / AAA breakdowns: separate compliance pass-rates help you understand which conformance tier your HTML meets and how much work remains to reach the next level.
Inline color contrast analysis: parses hex, rgb(), hsl(), and named CSS colors from inline style attributes and calculates relative luminance using the WCAG contrast ratio formula (4.5:1 for normal text, 3:1 for large text).
HTML fragment support: the parser does not require a full document — paste a React component, an email template, or a design system snippet and the checker handles it gracefully.
Per-issue code fix suggestions: wherever a mechanical fix is known, the tool generates a corrected HTML snippet so you can apply the change immediately without researching the spec.
Severity and category filters: instantly surface the highest-priority issues or focus a specific category such as form labeling or ARIA roles without losing the rest of the report.
No new dependencies: built entirely on a custom lightweight rule engine using the project's existing packages. Zero bundle-size overhead from axe-core or JSDOM.
Copy as Markdown report: renders the full issue list in structured Markdown for pasting into GitHub Issues, Notion docs, Jira tickets, or accessibility audit templates.
Browser-only processing: HTML never leaves your machine. The tool performs all analysis in client-side JavaScript, making it safe for proprietary codebases and pre-release designs.
AI-enhanced explanations: click Explain with AI on any issue to get a detailed explanation of who is affected (screen reader users, keyboard-only users, low-vision users) and additional context on the WCAG criterion.
Keyboard shortcuts: run the check with ⌘↵, clear the input with ⌘⇧K, and copy the report with ⌘⇧C without leaving the keyboard.

Frequently Asked Questions

What WCAG version does this checker cover?: The tool covers rules drawn from WCAG 2.0, 2.1, and 2.2 at levels A, AA, and AAA. The 40+ rules address the most commonly encountered real-world accessibility failures across the major success criteria, including 1.1.1 (non-text content), 1.3.1 (info and relationships), 1.4.3 (color contrast), 2.1.1 (keyboard), 2.4.4 (link purpose), 3.1.1 (language), and 4.1.2 (name, role, value).
Is this tool a replacement for axe DevTools or Lighthouse?: No — it complements them. This tool is optimized for static HTML analysis: paste code and get instant results during development, code review, or design handoff. axe DevTools and Lighthouse run against a live, rendered page and can catch dynamic issues like focus management, live region announcements, and CSS-driven color combinations that static analysis cannot detect. Use both for thorough coverage.
Why does color contrast only check inline styles?: Color contrast requires knowing the final computed color and background-color of each element, which is only determined after external CSS and inheritance rules are applied. Because this tool analyzes an HTML string without a live DOM or CSS engine, it can only inspect colors declared directly in inline style attributes. For full contrast coverage, use your browser's DevTools accessibility panel or a dedicated contrast checking tool against your live site.
What does WCAG Level A, AA, and AAA mean?: WCAG has three conformance levels. Level A covers the most fundamental barriers — issues that make content completely inaccessible to some users. Level AA covers the standard expected for most public-facing websites and is the baseline required by laws such as the EU Web Accessibility Directive and US Section 508. Level AAA is the highest level and covers additional enhancements; meeting it fully is not required for all content types but is recommended where possible.
My HTML is a component snippet, not a full page — will it still work?: Yes. The checker handles HTML fragments gracefully. Rules that apply only to full documents (such as the <html lang> check, missing <title>, and page-level landmarks) are only reported when a root <html> or <body> element is detected. Fragment-specific rules such as missing alt text, unlabeled inputs, and invalid ARIA roles apply regardless of document completeness.
What does a critical vs serious issue mean?: Critical issues are complete barriers — for example, an image with no alt attribute leaves screen reader users with no information about that content. Serious issues are significant obstacles that degrade the experience substantially, such as a form input with no label. Moderate issues reduce usability for some users but do not completely block access. Minor issues are best-practice improvements. Fixing critical and serious issues first will have the greatest accessibility impact.
Is my HTML sent to a server?: No. All 40+ accessibility rules run entirely in your browser using client-side JavaScript. Your HTML is never transmitted to DevFlow servers for analysis. The optional AI explanation feature sends only the specific issue context and element snippet to the AI provider, not your entire HTML document, and no data is logged or stored.
How is the accessibility score calculated?: The score starts at 100 and deductions are applied per issue based on severity: critical issues deduct 10 points each, serious deduct 5, moderate deduct 2, and minor deduct 1. Each severity tier has a maximum contribution cap so that a page with many minor issues is not penalized as heavily as a page with a few critical failures. The final score is floored at 0. A score of 80 or above is considered good; 50–79 needs work; below 50 indicates significant accessibility barriers.
Can I use the API to check accessibility programmatically?: Yes. POST your HTML to /api/tools/a11y-checker with an optional wcagLevel (A, AA, or AAA) and an optional categories array to filter which rule groups to run. The API returns the full structured result including issues, the score object, and a summary string. This makes it suitable for CI/CD pipelines, design system validation scripts, or automated accessibility regression testing.
What does the skip navigation link check do?: The skip link check looks for a 'Skip to main content' or similar anchor as the first focusable element on a full page. Skip links allow keyboard-only users to bypass repeated navigation blocks (such as a header with many links) and jump directly to the main content. Without one, keyboard users must tab through every navigation item on every page before reaching the content they came for.

Accessibility Checker Online — Free WCAG Compliance Scanner | DevFlow

JavaScript is required to use this interactive tool. Please enable JavaScript in your browser, or use our Accessibility Checker API for programmatic access.

How to Accessibility Checker Online

Paste any HTML — a full page, a component snippet, or a template fragment — into the input panel. The checker works with both complete documents and partial HTML without requiring a doctype or root element.
The tool runs 40+ WCAG rules instantly in your browser and displays an overall accessibility score from 0 to 100, along with separate pass rates for WCAG Level A, Level AA, and Level AAA criteria.
Choose the WCAG conformance level you are targeting using the A / AA / AAA toggle. Level AA is the legal minimum for most jurisdictions, including the EU Web Accessibility Directive and the US Section 508 standard.
Review the score card to see how many issues are critical, serious, moderate, or minor, and how many elements and rules were evaluated. A score of 80 or above is considered good; below 50 indicates significant barriers.
Use the severity filter buttons to focus on critical and serious issues first. These map to WCAG failure conditions that completely block access for screen reader users, keyboard-only users, or users with low vision.
Expand any issue card to see the exact HTML element that triggered the rule, a plain-English explanation of the problem, and a suggested fix with a corrected code snippet wherever one can be generated.
Filter by category (images, forms, headings, ARIA, color, keyboard, links, landmarks, tables, multimedia, language, structure) to audit a specific aspect of your HTML in isolation.
Copy the report as a Markdown document for embedding in pull request descriptions, accessibility audits, or issue trackers. Use the JSON copy format for structured processing or API pipeline integration.

Accessibility Checker Features

40+ WCAG 2.2 rules across 12 accessibility categories: images, forms, headings, ARIA, color contrast, keyboard navigation, links, landmarks, tables, multimedia, language, and document structure.
Weighted accessibility score (0–100): critical issues deduct the most points, capped per severity tier so that a single very-bad rule cannot dominate the entire score.
WCAG Level A / AA / AAA breakdowns: separate compliance pass-rates help you understand which conformance tier your HTML meets and how much work remains to reach the next level.
Inline color contrast analysis: parses hex, rgb(), hsl(), and named CSS colors from inline style attributes and calculates relative luminance using the WCAG contrast ratio formula (4.5:1 for normal text, 3:1 for large text).
HTML fragment support: the parser does not require a full document — paste a React component, an email template, or a design system snippet and the checker handles it gracefully.
Per-issue code fix suggestions: wherever a mechanical fix is known, the tool generates a corrected HTML snippet so you can apply the change immediately without researching the spec.
Severity and category filters: instantly surface the highest-priority issues or focus a specific category such as form labeling or ARIA roles without losing the rest of the report.
No new dependencies: built entirely on a custom lightweight rule engine using the project's existing packages. Zero bundle-size overhead from axe-core or JSDOM.
Copy as Markdown report: renders the full issue list in structured Markdown for pasting into GitHub Issues, Notion docs, Jira tickets, or accessibility audit templates.
Browser-only processing: HTML never leaves your machine. The tool performs all analysis in client-side JavaScript, making it safe for proprietary codebases and pre-release designs.
AI-enhanced explanations: click Explain with AI on any issue to get a detailed explanation of who is affected (screen reader users, keyboard-only users, low-vision users) and additional context on the WCAG criterion.
Keyboard shortcuts: run the check with ⌘↵, clear the input with ⌘⇧K, and copy the report with ⌘⇧C without leaving the keyboard.

Frequently Asked Questions

What WCAG version does this checker cover?: The tool covers rules drawn from WCAG 2.0, 2.1, and 2.2 at levels A, AA, and AAA. The 40+ rules address the most commonly encountered real-world accessibility failures across the major success criteria, including 1.1.1 (non-text content), 1.3.1 (info and relationships), 1.4.3 (color contrast), 2.1.1 (keyboard), 2.4.4 (link purpose), 3.1.1 (language), and 4.1.2 (name, role, value).
Is this tool a replacement for axe DevTools or Lighthouse?: No — it complements them. This tool is optimized for static HTML analysis: paste code and get instant results during development, code review, or design handoff. axe DevTools and Lighthouse run against a live, rendered page and can catch dynamic issues like focus management, live region announcements, and CSS-driven color combinations that static analysis cannot detect. Use both for thorough coverage.
Why does color contrast only check inline styles?: Color contrast requires knowing the final computed color and background-color of each element, which is only determined after external CSS and inheritance rules are applied. Because this tool analyzes an HTML string without a live DOM or CSS engine, it can only inspect colors declared directly in inline style attributes. For full contrast coverage, use your browser's DevTools accessibility panel or a dedicated contrast checking tool against your live site.
What does WCAG Level A, AA, and AAA mean?: WCAG has three conformance levels. Level A covers the most fundamental barriers — issues that make content completely inaccessible to some users. Level AA covers the standard expected for most public-facing websites and is the baseline required by laws such as the EU Web Accessibility Directive and US Section 508. Level AAA is the highest level and covers additional enhancements; meeting it fully is not required for all content types but is recommended where possible.
My HTML is a component snippet, not a full page — will it still work?: Yes. The checker handles HTML fragments gracefully. Rules that apply only to full documents (such as the <html lang> check, missing <title>, and page-level landmarks) are only reported when a root <html> or <body> element is detected. Fragment-specific rules such as missing alt text, unlabeled inputs, and invalid ARIA roles apply regardless of document completeness.
What does a critical vs serious issue mean?: Critical issues are complete barriers — for example, an image with no alt attribute leaves screen reader users with no information about that content. Serious issues are significant obstacles that degrade the experience substantially, such as a form input with no label. Moderate issues reduce usability for some users but do not completely block access. Minor issues are best-practice improvements. Fixing critical and serious issues first will have the greatest accessibility impact.
Is my HTML sent to a server?: No. All 40+ accessibility rules run entirely in your browser using client-side JavaScript. Your HTML is never transmitted to DevFlow servers for analysis. The optional AI explanation feature sends only the specific issue context and element snippet to the AI provider, not your entire HTML document, and no data is logged or stored.
How is the accessibility score calculated?: The score starts at 100 and deductions are applied per issue based on severity: critical issues deduct 10 points each, serious deduct 5, moderate deduct 2, and minor deduct 1. Each severity tier has a maximum contribution cap so that a page with many minor issues is not penalized as heavily as a page with a few critical failures. The final score is floored at 0. A score of 80 or above is considered good; 50–79 needs work; below 50 indicates significant accessibility barriers.
Can I use the API to check accessibility programmatically?: Yes. POST your HTML to /api/tools/a11y-checker with an optional wcagLevel (A, AA, or AAA) and an optional categories array to filter which rule groups to run. The API returns the full structured result including issues, the score object, and a summary string. This makes it suitable for CI/CD pipelines, design system validation scripts, or automated accessibility regression testing.
What does the skip navigation link check do?: The skip link check looks for a 'Skip to main content' or similar anchor as the first focusable element on a full page. Skip links allow keyboard-only users to bypass repeated navigation blocks (such as a header with many links) and jump directly to the main content. Without one, keyboard users must tab through every navigation item on every page before reaching the content they came for.

Accessibility Checker Online — Free WCAG Compliance Scanner | DevFlow

How to Accessibility Checker Online

Accessibility Checker Features

Frequently Asked Questions

Related Developer Tools

Accessibility Checker Online — Free WCAG Compliance Scanner | DevFlow

How to Accessibility Checker Online

Accessibility Checker Features

Frequently Asked Questions

Related Developer Tools