Accessibility Checker
Test your brand colours and your typefaces against the rules that apply to websites in the European Union. Every result tells you what passes, what fails and exactly how to fix it. When you are done, export a report as a PDF.
Which rules does this check, and do they apply to me?
The European Accessibility Act (Directive 2019/882) has been enforceable since 28 June 2025. It covers private companies selling products and services to EU consumers, including e-commerce, banking, transport, e-books and telecoms. Public sector sites are covered separately by the Web Accessibility Directive (2016/2102).
The technical yardstick for both is the harmonised standard EN 301 549. Version 3.2.1 is the one currently cited in the Official Journal, and it incorporates WCAG 2.1 Level AA. Version 4.1.1 moves that baseline up to WCAG 2.2 Level AA, with citation expected during late 2026 and national rollout running into 2027.
This tool checks against WCAG 2.2 Level AA, so you satisfy the version in force today and the version coming next. Verify the current citation status before making a formal conformance claim.
- 1.4.1 Use of colour Colour is never the only way information is conveyed. Checked here with colour blindness simulation.
- 1.4.3 Contrast (minimum), AA 4.5:1 for body text, 3:1 for large text.
- 1.4.6 Contrast (enhanced), AAA 7:1 for body text, 4.5:1 for large text.
- 1.4.4 Resize text, AA Readable at 200% zoom with no loss of content.
- 1.4.10 Reflow, AA Usable at 320 CSS pixels wide with no horizontal scrolling.
- 1.4.11 Non-text contrast, AA 3:1 for buttons, form borders, icons, focus rings, charts.
- 1.4.12 Text spacing, AA Nothing breaks when users force line height 1.5, letter spacing 0.12em, word spacing 0.16em, paragraph spacing 2em.
- 1.4.8 Visual presentation, AAA Line length under 80 characters, no justified text, line height at least 1.5.
- 2.4.11 and 2.4.13 Focus appearance Focus indicators must be visible and meet 3:1 against adjacent colours.
- 2.5.8 Target size (minimum), AA Interactive targets at least 24 by 24 CSS pixels.
Automated testing catches roughly a third of accessibility problems. Colour and type are the part machines test well. Keyboard operation, screen reader behaviour, focus order and plain language still need a human.
1 Add your brand colours
Add every colour you use for text, backgrounds, buttons and icons. Give each one a name so the report reads like a brand document rather than a list of hex codes.
2 Read the results
Each row is a background. Each column is the text or element placed on it. The bigger the number, the easier it is to read.
3 Colours that look the same to some people
Around 8% of men and 0.5% of women see colour differently. If two of your colours become nearly identical below, never use them as the only difference between two things, for example a red error state and a green success state.
4 Fix the failing pairs
Each suggestion keeps your hue and adjusts lightness until it passes, so it still looks like your brand. Click a suggestion to add it to your palette.
| Background | Current text colour | Smallest change that passes AA | Passes AAA | Maximum contrast | Softer neutral |
|---|
1 Choose the typeface you are testing
Pick a Google Font or upload the font file you actually use on the site. The analysis reads the real glyph shapes, so an uploaded file gives the most accurate answer.
2 How legible is this typeface
Legibility is mostly decided by two things: how tall the lowercase letters are relative to the capitals, and whether letters that should look different actually do.
3 Set your sizes
Start from the body size and pick how much bigger each heading gets. Compact suits dense interfaces, generous suits editorial pages. Anything below 16px for body text will be hard work for a lot of people.
| Level | Desktop | Mobile | Line height | Letter spacing | Max line length | Contrast needed | Verdict |
|---|
4 See it under stress
These three switches reproduce what real users do. If the preview stays readable and nothing overlaps or gets cut off, you pass 1.4.4, 1.4.10 and 1.4.12.
Design that nobody has to squint at
A second level heading, set in the same family
Readable type is not a style choice. It decides whether a person with low vision, a person reading on a phone in daylight, or a person who is simply tired can use what you made. The safe floor is 16 pixels of body text, a line height of at least 1.5, and lines that stop before 80 characters.
A third level heading
Numbers and capitals share the same shapes in some typefaces. Compare Illinois, l1I0O and rn versus m at your real body size before you commit to a family.
Small print, captions and legal text still have to be legible.
1 Name the audit
2 Summary
3 Export
The PDF carries the full palette, every contrast pair, the failing pairs with their fixes, the colour vision findings and the complete type specification.