Skip to content
All work

02 / Case study

KonformWCAG audit platform

Desktop web · Enterprise SaaS · AI triage

  • WCAG 2.1 AA
  • Design system
  • Enterprise UX
Konform report export screen shown on a monitor against a blue background: 847 violations closed, compose-report panel and the accessibility statement preview.

Accessibility scanners report symptoms page by page. Konform reports causes - and turns a 3,187-row backlog into 142 decisions. One row is one fix: every contrast failure traced to the same ghost button is a single change, not ninety-four. What used to be a sprint of spreadsheet work is now an afternoon of triage.

Self-initiated concept project · 2026

Role
Product designer - research, IA, UI, design system
Scope
8 screens, 1 design system, 214 tokens
Platform
Desktop web (1440px)
Timeframe
6 weeks
Tools
Figma, Claude Design, axe DevTools, Maze
Standard
WCAG 2.1 AA / EN 301 549

02 / THE PROBLEM

THE LIST ISN'T THE PROBLEM.THE UNIT IS.

Since June 2025 the European Accessibility Act has been enforceable in Germany as the BFSG. Fines reach €100,000. Since late 2025, formal warnings have been rising.

Finding violations is solved - axe, WAVE and Lighthouse are free. A scan of a 240-page site returns 3,187 of them.

Every tool on the market lists those violations by page: /checkout has 47, /product/1042 has 45, and so on for 240 rows. For a content site that works. For a React product it doesn't - nobody fixes a page. They fix a component.

Teardown of 5 platforms - Siteimprove, Level Access, axe Monitor, Silktide, Pope Tech - confirmed it: all five organise remediation around URLs. So the deduplication happens in someone's head, in a spreadsheet, at the start of every sprint.

03 / THE UNIT

ONE ROW IS NOT ONE ERROR.IT'S ONE FIX.

Konform groups violations by their source component. 847 contrast failures across 94 pages become one row: Button/ghost. Fix it once, close all 847.

The inbox is sorted by impact - how many violations one fix closes - not by severity or by date. 14 components cause 61% of everything found.

3,187 violations → 142 rows. Average 22 violations closed per fix.

A second view, the component registry, holds all 214 components on the site - passing, failing and untested - with their owner and their reach. It answers the question the inbox can't: which team carries the risk, and what has already been made safe.

Konform issue inbox: 142 components listed with their WCAG criterion, severity, violation count, affected pages and owning team, sorted by impact.
Issue inbox - grouped by component
Component registry table listing all 214 components with category, page usage, WCAG criteria, violation count, owner and status, above summary tiles for total, passing, failing and unowned components.
Component registry - all 214 components

A "by page" toggle stayed in the design. Auditors and legal teams still think in URLs, and a tool that refuses their mental model doesn't get adopted.

04 / AI

THE USEFUL PART OF AIIS WHERE IT STOPS.

Automated checks cover roughly a quarter of WCAG 2.1 AA criteria. A machine can measure a contrast ratio. It cannot judge whether alt text is meaningful or whether reading order makes sense.

So the AI layer does two things, and the second one matters more.

It proposes a fix - a code diff, with a confidence value and the signals it used, both visible before you accept anything.

And it refuses. Criteria it cannot judge are routed to manual review with the reason stated: "2 of 4 criteria on this component can't be judged automatically - alt text quality and meaningful sequence."

Every AI surface carries the same three markers: the gradient, the label, and a confidence value written as text. The gradient alone never signals provenance - that would fail the product's own accessibility rules.

Component detail panel for Button/ghost: the 1.4.3 contrast failure with before and after swatches, an AI suggested code diff at 96% confidence with accept, edit and dismiss actions, and a needs-human-review notice for two criteria.
Component detail - AI suggestion and manual review

A tool that claims to fix everything is a tool nobody trusts with a legal deadline.

05 / CONSEQUENCE

SHOW THE CONSEQUENCEBEFORE THE CONFIRMATION.

Assigning a fix is a small action with a large effect. One row routed to one team closes 847 violations on 94 pages - or blocks them for three weeks if the due date is wrong.

So the modal states the effect twice. A strip at the top holds the numbers - component, violations closed, pages, severity. A line above the buttons repeats it in plain language: "Closing this fix will resolve 847 violations on 94 pages."

The due date field carries the deadline next to it - "47 days to the EAA deadline" - because the number that matters isn't the date, it's the distance to the date.

The AI hint here is one line, not a panel. It suggests an owner and a date based on who owns the neighbouring components, and it can be dismissed without touching the form.

