An accessible website: what the rules actually ask for
WCAG 2.1 AA is the bar in Europe and the practical benchmark almost everywhere else. What it means in concrete numbers, how to test it in an afternoon, and the three real defects we found on our own site.
WCAG 2.1 AA is the bar. In Europe it arrives through the European Accessibility Act and its national implementations, in the US through decades of ADA case law, and in public procurement almost everywhere through Section 508 and EN 301 549. Different routes, one destination.
Everyone agrees with accessibility. The trouble is that "make the site accessible" gives nobody something to act on. So here it is in numbers, plus a test you can run this afternoon, plus what we found when we ran it on our own site. Short version: three real defects, and one of them sat in about twenty places.
What WCAG 2.1 AA asks for in practice
Fifty odd criteria, and almost every site trips over the same handful.
1. Contrast. Text at reading size needs at least 4.5 to 1 against its background. Large text, from 24px or 18.7px bold, needs 3 to 1. This is by far the most common failure, because light grey looks calm in a design file and becomes unreadable on a bright screen in daylight.
2. Component boundaries. Criterion 1.4.11 asks for 3 to 1 on anything that makes a control recognisable in the first place. A white input field on a white page is carried entirely by its border. Make that border a whisper of grey and the field is simply not there for a lot of people.
3. Visible keyboard focus. Anyone tabbing through the page must be able to see where they are at all times. outline: none with nothing put back is the classic.
4. Heading outline. Exactly one h1 per page, no skipped level. Screen readers navigate by headings; an outline with a hole is a false statement about how the page is built.
5. Alternative text. Every image that carries meaning needs one. Decoration gets a deliberately empty one so it is not read out.
6. Forms. Every field needs a real label. A placeholder on its own falls short. Error messages have to say what is wrong and must not rely on colour alone.
7. Zoom and reflow. The page has to stay usable at 200 percent zoom and at 320 pixels wide, with no horizontal scrolling.
The thirty minute self test
No tooling, just a browser:
- Press tab, over and over, from the top of the page to the footer. Can you see where you are at every step? Can you reach everything, including the menu and every form field?
- Zoom to 200 percent. Does anything break, overlap or push you sideways?
- Narrow the window to 320 pixels. Same question.
- Measure one text colour. Pull the computed colour from devtools and drop it into a contrast checker. If your body text is under 4.5, you have the answer for the whole site.
- Look at the headings. Run
document.querySelectorAll('h1,h2,h3,h4')in the console and read the levels in order. Exactly one h1? Any jumps? - Turn the screen off and listen with a screen reader. The most honest test and the least comfortable one.
No checker finds everything. Automated tools cover a portion of the criteria; a person has to judge the rest.
What we found on our own site
We took primero.link to WCAG 2.1 AA in August 2026. We sell accessibility, so we owed it to ourselves. Here is what came out, measured.
Defect 1: our secondary text colour sat at 2.6 to 1. A light grey, #98A2AC, used for labels, for roles under client names, for hints under form fields. It appeared in about twenty places. The bar is 4.5. It now measures 5.5. Body text went darker at the same time, from 7.3 to 10.2.
Defect 2: our form fields sat at 1.4 to 1. A soft #D2D9DE on white. The contact form looked tidy and was effectively invisible to anyone with reduced vision. The bar is 3. It now measures 3.1.
Defect 3: the blog index skipped a heading level. The cards were h3 sitting directly under the page h1. Nobody sees that. A screen reader does.
Two more things were not violations but were in the way: green as a text colour sat at 3.7, below the bar for body text, and the small letterspaced caps ran at 10.5 pixels.
All told we measured 33 colour pairs against their actual background and raised 119 type sizes. The brand itself did not move: the blue to green gradient still carries the large headings, where 3 to 1 is enough, and a darkened green took over everywhere green is text.
The lesson: we have been building websites for years and assumed we were fine. The gap between "looks good" and "measurably correct" was three real defects. You do not find them without measuring.
The part that is genuinely hard
Contrast and focus rings are a Tuesday afternoon. The parts that take judgement:
- Alternative text that is actually useful. "Image" is not one. Neither is repeating the caption word for word, because then a screen reader reads the same sentence twice.
- Focus order that matches the visual order. Easy to break with CSS grid and flexbox
order. - Motion. Anything that animates has to respect
prefers-reduced-motion. Scroll driven animations escape the usual switch, because their progress comes from the scroll position and not from a duration. They need their own handling. - Deciding what is decorative. Two empty alternative texts on our site are empty on purpose. Filling them would read the same thing to a screen reader twice.
Why it pays even where it is not required
Roughly one person in ten has an impairment that affects how they use a website. That is customers. On top of that, most of what WCAG asks for makes a site better for everyone: darker text is easier in sunlight, visible focus helps anyone who prefers a keyboard, a clean heading outline helps search engines understand the page.
If you want to know where your site stands, drop us a line. We will look through it and tell you what is required and what is optional.
Legal note
This post reflects the position on 11 August 2026 and is not legal advice. Whether a specific law applies to your offering depends on your jurisdiction and your business.
Sources
How current this post is
Checked against the accessibility law and EN 301 549, the legal position is unchanged. Reworked for language.
Common questions about accessibility
Does an accessibility law apply to my small business site?
In the EU the European Accessibility Act, implemented in Germany as the BFSG, covers services in electronic commerce aimed at consumers: online shops, bookings, banking and similar. A brochure site with no sale and no booking is usually outside it. In the US the ADA has long been read by courts to cover websites of places of public accommodation, and WCAG 2.1 AA is the standard everyone points to. Different route, same destination.
Is there a small business exemption?
Under the German BFSG, micro enterprises are exempt from the service requirements when they have fewer than ten employees and no more than 2 million euros in annual turnover or balance sheet total. Both conditions have to hold. The exemption does not cover products. US law has no comparable general size exemption for the ADA.
What does WCAG 2.1 AA require in numbers?
Text at reading size needs a contrast ratio of at least 4.5 to 1 against its background. Large text, meaning 24px or 18.7px bold and above, needs 3 to 1. The same 3 to 1 applies to the boundary of a user interface component where that boundary is what makes it recognisable. Add visible keyboard focus, alternative text, real form labels and a heading outline with no skipped level.
Do automated checkers find everything?
No. Automated tools catch a portion of the criteria, and the studies that measure this put it well under half. Contrast, missing alternative text and some structural issues are machine detectable. Whether an alternative text is any good, whether the focus order makes sense, whether an error message explains the error: only a person can judge that.
Where do I start if the site is old?
Contrast first, because it is the most common failure and the cheapest fix. Then keyboard focus, then form labels, then the heading outline. Those four cover the majority of what a real user will hit, and none of them need a redesign.