conformance
Accessibility
summary
Conformance level
Target
WCAG 2.2 AA
Industry-standard conformance level for public-facing institutional sites.
Color contrast
WCAG 2.2 AAA
Higher than required — 7:1 normal text, 4.5:1 large text, verified across three themes.
Audit run
2026-04-27
282 text/background pairs across 3 themes — 100% pass at both AA and AAA.
tooling
How we verify
The /contrast-audit page renders every contrast-risk surface — typography, color tokens, alerts, badges, buttons, cards, page headers, callouts, code blocks, forms, footers — in three columns simultaneously, one per theme.
npm run audit:contrast spins up headless Chromium via puppeteer, walks every text-containing element in each themed column, computes effective foreground (alpha-composited up the parent chain) and effective background, and applies the WCAG 2.1 / 2.2 contrast formula (same in both spec versions). Results are written to contrast-report.json; the script exits non-zero if any pair drops below threshold. The contrast-audit workflow runs this on every push and PR.
AAA gate is opt-in via AUDIT_LEVEL=AAA. We currently run AAA in CI — a contrast regression that drops a pair below 7:1 fails the build.
automated
Automated coverage
These WCAG success criteria are verified mechanically on every push. A failure here blocks merge.
| Criterion | Level | Status | Detail |
|---|---|---|---|
| 1.4.3 Contrast (Minimum) | AA | pass | 4.5:1 normal text · 3:1 large text Verified by /contrast-audit on every commit (CI gate). |
| 1.4.6 Contrast (Enhanced) | AAA | pass | 7:1 normal text · 4.5:1 large text Same audit pipeline, AAA threshold. CI gates on AAA — a regression fails the build. |
| 1.4.11 Non-text Contrast | AA | manual | 3:1 for UI component boundaries + state indicators Borders, focus rings, and disabled-state indicators reviewed during component design. Not yet covered by automated audit. |
manual
Manual review
These criteria are reviewed during component design and component review, not yet covered by automated audit. The plan is to grow the audit pipeline to cover more of these — keyboard-traversal smoke tests + target-size measurement are the next two on the roadmap.
| Criterion | Level | Status | Detail |
|---|---|---|---|
| 1.3.1 Info and Relationships | A | manual | Components emit semantic HTML — landmarks, headings, lists, ARIA when needed. Native <details>/<summary> for disclosures, native <table> for tabular data. |
| 2.1.1 Keyboard | A | manual | Every interactive primitive is keyboard-operable. Focus rings rendered via :focus-visible. |
| 2.4.7 Focus Visible | AA | manual | All focusable elements show a visible focus ring (--shadow-focus token). |
| 2.4.11 Focus Not Obscured (Minimum) | AA (2.2) | manual | Sticky header is present but z-index ordering keeps focused content visible. Long forms may need scroll-padding tuning per use case. |
| 2.4.12 Focus Not Obscured (Enhanced) | AAA (2.2) | manual | Best-effort. Some sticky-header layouts may briefly partially-cover focused content during transitions. |
| 2.5.7 Dragging Movements | AA (2.2) | manual | No drag-only interactions in the catalog. The TuxTreemap zoom is click-to-drill, not drag. |
| 2.5.8 Target Size (Minimum) | AA (2.2) | manual | Buttons and primary nav items meet 24×24 CSS pixels. Some inline meta-action buttons (close-X in modals, etc.) are exactly 24×24; sidebar links are 28+. |
| 3.2.6 Consistent Help | A (2.2) | manual | Footer position + content is consistent across pages (TuxFooter is the unified anchor). |
| 3.3.7 Redundant Entry | A (2.2) | manual | No multi-step flows in the catalog. Landscape and tti-ai-studio downstream consumers handle this in their own flows. |
known issues
Known non-conformances
None at the design-system level as of 2026-04-27. If you find an accessibility issue in a component or in a page that consumes this system, please open an issue on the tti-ux issue tracker with the heading "a11y:" so we can triage it ahead of normal feature work.
Downstream products (Landscape, tti-ai-studio) inherit the system's contrast guarantees but compose pages on top — page-level accessibility (heading order, landmark structure, form-field labeling) is the consumer's responsibility. The component doctrine notes per-component a11y considerations.
deep-dive references
Foundations pages
Four focused references covering the foundations every TUX page inherits — and consumers can verify against in their own downstream builds.
keyboard · WCAG 2.4.1
Skip to content
The keyboard-first foundation. How the skip link is wired, where it lands, how to verify.
keyboard · WCAG 2.4.7
Focus model
Visible focus rings, focus-trap behavior in modals + slideovers, tab order rules.
color · WCAG 1.4.3 + 1.4.6
Contrast matrix
Which token pairs pass AA / AAA across the three themes — USWDS-style summary of the top 10 by traffic.
responsive · WCAG 1.4.10
Breakpoints
The documented responsive scale + the container-query preference + 200% zoom reflow guarantees.