Assign fix modal with a summary strip stating component, 847 violations closed, 94 pages and critical severity, followed by team, owner, priority, due date with days to the EAA deadline, labels, issue tracker link and a plain-language confirmation line.
Assign fix

06 / TWO USERS

SAME DATA.TWO DIFFERENT PRODUCTS.

An accessibility lead and a frontend developer need opposite things from the same scan.

The lead needs the shape of the problem: compliance score, violations by severity, what moved this month, days to the deadline, and the components to fix first. Wide layout, three columns, everything comparable at a glance.

Compliance dashboard showing compliance score, open violations by severity, root components and days to the EAA deadline, a six-week trend chart, an activity feed and a ranked fix-these-first table.
Compliance dashboard - the lead's view

The developer needs one task and no distractions. Collapsed sidebar. Three panes: the files involved, the code diff at line 42, and a live preview of the page with the offending element outlined. Contrast before and after, printed as numbers. Three verification checks, one of which openly says "needs human review".

Developer fix view with a collapsed icon rail, the affected files list, the Button.tsx diff at line 42 changing the text token, and a live checkout preview with contrast, target size and verification results.
Developer fix view

Role-based access isn't a permissions table - it's two different products sharing one data model.

07 / PROOF

A FIX ISN'T DONEUNTIL IT'S PROVABLE.

Under the BFSG, an accessibility statement is an obligation in its own right - separate from the fixes themselves. Missing or weak statements are one of the most common grounds for a formal warning.

So the last screen turns scan data into a document. Section toggles on the left, live document preview on the right. Report type switches between accessibility statement, audit evidence pack, VPAT/ACR and progress report - four audiences, one dataset.

Two things make it defensible.

Every figure is traceable. The document is signed with the scan it came from - scan #184 - and each number links back to its source.

The method is printed inside the document. A block states how the 96% is calculated: passed criteria ÷ automatically testable criteria (39 of 50), with the scope and crawl date. A statement that hides its formula is the one that gets challenged.

Above it, the re-scan result: 847 closed, 12 still open, 3 regressions. Regressions are shown, not hidden - a fix that came back is the thing an auditor asks about first.

Report export screen: a re-scan summary of 847 closed, 12 open and 3 regressions, section toggles for composing the report, and a live preview of the accessibility statement signed with scan #184.
Verification and report export

08 / THE SYSTEM

A TOOL ABOUT ACCESSIBILITYGETS AUDITED FIRST.

The design system came before the screens. 214 tokens, 38 components, light and dark on the same semantic layer.

Four rules held across every screen.

  • Nothing is carried by colour alone. Severity, status and AI provenance each combine an icon, a text label and a colour. Every severity colour clears 4.5:1 against its surface - which meant darkening the standard warning orange and green until they did.
  • Focus is designed, not inherited. A 2px ring at 2px offset, rendered as an explicit state in the system rather than left to the browser.
  • Density is a token, not a decision. Table rows come in three heights - 36 / 44 / 52px - because a 142-row inbox and an 8-row summary are not the same table.
  • Numbers are tabular everywhere they're compared.
  • axe DevTools0 violations
  • Body contrast4.7:1
  • Keyboard4 flows passed
  • Targets44×44 minimum
Colour tokens in light and dark theme with semantic severity pairs of colour, icon and text label.
Colour tokens - light and dark
AI tokens: the AI gradient, accent and border, with the rule that AI output always carries a label, icon and confidence value.
AI tokens - provenance
Type scale from 30px page titles down to 11px labels, with Inter and JetBrains Mono families and tabular figures.
Typography - Inter and JetBrains Mono
Spacing scale on a 4px base grid, four radius values and two elevation levels for cards and overlays.
Spacing, radius, elevation
Layout shell at 1440px: 64px icon rail, 64px top bar, tab bar and a three-column content area of list, detail and context panel.
Layout shell - rail, top bar, three columns
Sidebar navigation in three layouts: expanded at 280px, collapsed 72px icon rail with tooltip and flyout, and a third nesting level with focus and disabled states.
Navigation - expanded, collapsed, nested
Button matrix: five variants across default, hover, focus-visible, active, disabled and loading states at 44px minimum height.
Buttons - 5 variants, 6 states
Form controls: text inputs in default, filled, focus, disabled and error states, select, pill search, checkbox, radio and toggle.
Form controls
Severity badges, status pills and owner chips, each pairing an icon, a text label and a colour.
Badges, status pills, owner chips
Data table at three row densities with selection, sorting, truncation tooltip and a bulk action bar.
Data table - 36 / 44 / 52px rows
Filter bar with applied filter chips and clear all, above the bulk action bar that appears on selection.
Filter bar and bulk actions
List column item states beside the detail panel with metadata, offending markup and routing actions.
List item and detail panel
AI suggestion block with confidence ring, model provenance and accept or edit actions, next to an AI limitation card and a suggested actions checklist.
AI blocks - suggestion, limitation, checklist
Inline banners, empty, loading and error states, toast, tooltip, dropdown menu and confirmation modal.
Feedback, states and overlays
Compliance score with a labelled stacked bar and progress bars for remediation, verified fixes and scan progress.
Compliance score and progress
Icon set inlined as path data, with fixed role meanings for rail, status, feedback, AI, controls and actions.
Icons - fixed roles
Five non-negotiable rules: focus ring, contrast, target size, never colour alone, and tinted grounds.
Accessibility rules

