We’ve gotten comfortable with AI-generated interfaces.
We use them regularly.
The efficiency gains are undeniable.
But there’s something we’re not addressing: these systems are systematically excluding millions of users.
How?
The interfaces rolling out of our AI are failing basic accessibility standards at an alarming rate.
And it’s a problem. A big one.
AI produces interfaces that look stunning to the average user while remaining completely inaccessible to those who need accommodation.
We’re automating exclusion at scale, and most designers don’t even realise it’s happening.
đź“Ś What’s Inside
- Why AI training data creates systematic accessibility gaps
- The most common accessibility failures in AI-generated UI
- How to audit and fix AI-generated interfaces
🔍 Why AI training data creates systematic accessibility gaps
Most AI design tools are trained on existing web interfaces.
The same interfaces that accessibility experts have been criticising for decades.
A 2024 study by WebAIM found that 95.9% of home pages had detectable WCAG 2 failures
When AI systems learn from this data, they perpetuate systemic exclusion.
Think about it: if you train a model on millions of websites where 12px grey text on white backgrounds is the norm, that’s exactly what it will generate. The AI doesn’t understand that this combination fails WCAG contrast requirements. It simply learned that “this is how text looks.”
“[…] it is important to consider the potential biases present in the data used to train these algorithms, as they may perpetuate existing inequalities and exclusion.”
The issue runs deeper than individual elements.
AI optimises for visual appeal and conventional aesthetics, which often conflict with accessibility principles.
A button that looks “clean” and “minimal” to a sighted user might be completely invisible to someone using assistive technology.
We ought to make sure we’re not scaling inaccessibility through AI. Every AI-generated interface that ships without accessibility review can multiply the barriers we’ve spent decades trying to remove.
⚠️ The most common accessibility failures in AI-generated UI
After auditing dozens of AI-generated interfaces across different tools and platforms, patterns emerge. They’re systematic blind spots baked into how these systems operate. For instance:
Typography that excludes
Font sizes produced by AI are often way too small: it consistently generates text at 12-14px, well below the recommended 16px minimum for body text. Elderly, people with dyslexia, visual impairments, and reading disorders all benefit from larger text sizes.
Poor line height and spacing
Machine-generated layouts often compress text with line heights of 1.2 or less, making it difficult to track lines of text. WCAG guidelines recommend at least 1.5x line height for paragraph text.
Insufficient text spacing
AI frequently generates designs where clickable text elements are packed tightly together, making them difficult to distinguish and accurately target.
Colour contrast disasters
This is where AI fails most consistently. Colour combinations that look sophisticated, such as think light grey text on slightly darker grey backgrounds, regularly fail WCAG AA contrast requirements.
WebAIM’s 2024 Million report found low-contrast text on 81% of homepages.
The most common failures were:
- Light grey text (#666666) on white backgrounds (2.54:1 ratio, needs 4.5:1).
- Blue links (#007bff) on dark backgrounds (2.1:1 ratio)
- Error states using red text that becomes invisible to colourblind users
Interactive element confusion
AI struggles with interactive affordances.
It generates buttons that look like decorations, links that resemble static text, and form controls that provide no visual feedback.
Missing focus indicators
AI rarely generates visible focus styles, making keyboard navigation impossible.
Inadequate touch targets
On mobile interfaces, AI consistently generates tap targets smaller than the recommended 44px minimum.
Ambiguous interactive states
Hover effects, if present at all, are often too subtle to provide meaningful feedback.
đź› How to audit and fix AI-generated interfaces
The good news is that these problems are detectable and fixable. But it requires intentional process changes. So…
Automated testing first
A good starting point is running tools like axe-core, WAVE, or Lighthouse accessibility audits on every AI-generated interface before any human review. These catch the most obvious failures: contrast ratios, missing alt text, improper heading structure.
But automated testing only catches about 30% of accessibility issues. The rest require human evaluation.
Manual evaluation
One of the most effective ways to evaluate interface accessibility is tabbing through the entire interface. This reveals whether every interactive element is reachable, focus indicators are visible, and the tab order follows logical sense.
It’s also worth trying VoiceOver (Mac), NVDA (Windows), or ORCA (Linux) to navigate the interface and determine whether content makes sense aurally (screen reader testing) and relationships between elements are clear.
Colour and contrast validation
Perhaps the most straightforward approach is using tools like Colour Contrast Analyser or Stark to verify that all text meets minimum contrast requirements.
But don’t forget about testing with disabled users.
This is often skipped, but it’s where the most valuable feedback emerges. People who use assistive technology daily can identify usability problems that no AI can catch.
Great news is that some AI companies are beginning to incorporate accessibility requirements into their training data. Adobe’s research team announced they’re developing models trained specifically on WCAG-compliant interfaces.
But we can’t wait for perfect AI. We need process changes now.
We need to build accessibility into our AI-assisted workflows.
The most successful teams use AI for initial layout generation, then apply accessibility overlays on top of it. So the process looks as follows:
- Generate the basic structure with AI
- Audit using automated accessibility tools
- Refine typography, contrast, and spacing to meet guidelines
- Test with users, including those who use assistive technology
This is perhaps the best way forward: use AI to accelerate initial workflows and rapidly generate concepts, while relying on human judgment to refine outputs through logic, accessibility, and critical thinking before final delivery.
One additional approach worth considering when working with AI is being explicit about accessibility requirements, right there in prompts, which can significantly improve initial outputs. For instance:
“Generate a sign-up form with 16px minimum text size, 4.5:1 contrast ratios, proper semantic markup, and 44px minimum touch targets.”
The more specific your accessibility requirements, the better the output.
The accessibility failures in AI-generated UI are often the result of training systems on inaccessible data and optimising for the wrong metrics.
We can fix this, but it requires intentional effort.
Every interface that ships without accessibility consideration makes the web a little less inclusive.
The question isn’t whether AI will reshape interface design. It already has.
The question is whether we’ll use this powerful technology to build a more accessible web or to scale the barriers that already exist.
The choice is ours. But we need to make it now, while we still have the chance to shape how these tools evolve.
Because at the end of the day, great design isn’t just about how something looks. It’s about how well it works for everyone who needs to use it.
Subscribe on Substack⬇️
You might also like:
đź“š Sources & Further Reading
- The WebAIM Million by 2025 WebAIM
- Digital accessibility in the era of artificial intelligence—Bibliometric analysis and systematic review by National Library of Medicine
Share this article:
