Web design & AI
WCAG Compliance: A Step-by-Step Guide to Web Accessibility
The 4 principles, the A, AA and AAA levels, what the ADA really says (and the deadlines that just moved), an 8-step checklist and the Chrome test we ran on our own site.
WCAG compliance means your website meets the Web Content Accessibility Guidelines, the W3C standard for making sites usable by people with disabilities, usually at Level AA. In the US, no federal rule sets a WCAG level for private businesses, but the ADA still applies to businesses open to the public and courts use WCAG as the yardstick.
We read the official ADA guidance, the W3C documentation and what ChatGPT, Perplexity and Gemini tell a small business owner. Google's own AI answer still showed the old ADA Title II deadlines, which moved in April 2026. We also ran our own test in Chrome on a site that scores 100 for accessibility in Lighthouse.
Here is what WCAG compliance means, when the law requires it, an 8-step WCAG compliance checklist with free tools and what we found when we tested Notablia.
On this page
What is WCAG compliance?
WCAG compliance is meeting every success criterion of the Web Content Accessibility Guidelines at a chosen level, usually AA.
WCAG (Web Content Accessibility Guidelines) is a W3C standard with testable success criteria that make websites usable by people with visual, hearing, motor or cognitive disabilities. Each criterion has a level, A, AA or AAA, and compliance means passing all criteria up to your target level, usually AA.
What it is not: it is not a law, though laws reference it. It is not a plugin you install in five minutes. And it is not only for blind users. Web accessibility is part of good web design, just like speed and clarity.
What changed in WCAG 2.2?
WCAG 2.2, published on October 5, 2023, keeps everything in 2.1 and adds 9 new success criteria. According to the W3C summary of what's new in WCAG 2.2, they include a minimum target size of 24 by 24 CSS pixels, focus that is not hidden and authentication without puzzles. It also drops criterion 4.1.1, now obsolete.
The 4 WCAG principles and the A, AA and AAA levels
WCAG is built on 4 principles: your site must be perceivable, operable, understandable and robust.
| Principle | What it means | Example on a small business site |
|---|---|---|
| Perceivable | Everything can be seen, heard or read another way | Alt text on product photos and captions on videos |
| Operable | Everything works without a mouse | Menu and cart work with the keyboard alone |
| Understandable | It reads clearly and behaves as expected | Form errors say what is wrong and how to fix it |
| Robust | It works with screen readers and other tools | Real buttons in the HTML, not clickable images |
WCAG AAA vs AA: do you need AAA?
No. WCAG AA is the target laws and contracts ask for. AAA adds stricter criteria, such as 7:1 contrast and sign language for video, that rarely work across a whole site. Use AAA selectively where it makes sense.
ADA website compliance: what the law requires in the US
ADA website compliance is not defined by a federal technical rule for private businesses, but the obligation to be accessible is real.
According to the Department of Justice guidance on web accessibility and the ADA, published on March 18, 2022, businesses open to the public must make the goods and services they offer online accessible. The DOJ has no regulation with detailed standards for them and points to WCAG and the Section 508 Standards as helpful guidance.
| Who | Rule | What it asks |
|---|---|---|
| Businesses open to the public | ADA Title III | Accessible websites; no fixed standard, WCAG used in practice |
| State and local governments, 50,000+ people | ADA Title II web rule | WCAG 2.1 AA by April 26, 2027 |
| Smaller governments and special districts | ADA Title II web rule | WCAG 2.1 AA by April 26, 2028 |
The Title II dates come from an interim final rule of April 20, 2026 that extended the original deadlines. If you sell to EU consumers, the European Accessibility Act also applies. This guide is not legal advice: for a specific risk, talk to an attorney.
VPAT and ACR: What They Are and When You Need One
A VPAT, short for Voluntary Product Accessibility Template, is a blank form. An ACR, or Accessibility Conformance Report, is that form filled in for your product. The Information Technology Industry Council (ITI) maintains the template and offers it free of charge; the current version is VPAT 2.5Rev, from April 2025. Buyers use an ACR to compare vendors on accessibility.
Who asks for one? Schools, universities, state agencies and large companies with procurement teams. If you sell software or a web service to them, expect the request in the RFP or the security questionnaire. A shop that sells straight to consumers rarely needs one.
Pick the edition the buyer names: 508 for US federal rules, EU for EN 301 549, WCAG for the guidelines, or INT, which combines all three. If nobody names one, start with the WCAG edition.
For each criterion you answer Supports, Partially Supports, Does Not Support or Not Applicable. Be honest: a "Partially Supports" with a note and a fix date builds more trust than a column of "Supports" that an audit later contradicts. You cannot fill an ACR from a Lighthouse score. The usual basis is an accessibility audit by a specialist who tests each criterion. And as our FAQ on certification explains, an ACR is a self-declaration, not a certificate.
WCAG compliance checklist: 8 steps with free tools
A practical WCAG compliance checklist combines an automated scan with manual tests on the pages that matter most.
-
Pick your key pages
Home page, one product or service page, the cart or contact form and checkout. That is where a barrier costs you sales.
-
Run an automated scan
Open Chrome, press F12, go to the Lighthouse tab and run it with the Accessibility category checked. Add the WAVE extension. Write down the errors, but do not stop there.
-
Navigate with the keyboard only
Tab to move forward, Shift and Tab to go back, Enter to press. You must always see where you are (the focus) and reach everything, including the menu and cart.
-
Check your color contrast
Normal text needs at least 4.5:1; large text and icons, 3:1. If your brand color falls short, create a darker version for text only.
-
Add alt text to informative images
Product photos, charts and functional icons. Decorative images get an empty alt. Our guide to alt text covers the method.
-
Label forms and error messages
Every field gets a visible label and every error a message that says what is wrong. A red border alone is not enough.
-
Test target size, zoom and mobile
Buttons at least 24 by 24 pixels or well spaced, and the site usable at 200% zoom and on a 320-pixel-wide screen.
-
Publish an accessibility statement
What you meet, what you do not yet, when you last reviewed it and an email to report barriers. Review it every 6 months or with each redesign.
If your site runs on a content management system, check the theme too: many issues come from the template, not your copy. See what is a CMS and how to choose one. And if you are starting fresh, require accessibility from day one, even when you build a website with AI.
Act as an accessibility auditor. Here is the HTML for one section of my site: [paste the HTML]. Review it against WCAG 2.2 Level AA and give me a table with the failing criterion, why it fails, how to fix it and the corrected code. Do not invent problems: if something cannot be checked from the HTML alone, say so.
Write an accessibility statement for my site [URL] in plain English. Include the level we aim for (WCAG 2.2 AA), the parts that do not meet it yet [list], the date of the last review, how people can report a barrier and how fast we respond.
WCAG Compliance Checker: Free Tools and What They Miss
A WCAG compliance checker is an automated scanner, and it is the fastest way to catch the easy errors. It is also where most people stop too early. In a 2021 study of more than 13,000 pages, Deque, the company behind the axe engine, found that its automated tools caught 57% of accessibility issues by volume. That is Deque's own figure and its own metric, so treat it as a ceiling. The rest needs a person.
| Tool | Where it runs | Good for |
|---|---|---|
| Lighthouse | Built into Chrome DevTools | A quick score and a list of failed audits |
| WAVE | Browser extension from WebAIM | Showing the errors on the page itself |
| axe DevTools | Browser extension from Deque | Detailed rules and fix guidance for each issue |
What a scanner cannot judge: whether your alt text says anything useful, whether the focus order makes sense, whether captions are accurate or whether an error message actually helps. Lighthouse itself says so by listing manual checks separately and leaving them out of the score.
Say a scan flags 12 errors on your checkout page. You fix them, rescan and get zero. Then you press Tab and the focus vanishes behind a sticky header. No score warned you. Pair every scan with the keyboard test from step 3 and, if you can, a screen reader.
WCAG compliance testing: what we found on Notablia
Our WCAG compliance testing confirmed the basics but found issues a perfect Lighthouse score does not show.
Do accessibility overlays make you compliant?
No. An accessibility overlay adds buttons to enlarge text or change colors, but it does not fix the code underneath: a button with no name or a form with no labels stays broken. Treat it as an extra at best, never as the fix.
WCAG color contrast: how to check your brand palette
WCAG color contrast is where many brands fail first, so measure each brand color against its background before using it for text.
| Notablia color | On white | OK for normal text? |
|---|---|---|
| Ink #14161C | 18.08:1 | Yes |
| Indigo #3D3AE0 | 7.29:1 | Yes |
| Violet #7C3AED | 5.70:1 | Yes |
| Coral #FF5A36 | 3.10:1 | No: large text or decoration only |
| Text coral #D93A16 | 4.60:1 | Yes, that is why it exists |
We calculated these with the WCAG luminance formula. Do the same for your brand in our color palette generator.
Frequently asked questions about WCAG compliance
What does WCAG stand for?
WCAG stands for Web Content Accessibility Guidelines. They are published by the World Wide Web Consortium (W3C) through its Web Accessibility Initiative, the same body that sets core web standards like HTML and CSS. The guidelines are numbered by version: 2.0 from 2008, 2.1 from 2018 and 2.2 from 2023. Each version builds on the previous one, so meeting 2.2 also covers the older ones.
What are the new WCAG guidelines for 2026?
There is no new WCAG version in 2026: as of October 2026, WCAG 2.2 is still the latest official version, and WCAG 3 is still being developed by the W3C. What did change in 2026 is a deadline. An interim final rule from April 20, 2026 moved the ADA Title II compliance dates for state and local governments to April 26, 2027 and April 26, 2028, depending on population. Private businesses still have no fixed federal deadline.
Is there an official WCAG compliance certification?
No. The W3C writes the guidelines but does not certify websites, so any badge that says a site is officially WCAG certified comes from a private company. What you can get is an audit by an accessibility specialist who tests your site against each success criterion and documents the result. In the US, that documentation is often delivered as an Accessibility Conformance Report based on a VPAT template, which buyers and public agencies frequently request.
Is WCAG a legal requirement?
WCAG itself is not a law, but many laws point to it. In the US, the ADA Title II rule requires WCAG 2.1 AA for state and local governments, and courts commonly use WCAG to judge private business websites under Title III. In the European Union, the European Accessibility Act relies on a standard built on WCAG. Brazil's inclusion law requires accessible company websites under international guidelines. In practice, WCAG 2.1 or 2.2 AA is the safe target almost everywhere.
What is WCAG 2.1 AA?
WCAG 2.1 AA means meeting every Level A and Level AA success criterion in version 2.1 of the guidelines. It is the level named in the ADA Title II rule for state and local governments and the one most often cited in US lawsuits and settlements. It covers things like 4.5:1 text contrast, keyboard access, captions, form labels and content that reflows on small screens. If you build to WCAG 2.2 AA instead, you meet 2.1 AA as well.
What is the European Accessibility Act?
The European Accessibility Act is an EU directive that requires many products and services sold to consumers, including e-commerce, to be accessible. Its requirements apply from June 28, 2025, through each country's national law. It matters to US companies too if they sell online to consumers in the EU. Microenterprises that provide services, defined as fewer than 10 employees and no more than 2 million euros in turnover or balance sheet, are exempt.