09 / THE FLOW

CONNECT. TRIAGE.FIX. PROVE.

The full flow, in order.

Connect your site screen with scan-type cards and an Add site dialog holding the site URL, scan depth, schedule and the WCAG 2.1 AA standard.
01 - Connect a site and run the first scan
Compliance dashboard with compliance score, open violations by severity, root components, days to the EAA deadline, a six-week trend chart and a ranked fix-these-first table.
02 - Read the compliance picture
Issue inbox listing 142 components with WCAG criterion, severity, violation count, affected pages and owner, sorted by impact.
03 - Triage the inbox by component
Component detail panel for Button/ghost with the contrast failure, an AI suggested code diff at 96% confidence, and two criteria routed to manual review.
04 - Open a component - what's wrong, the suggested fix, what needs a human
Assign fix modal stating 847 violations closed on 94 pages, with team, owner, priority, due date and days to the EAA deadline.
05 - Assign the fix with its consequence stated
Developer fix view with affected files, the Button.tsx diff at line 42 and a live checkout preview with contrast and verification checks.
06 - Fix it in code, verify it in preview
Report export screen with the re-scan summary, section toggles and a live accessibility statement preview signed with scan #184.
07 - Publish the proof
Component registry table listing all 214 components with category, usage, WCAG criteria, violations, owner and status.
08 - Track the whole component library over time

10 / RESULTS

WHAT CHANGED.

MeasureBefore and afterChange
Triage time14 h → 1 h 50−87%
Backlog items3,187 → 142−96%
Violations per fix1 → 22.4×22
Scan to first assignment3 days → 18 min−99%
Developer time per task40 → 12 min−70%
Statement preparation2 days → 4 min−99%
Conformance, 6 weeks71% → 96%+25 pts

Usability test · 8 participants · unmoderated, against an existing tool

TaskKonformControl
Find the highest-impact fix8/8 · 34 s5/8 · 4 m 12 s
Assign it with a due date7/8 · 51 s6/8 · 2 m 05 s
Assemble evidence for legal6/8 · 1 m 40 s3/8 · 6 m 30 s
SUS84.561.2

The third task failed for three participants - they looked for export under Reports, not on the product card. Moving the entry point fixed it: 8/8 at 58 s on the second run.

11 / LIMITS

WHAT THIS IS,AND WHAT IT ISN'T.

This is a self-initiated concept project, not a shipped product. No customer, no production data, no engineering team to argue with.

What that means in practice:

  • The scan engine is assumed, not designed. Grouping violations by source component depends on mapping DOM nodes back to components - solvable, but a technical problem I haven't solved here.
  • Two roles are covered. Procurement, agencies managing multiple clients, and content editors all have a claim on this product and none of them are designed for.
  • The manual review track is named, not built. It's the half of WCAG that automation can't reach, and it deserves its own case study.
  • Numbers come from the prototype test and the design targets, not from a production deployment.

Next: the manual review queue, and multi-site governance for agencies.

Next case study

  • 03 / Case study

    Onset On-call incident app

    Mobile · DevOps · Offline-first

    Acknowledging an incident has to be one action and never an accident. That contradiction shaped the whole product: readable in the dark, operable with a thumb, honest when the network drops.

    Read case study
    Three Onset status screens on a dark green-lit background: All quiet with a green ring, Needs attention with an amber ring showing 2, and P1 active with a red ring showing 1.
    • Mobile UX
    • AI in the loop
    • Design system