diff --git a/.github/workflows/visual-baselines.yml b/.github/workflows/visual-baselines.yml
index f48cc6cfec..fe558821b7 100644
--- a/.github/workflows/visual-baselines.yml
+++ b/.github/workflows/visual-baselines.yml
@@ -42,7 +42,15 @@ jobs:
         run: npx cypress install
         working-directory: regression-test
 
+      # Capturing baselines is decoupled from the a11y/console assertions: the
+      # screenshots are valid renders regardless of whether those assertions
+      # pass, so a failing test must never block the baseline refresh (that's
+      # what silently froze the baselines branch before). We let Cypress fail
+      # here, always publish the screenshots below, then re-surface the failure
+      # in a trailing step so master still shows red and notifies.
       - name: Run Cypress
+        id: cypress
+        continue-on-error: true
         uses: cypress-io/github-action@v7
         env:
           ELECTRON_EXTRA_LAUNCH_ARGS: "--remote-debugging-port=9222"
@@ -53,11 +61,13 @@ jobs:
           working-directory: regression-test
 
       - name: Flatten screenshots
+        if: always()
         run: |
           mkdir -p baseline-publish/screenshots
           find regression-test/cypress/screenshots -name '*.png' -exec cp {} baseline-publish/screenshots/ \;
 
       - name: Push baselines to visual-baselines branch
+        if: always()
         run: |
           cd baseline-publish
           git init -b visual-baselines
@@ -67,3 +77,12 @@ jobs:
           git commit -m "update baselines from ${GITHUB_SHA}"
           git remote add origin "https://x-access-token:${{ secrets.GITHUB_TOKEN }}@github.com/${GITHUB_REPOSITORY}.git"
           git push --force origin visual-baselines
+
+      # Baselines have been refreshed by this point; now fail loudly if the
+      # suite had regressions (a11y/console violations or a broken page) so the
+      # failure is visible on master rather than silently swallowed.
+      - name: Fail if Cypress reported failures
+        if: steps.cypress.outcome == 'failure'
+        run: |
+          echo "::error::Baselines were published, but the regression suite had failing tests (a11y/console/spec). See the Run Cypress step logs."
+          exit 1
diff --git a/.github/workflows/visual-regression.yml b/.github/workflows/visual-regression.yml
index 20f18e7b3b..750a02c259 100644
--- a/.github/workflows/visual-regression.yml
+++ b/.github/workflows/visual-regression.yml
@@ -77,19 +77,6 @@ jobs:
           mkdir -p regression-test/.actual
           find regression-test/cypress/screenshots -name '*.png' -exec cp {} regression-test/.actual/ \;
 
-      # TEMP (remove before merge): this PR renames every screenshot with a
-      # `-<theme>` suffix, so nothing matches the old baselines and the report
-      # has zero "changed" rows — leaving the new diff visualization impossible
-      # to preview. Inject one synthetic baseline/actual pair that differs in a
-      # few localized spots so the report always has a "changed" example.
-      # Fixtures live in regression-test/cypress/diff-demo/. Delete this step
-      # and that directory to revert.
-      - name: TEMP inject diff-demo fixture
-        run: |
-          mkdir -p regression-test/.baselines regression-test/.actual
-          cp regression-test/cypress/diff-demo/baseline.png regression-test/.baselines/diff-demo.png
-          cp regression-test/cypress/diff-demo/actual.png regression-test/.actual/diff-demo.png
-
       - name: Diff and generate report
         id: diff
         working-directory: regression-test
@@ -102,6 +89,7 @@ jobs:
           --pr-number ${{ github.event.pull_request.number }}
           --pr-url ${{ github.event.pull_request.html_url }}
           --meta cypress/meta.json
+          --a11y cypress/a11y.json
           --source-base-url https://github.com/${{ github.repository }}/blob/${{ github.head_ref }}/regression-test/src/app
           --facets canvas,light,dark
           --app-path app
@@ -137,7 +125,7 @@ jobs:
         run: |
           node -e "
             const fs = require('fs');
-            const { summary: s, results } = JSON.parse(fs.readFileSync('regression-test/.report/summary.json', 'utf8'));
+            const { summary: s, results, a11y = [] } = JSON.parse(fs.readFileSync('regression-test/.report/summary.json', 'utf8'));
             const base = 'https://instructure.design/visual-regression/pr-' + process.env.PR_NUMBER;
             const interesting = results.filter(r => r.status === 'changed' || r.status === 'removed');
             let md = '';
@@ -153,6 +141,17 @@ jobs:
               }
               md += '</details>';
             }
+            // Name the a11y rules in the comment. Numbers are per offending
+            // element; the same rule across themes is one row, matching the
+            // report's overview panel.
+            let a11yMd = '✅ No violations.';
+            if (a11y.length) {
+              a11yMd = '⚠️ **' + s.a11yViolations + ' violation' + (s.a11yViolations === 1 ? '' : 's') +
+                '** on ' + s.a11yPages + ' screenshot' + (s.a11yPages === 1 ? '' : 's') + '.\n\n' +
+                '| Impact | Issue | Rule | Elements | Screenshots |\n|---|---|---|---:|---:|\n' +
+                a11y.map(r => '| ' + r.impact + ' | ' + r.title + ' | [`' + r.rule + '`](' + r.helpUrl + ') | ' +
+                  r.nodes + ' | ' + r.screens + ' |').join('\n');
+            }
             const lines = [
               'total=' + s.total,
               'unchanged=' + s.unchanged,
@@ -163,6 +162,7 @@ jobs:
             ];
             let out = lines.join('\n') + '\n';
             out += 'diff_images<<DIFFIMAGES_EOF\n' + md + '\nDIFFIMAGES_EOF\n';
+            out += 'a11y<<A11Y_EOF\n' + a11yMd + '\nA11Y_EOF\n';
             fs.appendFileSync(process.env.GITHUB_OUTPUT, out);
           "
 
@@ -173,7 +173,9 @@ jobs:
           message: |
             ## Visual regression report
 
-            ${{ steps.summary.outputs.status }}
+            **Cypress suite:** ${{ steps.cypress.outcome == 'failure' && format('❌ **Failing** — see the [run logs]({0}/{1}/actions/runs/{2}).', github.server_url, github.repository, github.run_id) || '✅ Passing' }}
+
+            **Visual diff:** ${{ steps.summary.outputs.status }}
 
             | Status | Count |
             |---|---|
@@ -182,11 +184,13 @@ jobs:
             | New | ${{ steps.summary.outputs.added }} |
             | Removed | ${{ steps.summary.outputs.removed }} |
 
-            📊 **[View full report](https://instructure.design/visual-regression/pr-${{ github.event.pull_request.number }}/index.html)**
+            **Accessibility (axe):** ${{ steps.summary.outputs.a11y }}
+
+            📊 **[View full report](https://instructure.design/visual-regression/pr-${{ github.event.pull_request.number }}/index.html)** — click a screenshot's ⚠ badge to see each violation boxed on the image, with the offending element named and contrast failures shown as color swatches.
 
             ${{ steps.summary.outputs.diff_images }}
 
-            <sub>Baselines come from the `visual-baselines` branch. They refresh on every merge to `master`.</sub>
+            <sub>Baselines come from the `visual-baselines` branch. They refresh on every merge to `master`. The <b>Cypress suite</b> line covers the a11y and console-error assertions — a ❌ there means the suite found real issues even if the visual diff is clean.</sub>
 
       - name: Fail if regressions or Cypress failed
         if: steps.diff.outcome == 'failure' || steps.cypress.outcome == 'failure'
diff --git a/docs/contributing/testing/visual-regression.md b/docs/contributing/testing/visual-regression.md
index 7d574e6996..85427048b6 100644
--- a/docs/contributing/testing/visual-regression.md
+++ b/docs/contributing/testing/visual-regression.md
@@ -59,19 +59,20 @@ open .report/index.html
 
 `npm run visual-diff` invokes the same `ui-scripts visual-diff` command CI uses. Pass extra flags to override the defaults:
 
-| Flag                                                           | Default               | Description                                                                                                                                                                |
-| -------------------------------------------------------------- | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `--actual-dir <dir>`                                           | `cypress/screenshots` | Newly captured screenshots.                                                                                                                                                |
-| `--baseline-dir <dir>`                                         | `.baselines`          | Baselines to compare against.                                                                                                                                              |
-| `--output-dir <dir>`                                           | `visual-report`       | Where the HTML report + diff PNGs are written.                                                                                                                             |
-| `--threshold <0..1>`                                           | `0.1`                 | Per-pixel YIQ color threshold. Lower is stricter.                                                                                                                          |
-| `--fail-on-missing-baseline` / `--no-fail-on-missing-baseline` | on                    | Whether to exit 1 when actual screenshots have no baseline.                                                                                                                |
-| `--pr-number <n>`                                              | —                     | Rendered in the report header as a link to the PR.                                                                                                                         |
-| `--pr-url <url>`                                               | —                     | Target of the PR link.                                                                                                                                                     |
-| `--meta <file>`                                                | —                     | JSON mapping screenshot slug → visited URL path. Enables per-row source-file links in the report. Produced automatically by `spec.cy.ts` via `cy.task('recordMeta', ...)`. |
-| `--source-base-url <url>`                                      | —                     | GitHub blob URL of `regression-test/src/app` on the branch being reviewed. Combined with `--meta` to build links like `treebrowser/page.tsx`.                              |
-| `--facets <list>`                                              | —                     | Comma-separated facet suffixes (e.g. `canvas,light,dark`) rendered as one-click filter chips that match screenshots named `<name>-<facet>`.                                |
-| `--app-path <path>`                                            | —                     | Path, relative to the report root, where a static export of the app is published (CI uses `app`). Enables the lightbox **HTML** view, which iframes the live rendered page. |
+| Flag                                                           | Default               | Description                                                                                                                                                                                              |
+| -------------------------------------------------------------- | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--actual-dir <dir>`                                           | `cypress/screenshots` | Newly captured screenshots.                                                                                                                                                                              |
+| `--baseline-dir <dir>`                                         | `.baselines`          | Baselines to compare against.                                                                                                                                                                            |
+| `--output-dir <dir>`                                           | `visual-report`       | Where the HTML report + diff PNGs are written.                                                                                                                                                           |
+| `--threshold <0..1>`                                           | `0.1`                 | Per-pixel YIQ color threshold. Lower is stricter.                                                                                                                                                        |
+| `--fail-on-missing-baseline` / `--no-fail-on-missing-baseline` | on                    | Whether to exit 1 when actual screenshots have no baseline.                                                                                                                                              |
+| `--pr-number <n>`                                              | —                     | Rendered in the report header as a link to the PR.                                                                                                                                                       |
+| `--pr-url <url>`                                               | —                     | Target of the PR link.                                                                                                                                                                                   |
+| `--meta <file>`                                                | —                     | JSON mapping screenshot slug → visited URL path. Enables per-row source-file links in the report. Produced automatically by `spec.cy.ts` via `cy.task('recordMeta', ...)`.                               |
+| `--source-base-url <url>`                                      | —                     | GitHub blob URL of `regression-test/src/app` on the branch being reviewed. Combined with `--meta` to build links like `treebrowser/page.tsx`.                                                            |
+| `--facets <list>`                                              | —                     | Comma-separated facet suffixes (e.g. `canvas,light,dark`) rendered as one-click filter chips that match screenshots named `<name>-<facet>`.                                                              |
+| `--app-path <path>`                                            | —                     | Path, relative to the report root, where a static export of the app is published (CI uses `app`). Enables the lightbox **HTML** view, which iframes the live rendered page.                              |
+| `--a11y <file>`                                                | —                     | JSON of axe violations keyed by screenshot slug. Enables everything in [Accessibility findings](#accessibility-findings) below. Produced automatically by `spec.cy.ts` via `cy.task('recordA11y', ...)`. |
 
 ### Interpreting the report
 
@@ -79,15 +80,34 @@ The HTML report is a single self-contained page showing one section per screensh
 
 Top-bar controls:
 
-- **Filter buttons** (`All`, `Changed`, `New`, `Removed`, `Unchanged`) — the active one is highlighted.
+- **Filter buttons** (`All`, `Changed`, `New`, `Removed`, `Unchanged`, `⚠ A11y`) — the active one is highlighted.
 - **Search input** — live, debounced substring filter on the screenshot name.
+- **Theme chips** — narrow to one theme's screenshots.
 - **Lightbox** — click any thumbnail to open a fullscreen viewer. Inside:
   - `Baseline`, `Actual`, `Diff` buttons switch between the three images.
   - `Slider` mode overlays baseline and actual with a drag handle so you can scrub the boundary back and forth.
+  - `⚠ N a11y` mode shows the screenshot at full size with every violating element boxed, and the findings docked alongside. Shown only for screenshots with findings.
   - `HTML` mode iframes the live rendered page (a static export of the app published next to the report) so you can inspect the real DOM, computed styles, and text alongside the pixels. Shown only when the page still exists and the app was published (`--app-path`).
   - `1:1` / `Fit` toggles between native pixel size (scrollable) and fit-to-window.
   - `‹` / `›` step through visible rows (respects the current filter).
 
+### Accessibility findings
+
+axe runs against every page and theme, and the report shows what it found **on the picture**, so a designer can act on it without reading a selector.
+
+While the page is still on screen, `spec.cy.ts` records each violating element's bounding box, a human-readable name for it, and — for contrast failures — the foreground/background colors and ratios axe computed (see `cypress/support/a11y-capture.ts`). The report then renders:
+
+- **A run-level overview** at the top of the page: one line per rule with its impact, how many elements it affects, and how many screenshots it appears on. The same rule tripping in `canvas`, `light`, and `dark` collapses to a single line. Click a rule to narrow the list to just the screenshots it affects.
+- **A `⚠ N a11y` badge** in each affected screenshot's header, colored by the worst impact on it. That badge is the only a11y marking in the list — rows stay a clean three-up image comparison. **Click it** to open the lightbox's **A11y** view.
+- **The A11y view**: the screenshot at full size with every violating element boxed and numbered, colored by impact, and the findings listed beside it. Clicking a card highlights its box and vice versa. Findings are ordered worst-impact-first, so `#1` is always the most serious thing on that screenshot.
+- **One card per offending element**, leading with a plain-language headline ("Text contrast is too low") rather than the rule id, naming the element (`button “Archive this item”`), and suggesting a fix. Contrast failures show both colors as swatches with the measured and required ratios. The raw axe output — rule id, selector, and `failureSummary` — sits behind **Technical details**.
+
+The boxes and cards are rendered into an inert `<template>` inside each row and cloned when the A11y view opens, so there's one renderer rather than a server-side and a client-side copy.
+
+Plain-language copy comes from a rule dictionary in `packages/ui-scripts/lib/commands/visual-diff.ts` (`RULE_COPY`). A rule that isn't in it still renders correctly — it just falls back to axe's own `help` text. Add an entry when a new rule starts showing up.
+
+A page with a known, tracked a11y issue can opt out of the axe check entirely with `a11y: false` and an `a11ySkipReason` in the `PAGES` array in `spec.cy.ts`.
+
 ## Adding a new component page
 
 1. Create `regression-test/src/app/<component-name>/page.tsx`. The page component must start with `'use client'` and render meaningful variations of the component you're covering.
diff --git a/packages/ui-scripts/lib/__node_tests__/visual-diff.test.ts b/packages/ui-scripts/lib/__node_tests__/visual-diff.test.ts
index c302de0eb0..02af8da185 100644
--- a/packages/ui-scripts/lib/__node_tests__/visual-diff.test.ts
+++ b/packages/ui-scripts/lib/__node_tests__/visual-diff.test.ts
@@ -29,7 +29,19 @@ import {
   indexByName,
   sourceLinkFor,
   appUrlFor,
-  dilateMask
+  dilateMask,
+  esc,
+  normalizeA11y,
+  normalizeImpact,
+  parseContrast,
+  ruleCopy,
+  findingsFor,
+  a11yBadge,
+  a11yMarkers,
+  a11yCards,
+  a11yTemplate,
+  a11ySummary,
+  a11yOverview
 } from '../commands/visual-diff.ts'
 
 // Build a w*h changed-mask with the given filled rectangles set to 1.
@@ -259,3 +271,426 @@ describe('dilateMask', () => {
     expect(countSet(out)).toBe(countSet(src))
   })
 })
+
+describe('esc', () => {
+  it('escapes HTML-significant characters', () => {
+    expect(esc('<span class="x">a & b</span>')).toBe(
+      '&lt;span class=&quot;x&quot;&gt;a &amp; b&lt;/span&gt;'
+    )
+  })
+
+  it('leaves plain text untouched', () => {
+    expect(esc('color-contrast')).toBe('color-contrast')
+  })
+})
+
+// A capture in the shape spec.cy.ts now writes: page dimensions plus violations
+// whose nodes carry a measured rect, a human label, and contrast numbers.
+const CAPTURE = {
+  'button-dark': {
+    page: { w: 1000, h: 2000 },
+    violations: [
+      {
+        id: 'color-contrast',
+        impact: 'serious',
+        help: 'Elements must meet minimum color contrast ratio thresholds',
+        helpUrl: 'https://dequeuniversity.com/rules/axe/color-contrast',
+        nodes: [
+          {
+            target: '.css-x-baseButton__children',
+            html: '<span>primary-inverse</span>',
+            summary:
+              'Element has insufficient color contrast of 1.13 (foreground color: #ffffff, background color: #f5f5f5, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1',
+            label: 'span “Primary inverse”',
+            rect: { x: 100, y: 200, w: 250, h: 40 },
+            contrast: {
+              fg: '#ffffff',
+              bg: '#f5f5f5',
+              ratio: 1.13,
+              expected: 4.5,
+              fontSize: '12.0pt (16px)',
+              fontWeight: 'normal'
+            }
+          }
+        ]
+      },
+      {
+        id: 'button-name',
+        impact: 'critical',
+        help: 'Buttons must have discernible text',
+        helpUrl: 'https://dequeuniversity.com/rules/axe/button-name',
+        nodes: [
+          {
+            target: 'button.icon-only',
+            html: '<button></button>',
+            summary: 'Element does not have inner text',
+            label: 'button',
+            rect: { x: 0, y: 0, w: 40, h: 40 },
+            contrast: null
+          }
+        ]
+      }
+    ]
+  }
+}
+
+describe('normalizeA11y', () => {
+  it('passes the current { page, violations } shape through', () => {
+    const out = normalizeA11y(CAPTURE)!
+    expect(out['button-dark'].page).toEqual({ w: 1000, h: 2000 })
+    expect(out['button-dark'].violations).toHaveLength(2)
+  })
+
+  it('accepts the earlier bare-array shape, with no page size', () => {
+    const out = normalizeA11y({
+      'button-dark': CAPTURE['button-dark'].violations
+    })!
+    expect(out['button-dark'].page).toBeNull()
+    expect(out['button-dark'].violations).toHaveLength(2)
+  })
+
+  it('drops screenshots that have no violations', () => {
+    expect(
+      normalizeA11y({ 'a-dark': [], 'b-dark': { violations: [] } })
+    ).toEqual({})
+  })
+
+  it('ignores a zero-sized page so markers are not positioned against it', () => {
+    const out = normalizeA11y({
+      'button-dark': { page: { w: 0, h: 0 }, violations: [{ nodes: [] }] }
+    })!
+    expect(out['button-dark'].page).toBeNull()
+  })
+
+  it('returns null for input that is not an object', () => {
+    expect(normalizeA11y(null)).toBeNull()
+    expect(normalizeA11y('nope')).toBeNull()
+    expect(normalizeA11y([])).toBeNull()
+  })
+})
+
+describe('normalizeImpact', () => {
+  it('keeps the four axe impact levels', () => {
+    for (const i of ['critical', 'serious', 'moderate', 'minor']) {
+      expect(normalizeImpact(i)).toBe(i)
+    }
+  })
+
+  it('buckets a missing or unrecognized impact as unknown', () => {
+    expect(normalizeImpact(null)).toBe('unknown')
+    expect(normalizeImpact(undefined)).toBe('unknown')
+    expect(normalizeImpact('catastrophic')).toBe('unknown')
+  })
+})
+
+describe('parseContrast', () => {
+  const summary =
+    'Fix any of the following:\n  Element has insufficient color contrast of 2.42 (foreground color: #6b7780, background color: #2d3b45, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1'
+
+  it('recovers the numbers from axe prose for runs captured before they were structured', () => {
+    expect(parseContrast(summary)).toEqual({
+      fg: '#6b7780',
+      bg: '#2d3b45',
+      ratio: 2.42,
+      expected: 4.5,
+      fontSize: '12.0pt (16px)',
+      fontWeight: 'normal'
+    })
+  })
+
+  it('returns null for a summary that is not about contrast', () => {
+    expect(parseContrast('Element does not have inner text')).toBeNull()
+    expect(parseContrast('')).toBeNull()
+    expect(parseContrast(undefined)).toBeNull()
+  })
+})
+
+describe('ruleCopy', () => {
+  it('replaces a known rule id with designer-facing copy', () => {
+    const { title, fix } = ruleCopy('color-contrast', 'axe help text')
+    expect(title).toBe('Text contrast is too low')
+    expect(fix).not.toBe('')
+  })
+
+  it("falls back to axe's help text for an unmapped rule", () => {
+    expect(ruleCopy('some-future-rule', 'axe help text')).toEqual({
+      title: 'axe help text',
+      fix: ''
+    })
+  })
+})
+
+describe('findingsFor', () => {
+  const a11y = normalizeA11y(CAPTURE)
+
+  it('returns nothing for a screenshot with no violations', () => {
+    expect(findingsFor('alert-dark.png', a11y).findings).toEqual([])
+    expect(findingsFor('button-dark.png', null).findings).toEqual([])
+  })
+
+  it('flattens rules into one numbered finding per offending element', () => {
+    const { findings } = findingsFor('button-dark.png', a11y)
+    expect(findings.map((f) => f.n)).toEqual([1, 2])
+  })
+
+  it('orders findings worst impact first so the numbering runs by priority', () => {
+    const { findings } = findingsFor('button-dark.png', a11y)
+    expect(findings.map((f) => f.rule)).toEqual([
+      'button-name',
+      'color-contrast'
+    ])
+  })
+
+  it('carries the page size through for positioning the overlay', () => {
+    expect(findingsFor('button-dark.png', a11y).page).toEqual({
+      w: 1000,
+      h: 2000
+    })
+  })
+
+  it('attaches plain-language copy to each finding', () => {
+    const { findings } = findingsFor('button-dark.png', a11y)
+    expect(findings[0].title).toBe('Button has no accessible name')
+  })
+
+  it('derives contrast from the axe summary when it was not captured structurally', () => {
+    const legacy = normalizeA11y({
+      'x-dark': [
+        {
+          id: 'color-contrast',
+          impact: 'serious',
+          help: 'h',
+          helpUrl: 'u',
+          nodes: [
+            {
+              target: 'p',
+              html: '<p>',
+              summary:
+                'Element has insufficient color contrast of 2.42 (foreground color: #6b7780, background color: #2d3b45). Expected contrast ratio of 4.5:1'
+            }
+          ]
+        }
+      ]
+    })
+    expect(
+      findingsFor('x-dark.png', legacy).findings[0].contrast
+    ).toMatchObject({ fg: '#6b7780', ratio: 2.42, expected: 4.5 })
+  })
+})
+
+describe('a11yBadge', () => {
+  const { findings } = findingsFor('button-dark.png', normalizeA11y(CAPTURE))
+
+  it('renders nothing when there are no findings', () => {
+    expect(a11yBadge([])).toBe('')
+  })
+
+  it('counts every offending element', () => {
+    expect(a11yBadge(findings)).toContain('⚠ 2 a11y')
+  })
+
+  it('is colored by the worst impact present', () => {
+    // data-impact, not a class — that's what the severity-color rules key off.
+    expect(a11yBadge(findings)).toContain('data-impact="critical"')
+  })
+
+  it('is a button, since it opens the A11y view', () => {
+    expect(a11yBadge(findings)).toContain('<button type="button"')
+  })
+
+  it('pluralizes the tooltip', () => {
+    expect(a11yBadge(findings.slice(0, 1))).toContain(
+      '1 accessibility issue (worst: critical)'
+    )
+    expect(a11yBadge(findings)).toContain('2 accessibility issues')
+  })
+})
+
+describe('a11yMarkers', () => {
+  const { findings, page } = findingsFor(
+    'button-dark.png',
+    normalizeA11y(CAPTURE)
+  )
+
+  it('positions each box as a percentage of the captured page', () => {
+    const html = a11yMarkers(findings, page)
+    // the color-contrast node: x 100/1000, y 200/2000, w 250/1000, h 40/2000
+    expect(html).toContain('--x:10.000%;--y:10.000%;--w:25.000%;--h:2.000%')
+  })
+
+  it('numbers each box to match its card', () => {
+    const html = a11yMarkers(findings, page)
+    expect(html).toContain('data-n="1"')
+    expect(html).toContain('data-n="2"')
+  })
+
+  it('tags each box with its impact so it picks up the severity color', () => {
+    expect(a11yMarkers(findings, page)).toContain('data-impact="critical"')
+  })
+
+  it('tags each box with its rule, since the cards it pairs with are inert', () => {
+    expect(a11yMarkers(findings, page)).toContain('data-rule="color-contrast"')
+  })
+
+  it('renders nothing when the run recorded no page size', () => {
+    expect(a11yMarkers(findings, null)).toBe('')
+  })
+
+  it('skips findings whose element could not be measured', () => {
+    const unmeasured = findings.map((f) => ({ ...f, rect: null }))
+    expect(a11yMarkers(unmeasured, page)).toBe('')
+  })
+})
+
+describe('a11yTemplate', () => {
+  const { findings, page } = findingsFor(
+    'button-dark.png',
+    normalizeA11y(CAPTURE)
+  )
+
+  it('renders nothing when there are no findings', () => {
+    expect(a11yTemplate([], page)).toBe('')
+  })
+
+  it('parks the boxes and cards in an inert template', () => {
+    const html = a11yTemplate(findings, page)
+    expect(html.startsWith('<template class="a11y-findings">')).toBe(true)
+    expect(html.endsWith('</template>')).toBe(true)
+    expect(html).toContain('class="mk"')
+    expect(html).toContain('class="v-card"')
+  })
+
+  it('still emits the cards when there are no boxes to draw', () => {
+    const html = a11yTemplate(findings, null)
+    expect(html).not.toContain('class="mk"')
+    expect(html).toContain('class="v-card"')
+  })
+})
+
+describe('a11yCards', () => {
+  const { findings } = findingsFor('button-dark.png', normalizeA11y(CAPTURE))
+  const html = a11yCards(findings)
+
+  it('renders nothing when there are no findings', () => {
+    expect(a11yCards([])).toBe('')
+  })
+
+  it('leads with the plain-language title, not the rule id', () => {
+    expect(html).toContain('<h3>Text contrast is too low</h3>')
+    expect(html).toContain('<h3>Button has no accessible name</h3>')
+  })
+
+  it('names the offending element in human terms', () => {
+    expect(html).toContain('span “Primary inverse”')
+  })
+
+  it('shows contrast as swatches, the measured ratio, and the required one', () => {
+    expect(html).toContain('background:#ffffff')
+    expect(html).toContain('background:#f5f5f5')
+    expect(html).toContain('>1.13:1<')
+    expect(html).toContain('needs 4.5:1')
+  })
+
+  it('marks a passing ratio differently from a failing one', () => {
+    const passing = findings.map((f) =>
+      f.contrast ? { ...f, contrast: { ...f.contrast, ratio: 7 } } : f
+    )
+    expect(a11yCards(passing)).toContain('class="ratio ok"')
+    expect(html).toContain('class="ratio bad"')
+  })
+
+  it('suggests a fix', () => {
+    expect(html).toContain('Darken the text or lighten the background')
+  })
+
+  it('keeps the raw axe output behind a disclosure', () => {
+    expect(html).toContain('<summary>Technical details</summary>')
+    expect(html).toContain('.css-x-baseButton__children')
+    expect(html).toContain(
+      'href="https://dequeuniversity.com/rules/axe/color-contrast"'
+    )
+  })
+
+  it('tags cards with rule and impact so the filters can narrow them', () => {
+    expect(html).toContain('data-rule="color-contrast"')
+    expect(html).toContain('data-impact="serious"')
+  })
+
+  it('says so when the element could not be located', () => {
+    const unlabeled = findings.map((f) => ({ ...f, label: '' }))
+    expect(a11yCards(unlabeled)).toContain('position not captured')
+  })
+
+  it('does not interpolate a non-hex color into a style attribute', () => {
+    const injected = findings.map((f) =>
+      f.contrast
+        ? {
+            ...f,
+            contrast: { ...f.contrast, fg: 'red;background-image:url(x)' }
+          }
+        : f
+    )
+    const out = a11yCards(injected)
+    expect(out).toContain('background:transparent')
+    expect(out).not.toContain('background-image')
+  })
+})
+
+describe('a11ySummary', () => {
+  const many = normalizeA11y({
+    'button-dark': CAPTURE['button-dark'],
+    'button-light': CAPTURE['button-dark'],
+    'alert-dark': {
+      page: { w: 1000, h: 500 },
+      violations: [CAPTURE['button-dark'].violations[0]]
+    }
+  })
+
+  it('rolls each rule up across the whole run', () => {
+    const rules = a11ySummary(many)
+    const contrast = rules.find((r) => r.rule === 'color-contrast')!
+    expect(contrast.nodes).toBe(3)
+    expect(contrast.screens).toBe(3)
+  })
+
+  it('collapses the same rule across themes into one line', () => {
+    expect(a11ySummary(many).map((r) => r.rule)).toEqual([
+      'button-name',
+      'color-contrast'
+    ])
+  })
+
+  it('sorts worst impact first', () => {
+    expect(a11ySummary(many)[0].impact).toBe('critical')
+  })
+
+  it('labels each rule with its plain-language title', () => {
+    expect(a11ySummary(many)[0].title).toBe('Button has no accessible name')
+  })
+
+  it('returns an empty list when there is no a11y data', () => {
+    expect(a11ySummary(null)).toEqual([])
+  })
+})
+
+describe('a11yOverview', () => {
+  const rules = a11ySummary(normalizeA11y(CAPTURE))
+
+  it('renders nothing when there are no rules', () => {
+    expect(a11yOverview([], 0)).toBe('')
+  })
+
+  it('totals the elements across every rule', () => {
+    expect(a11yOverview(rules, 1)).toContain('⚠ 2 accessibility issues')
+  })
+
+  it('reports the screenshot and rule counts', () => {
+    expect(a11yOverview(rules, 1)).toContain('across 1 screenshot · 2 rules')
+  })
+
+  it('makes each rule a filter button', () => {
+    expect(a11yOverview(rules, 1)).toContain(
+      '<button class="ov-rule" data-rule="color-contrast">'
+    )
+  })
+})
diff --git a/packages/ui-scripts/lib/commands/visual-diff.ts b/packages/ui-scripts/lib/commands/visual-diff.ts
index 5c0e5aff11..76c5b1abdd 100644
--- a/packages/ui-scripts/lib/commands/visual-diff.ts
+++ b/packages/ui-scripts/lib/commands/visual-diff.ts
@@ -55,10 +55,66 @@ type Args = {
   sourceBaseUrl?: string
   facets?: string
   appPath?: string
+  a11y?: string
 }
 
 type Meta = Record<string, string>
 
+// Accessibility violations captured by the spec's axe run, keyed by screenshot
+// slug (name minus `.png`, e.g. `button-dark`). Written by the `recordA11y`
+// Cypress task; see regression-test/cypress.config.ts.
+
+/** Bounding box of a violating element, in CSS pixels relative to the top-left
+ * of the document (not the viewport) — the same coordinate space the fullPage
+ * screenshot is captured in. */
+type A11yRect = { x: number; y: number; w: number; h: number }
+
+/** Structured payload of an axe `color-contrast` check, so the report can show
+ * real swatches and ratios instead of making the reader parse prose. */
+type A11yContrast = {
+  fg: string
+  bg: string
+  ratio: number
+  expected: number
+  fontSize?: string
+  fontWeight?: string
+}
+
+type A11yNode = {
+  target: string
+  html: string
+  summary: string
+  /** Human-readable description of the element, e.g. `button "Save changes"`. */
+  label?: string
+  rect?: A11yRect | null
+  contrast?: A11yContrast | null
+}
+
+type A11yViolation = {
+  id: string
+  impact: string | null
+  help: string
+  helpUrl: string
+  nodes: A11yNode[]
+}
+
+/** Dimensions of the captured page, used to convert node rects into
+ * percentages of the screenshot so overlays scale with the rendered image. */
+type A11yPageSize = { w: number; h: number }
+
+type A11yEntry = { page: A11yPageSize | null; violations: A11yViolation[] }
+
+type A11y = Record<string, A11yEntry>
+
+/** @internal — exported only for tests; not part of the package's public API. */
+export function esc(s: string): string {
+  return s
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+}
+
 /** @internal — exported only for tests; not part of the package's public API. */
 export function sourceLinkFor(
   name: string,
@@ -260,12 +316,577 @@ export function thumb(mode: string, name: string): string {
   return `<img loading="lazy" src="${mode}/${name}" data-name="${name}" data-mode="${mode}" class="thumb" />`
 }
 
+// ---------------------------------------------------------------------------
+// Accessibility reporting
+//
+// axe's raw output is written for developers: rule ids, CSS selectors, and a
+// prose `failureSummary`. The report's audience is mostly designers, so the
+// functions below translate that into (a) boxes drawn on the screenshot itself,
+// and (b) a card per finding that leads with plain language, the offending
+// element's visible name, and — for contrast failures — actual color swatches.
+// The raw axe output stays available behind a "Technical details" disclosure.
+// ---------------------------------------------------------------------------
+
+/**
+ * Accept both the current a11y.json shape (`{ page, violations }` per
+ * screenshot) and the earlier one (a bare violation array), and drop
+ * screenshots with no violations so every consumer can treat a present key as
+ * "this screenshot has findings".
+ *
+ * @internal — exported only for tests; not part of the package's public API.
+ */
+export function normalizeA11y(raw: unknown): A11y | null {
+  if (!raw || typeof raw !== 'object' || Array.isArray(raw)) return null
+  const out: A11y = {}
+  for (const [name, value] of Object.entries(raw as Record<string, unknown>)) {
+    const entry = Array.isArray(value)
+      ? { page: null, violations: value as A11yViolation[] }
+      : (value as A11yEntry | null)
+    const violations = Array.isArray(entry?.violations) ? entry.violations : []
+    if (!violations.length) continue
+    const page = entry?.page
+    out[name] = {
+      page: page && page.w > 0 && page.h > 0 ? page : null,
+      violations
+    }
+  }
+  return out
+}
+
+const IMPACT_RANK: Record<string, number> = {
+  critical: 0,
+  serious: 1,
+  moderate: 2,
+  minor: 3
+}
+
+/** @internal — exported only for tests; not part of the package's public API. */
+export function normalizeImpact(impact: string | null | undefined): string {
+  return impact && impact in IMPACT_RANK ? impact : 'unknown'
+}
+
+function impactRank(impact: string | null | undefined): number {
+  return IMPACT_RANK[normalizeImpact(impact)] ?? 4
+}
+
+/**
+ * Recover the structured contrast numbers from axe's prose failure summary,
+ * for runs captured before the spec started recording them directly. The
+ * summary reads: "Element has insufficient color contrast of 2.42 (foreground
+ * color: #6b7780, background color: #2d3b45, font size: 12.0pt (16px), font
+ * weight: normal). Expected contrast ratio of 4.5:1".
+ *
+ * @internal — exported only for tests; not part of the package's public API.
+ */
+export function parseContrast(summary?: string): A11yContrast | null {
+  if (!summary) return null
+  const ratio = /contrast of ([\d.]+)/.exec(summary)
+  const fg = /foreground color: (#[0-9a-fA-F]{3,8})/.exec(summary)
+  const bg = /background color: (#[0-9a-fA-F]{3,8})/.exec(summary)
+  const expected = /Expected contrast ratio of ([\d.]+):1/.exec(summary)
+  if (!ratio || !fg || !bg || !expected) return null
+  const fontSize = /font size: ([^,]+)/.exec(summary)
+  const fontWeight = /font weight: ([^,)]+)/.exec(summary)
+  return {
+    fg: fg[1],
+    bg: bg[1],
+    ratio: Number(ratio[1]),
+    expected: Number(expected[1]),
+    fontSize: fontSize?.[1].trim(),
+    fontWeight: fontWeight?.[1].trim()
+  }
+}
+
+// Plain-language rendering of the axe rules this suite can actually trip, in
+// the words a designer would use. `title` replaces the rule id as the card's
+// headline; `fix` is the one-line "so what do I change?". Anything not listed
+// falls back to axe's own `help` text, so an unmapped rule still reads fine.
+const RULE_COPY: Record<string, { title: string; fix: string }> = {
+  'color-contrast': {
+    title: 'Text contrast is too low',
+    fix: 'Darken the text or lighten the background until it reaches the required ratio.'
+  },
+  'color-contrast-enhanced': {
+    title: 'Text contrast is below the enhanced (AAA) threshold',
+    fix: 'Increase the contrast between the text and its background.'
+  },
+  'link-in-text-block': {
+    title: 'Link is only distinguishable by color',
+    fix: 'Underline the link, or raise its contrast against the surrounding text.'
+  },
+  'button-name': {
+    title: 'Button has no accessible name',
+    fix: 'Give the button visible text, or pass a screen-reader label.'
+  },
+  'link-name': {
+    title: 'Link has no accessible name',
+    fix: 'Give the link visible text, or pass a screen-reader label.'
+  },
+  'input-button-name': {
+    title: 'Button has no accessible name',
+    fix: 'Set a value or a label on the input button.'
+  },
+  'image-alt': {
+    title: 'Image has no alternative text',
+    fix: 'Add alt text describing the image, or mark it decorative if it carries no meaning.'
+  },
+  'input-image-alt': {
+    title: 'Image button has no alternative text',
+    fix: 'Add alt text describing what the button does.'
+  },
+  'role-img-alt': {
+    title: 'Image has no alternative text',
+    fix: 'Add a label to the element that carries role="img".'
+  },
+  'svg-img-alt': {
+    title: 'Icon has no alternative text',
+    fix: 'Give the icon a title/label, or hide it from screen readers if it is decorative.'
+  },
+  'area-alt': {
+    title: 'Image map area has no alternative text',
+    fix: 'Add alt text to the area element.'
+  },
+  label: {
+    title: 'Form field has no label',
+    fix: 'Add a visible label, or attach one with renderLabel / aria-label.'
+  },
+  'select-name': {
+    title: 'Select has no accessible name',
+    fix: 'Add a label to the select.'
+  },
+  'form-field-multiple-labels': {
+    title: 'Form field has more than one label',
+    fix: 'Keep a single label per field.'
+  },
+  'aria-input-field-name': {
+    title: 'Input has no accessible name',
+    fix: 'Label the field so screen readers can announce what it is for.'
+  },
+  'aria-toggle-field-name': {
+    title: 'Toggle has no accessible name',
+    fix: 'Label the checkbox/switch so screen readers can announce what it toggles.'
+  },
+  'aria-command-name': {
+    title: 'Control has no accessible name',
+    fix: 'Give the button/link/menuitem text or a label.'
+  },
+  'aria-allowed-attr': {
+    title: 'ARIA attribute is not allowed on this element',
+    fix: "Remove the attribute, or change the element's role to one that allows it."
+  },
+  'aria-prohibited-attr': {
+    title: 'ARIA attribute is prohibited on this element',
+    fix: 'Remove the attribute and name the element with visible text instead.'
+  },
+  'aria-required-attr': {
+    title: 'Required ARIA attribute is missing',
+    fix: 'Add the attribute the role requires.'
+  },
+  'aria-required-children': {
+    title: 'ARIA role is missing its required children',
+    fix: 'Nest the child roles the parent role expects.'
+  },
+  'aria-required-parent': {
+    title: 'ARIA role is missing its required parent',
+    fix: 'Wrap the element in the parent role its role expects.'
+  },
+  'aria-valid-attr-value': {
+    title: 'ARIA attribute has an invalid value',
+    fix: 'Check the value — an id reference here usually points at a missing element.'
+  },
+  'aria-hidden-focus': {
+    title: 'Hidden element can still be focused',
+    fix: 'Remove aria-hidden, or take the element out of the tab order.'
+  },
+  'aria-hidden-body': {
+    title: 'The page body is hidden from screen readers',
+    fix: 'Remove aria-hidden from <body>.'
+  },
+  'nested-interactive': {
+    title: 'Interactive control is nested inside another',
+    fix: 'Flatten the markup so controls are siblings, not parent and child.'
+  },
+  'heading-order': {
+    title: 'Heading levels skip a step',
+    fix: 'Step heading levels one at a time (h2 → h3, never h2 → h4).'
+  },
+  'empty-heading': {
+    title: 'Heading is empty',
+    fix: 'Give the heading text, or remove it.'
+  },
+  'duplicate-id': {
+    title: 'Duplicate id on the page',
+    fix: 'Make every id unique — duplicates break label and ARIA references.'
+  },
+  'duplicate-id-aria': {
+    title: 'Duplicate id used by an ARIA reference',
+    fix: 'Make the referenced id unique so the reference resolves.'
+  },
+  'duplicate-id-active': {
+    title: 'Duplicate id on an interactive element',
+    fix: 'Make every id unique.'
+  },
+  list: {
+    title: 'List contains items that are not list items',
+    fix: 'Only <li> (or script/template) may be a direct child of a list.'
+  },
+  listitem: {
+    title: 'List item is not inside a list',
+    fix: 'Wrap the item in a <ul> or <ol>.'
+  },
+  'definition-list': {
+    title: 'Definition list is structured incorrectly',
+    fix: 'A <dl> may only contain <dt>/<dd> pairs (optionally grouped in <div>).'
+  },
+  'scrollable-region-focusable': {
+    title: 'Scrollable area cannot be reached by keyboard',
+    fix: 'Give the scrollable container tabindex="0" so keyboard users can scroll it.'
+  },
+  'th-has-data-cells': {
+    title: 'Table header has no data cells',
+    fix: 'Check the table structure — a header should describe some cells.'
+  },
+  'td-headers-attr': {
+    title: 'Table cell points at a header that does not exist',
+    fix: 'Fix the headers attribute so it references real cells in the same table.'
+  },
+  region: {
+    title: 'Content sits outside any landmark',
+    fix: 'Wrap the content in a landmark such as <main>, <nav>, or <section> with a label.'
+  },
+  'landmark-one-main': {
+    title: 'Page has no main landmark',
+    fix: 'Wrap the primary content in <main>.'
+  },
+  'frame-title': {
+    title: 'Frame has no title',
+    fix: 'Add a title attribute describing the frame contents.'
+  },
+  'html-has-lang': {
+    title: 'Page does not declare a language',
+    fix: 'Add a lang attribute to <html>.'
+  },
+  tabindex: {
+    title: 'Element uses a positive tabindex',
+    fix: 'Use tabindex="0" and rely on DOM order instead.'
+  },
+  'meta-viewport': {
+    title: 'Page prevents zooming',
+    fix: 'Remove user-scalable=no / maximum-scale from the viewport meta tag.'
+  },
+  'presentation-role-conflict': {
+    title: 'Element is marked decorative but is still exposed',
+    fix: 'Remove role="presentation"/"none", or remove what keeps the element exposed.'
+  }
+}
+
+/**
+ * Plain-language headline and remedy for an axe rule, falling back to axe's own
+ * `help` text for rules this report has no copy for.
+ *
+ * @internal — exported only for tests; not part of the package's public API.
+ */
+export function ruleCopy(
+  id: string,
+  help = ''
+): { title: string; fix: string } {
+  const copy = RULE_COPY[id]
+  return { title: copy?.title ?? help ?? id, fix: copy?.fix ?? '' }
+}
+
+/**
+ * One violating element. axe groups nodes under a rule; the report flattens
+ * that so every finding gets its own number, card, and box on the screenshot —
+ * a designer thinks in "this thing here is wrong", not "this rule matched".
+ */
+type Finding = {
+  /** 1-based, stable within one screenshot; ties the card to its overlay box. */
+  n: number
+  rule: string
+  impact: string
+  title: string
+  fix: string
+  help: string
+  helpUrl: string
+  label: string
+  target: string
+  summary: string
+  rect: A11yRect | null
+  contrast: A11yContrast | null
+}
+
+/**
+ * Flatten a screenshot's violations into numbered findings, worst impact first
+ * so the numbering on the screenshot runs in priority order.
+ *
+ * @internal — exported only for tests; not part of the package's public API.
+ */
+export function findingsFor(
+  name: string,
+  a11y: A11y | null
+): { findings: Finding[]; page: A11yPageSize | null } {
+  const entry = a11y?.[name.replace(/\.png$/, '')]
+  if (!entry) return { findings: [], page: null }
+
+  const flat = entry.violations.flatMap((v) =>
+    v.nodes.map((node) => {
+      const { title, fix } = ruleCopy(v.id, v.help)
+      return {
+        rule: v.id,
+        impact: normalizeImpact(v.impact),
+        title,
+        fix,
+        help: v.help,
+        helpUrl: v.helpUrl,
+        label: node.label ?? '',
+        target: node.target,
+        summary: node.summary ?? '',
+        rect: node.rect ?? null,
+        contrast: node.contrast ?? parseContrast(node.summary)
+      }
+    })
+  )
+  flat.sort(
+    (a, b) =>
+      impactRank(a.impact) - impactRank(b.impact) ||
+      a.rule.localeCompare(b.rule)
+  )
+  return {
+    findings: flat.map((f, i) => ({ n: i + 1, ...f })),
+    page: entry.page
+  }
+}
+
+/**
+ * Row-header pill, colored by the worst impact on the screenshot. It is the way
+ * into the findings: the row itself shows only this badge, and clicking it
+ * opens the lightbox's A11y view.
+ *
+ * @internal — exported only for tests; not part of the package's public API.
+ */
+export function a11yBadge(findings: Finding[]): string {
+  if (!findings.length) return ''
+  const worst = findings.reduce(
+    (acc, f) => (impactRank(f.impact) < impactRank(acc) ? f.impact : acc),
+    'unknown'
+  )
+  const plural = findings.length === 1 ? '' : 's'
+  return `<button type="button" class="pill a11y" data-impact="${esc(
+    worst
+  )}" title="${findings.length} accessibility issue${plural} (worst: ${esc(
+    worst
+  )}) — click to review them on the screenshot">⚠ ${
+    findings.length
+  } a11y</button>`
+}
+
+/**
+ * Boxes to lay over the screenshot in the A11y view, positioned as percentages
+ * of the captured page so they hold at whatever size the image is rendered.
+ * Returns '' when the run predates rect capture (no page size recorded).
+ *
+ * @internal — exported only for tests; not part of the package's public API.
+ */
+export function a11yMarkers(
+  findings: Finding[],
+  page: A11yPageSize | null
+): string {
+  if (!page) return ''
+  const pct = (v: number, total: number) =>
+    ((Math.max(0, v) / total) * 100).toFixed(3)
+  return findings
+    .filter((f) => f.rect)
+    .map((f) => {
+      const r = f.rect!
+      // rule/impact live on the marker so the filters can hide boxes directly;
+      // the cards they pair with are in a <template> and can't be queried.
+      return `<span class="mk" data-n="${f.n}" data-rule="${esc(
+        f.rule
+      )}" data-impact="${esc(f.impact)}" title="${f.n}. ${esc(
+        f.title
+      )}" style="--x:${pct(r.x, page.w)}%;--y:${pct(r.y, page.h)}%;--w:${pct(
+        r.w,
+        page.w
+      )}%;--h:${pct(r.h, page.h)}%"><b>${f.n}</b></span>`
+    })
+    .join('')
+}
+
+// axe reports colors as hex; anything else is shown as text only rather than
+// interpolated into a style attribute.
+function swatch(color: string): string {
+  const safe = /^#[0-9a-fA-F]{3,8}$/.test(color) ? color : 'transparent'
+  return `<span class="sw" style="background:${safe}"></span><code>${esc(
+    color.toUpperCase()
+  )}</code>`
+}
+
+function contrastHtml(c: A11yContrast): string {
+  const pass = c.ratio >= c.expected
+  const text = [c.fontSize, c.fontWeight].filter(Boolean).join(' · ')
+  return `<div class="v-contrast">${swatch(
+    c.fg
+  )}<span class="on">on</span>${swatch(c.bg)}<span class="ratio ${
+    pass ? 'ok' : 'bad'
+  }">${c.ratio.toFixed(2)}:1</span><span class="need">needs ${
+    c.expected
+  }:1</span>${text ? `<span class="fs">${esc(text)}</span>` : ''}</div>`
+}
+
+/**
+ * One card per finding: impact, plain-language headline, which element it is,
+ * a contrast readout when relevant, the suggested fix, and the raw axe output
+ * tucked behind a disclosure.
+ *
+ * @internal — exported only for tests; not part of the package's public API.
+ */
+export function a11yCards(findings: Finding[]): string {
+  if (!findings.length) return ''
+  const cards = findings
+    .map((f) => {
+      const where = f.label
+        ? `<div class="v-where">${esc(f.label)}</div>`
+        : `<div class="v-where muted">position not captured</div>`
+      const contrast = f.contrast ? contrastHtml(f.contrast) : ''
+      const fix = f.fix ? `<div class="v-fix">${esc(f.fix)}</div>` : ''
+      const rule = f.helpUrl
+        ? `<a href="${esc(f.helpUrl)}" target="_blank" rel="noopener">${esc(
+            f.rule
+          )}</a>`
+        : esc(f.rule)
+      return `<article class="v-card" data-n="${f.n}" data-rule="${esc(
+        f.rule
+      )}" data-impact="${esc(f.impact)}">
+        <span class="v-num" data-impact="${esc(f.impact)}">${f.n}</span>
+        <div class="v-body">
+          <div class="v-head"><span class="impact ${esc(f.impact)}">${esc(
+        f.impact
+      )}</span><h3>${esc(f.title)}</h3></div>
+          ${where}${contrast}${fix}
+          <details class="v-tech"><summary>Technical details</summary><dl>
+            <dt>Rule</dt><dd>${rule} — ${esc(f.help)}</dd>
+            <dt>Selector</dt><dd><code>${esc(f.target)}</code></dd>
+            <dt>axe</dt><dd><pre>${esc(f.summary)}</pre></dd>
+          </dl></details>
+        </div>
+      </article>`
+    })
+    .join('')
+  return cards
+}
+
+/**
+ * Park a row's boxes and cards in an inert `<template>`. Nothing a11y-related
+ * is rendered in the row itself — it stays a three-up image comparison with a
+ * badge — and the lightbox's A11y view clones this content when opened, so the
+ * findings appear next to the pixels they describe rather than as a wall of
+ * text between screenshots.
+ *
+ * @internal — exported only for tests; not part of the package's public API.
+ */
+export function a11yTemplate(
+  findings: Finding[],
+  page: A11yPageSize | null
+): string {
+  if (!findings.length) return ''
+  return `<template class="a11y-findings">${a11yMarkers(
+    findings,
+    page
+  )}${a11yCards(findings)}</template>`
+}
+
+/** A rule rolled up across every screenshot in the run. */
+type RuleSummary = {
+  rule: string
+  impact: string
+  title: string
+  helpUrl: string
+  nodes: number
+  screens: number
+}
+
+/**
+ * Roll findings up by rule for the run-level overview: how many elements each
+ * rule affects and how many screenshots it appears on, worst impact first. The
+ * same rule tripping on `button-canvas`, `button-light` and `button-dark`
+ * collapses to one line here instead of three.
+ *
+ * @internal — exported only for tests; not part of the package's public API.
+ */
+export function a11ySummary(a11y: A11y | null): RuleSummary[] {
+  const byRule = new Map<string, RuleSummary>()
+  for (const entry of Object.values(a11y ?? {})) {
+    const seenHere = new Set<string>()
+    for (const v of entry.violations) {
+      const cur = byRule.get(v.id) ?? {
+        rule: v.id,
+        impact: normalizeImpact(v.impact),
+        title: ruleCopy(v.id, v.help).title,
+        helpUrl: v.helpUrl,
+        nodes: 0,
+        screens: 0
+      }
+      cur.nodes += v.nodes.length
+      if (impactRank(v.impact) < impactRank(cur.impact)) {
+        cur.impact = normalizeImpact(v.impact)
+      }
+      if (!seenHere.has(v.id)) {
+        cur.screens += 1
+        seenHere.add(v.id)
+      }
+      byRule.set(v.id, cur)
+    }
+  }
+  return [...byRule.values()].sort(
+    (a, b) =>
+      impactRank(a.impact) - impactRank(b.impact) ||
+      b.nodes - a.nodes ||
+      a.rule.localeCompare(b.rule)
+  )
+}
+
+/**
+ * The run-level a11y panel that opens the report: totals, then one clickable
+ * line per rule that filters the list down to the screenshots tripping it.
+ *
+ * @internal — exported only for tests; not part of the package's public API.
+ */
+export function a11yOverview(rules: RuleSummary[], screens: number): string {
+  if (!rules.length) return ''
+  const total = rules.reduce((n, r) => n + r.nodes, 0)
+  const lines = rules
+    .map(
+      (r) => `<button class="ov-rule" data-rule="${esc(r.rule)}">
+        <span class="impact ${esc(r.impact)}">${esc(r.impact)}</span>
+        <span class="ov-title">${esc(r.title)}</span>
+        <code class="ov-id">${esc(r.rule)}</code>
+        <span class="ov-count"><b>${r.nodes}</b> element${
+        r.nodes === 1 ? '' : 's'
+      }</span>
+        <span class="ov-screens">${r.screens} screenshot${
+        r.screens === 1 ? '' : 's'
+      }</span>
+      </button>`
+    )
+    .join('')
+  return `<details class="overview" open>
+    <summary><b>⚠ ${total} accessibility issue${
+    total === 1 ? '' : 's'
+  }</b> across ${screens} screenshot${screens === 1 ? '' : 's'} · ${
+    rules.length
+  } rule${rules.length === 1 ? '' : 's'}</summary>
+    <div class="ov-hint">Click a rule to see only the screenshots it affects. Click a screenshot’s ⚠ badge to see its issues boxed on the image.</div>
+    <div class="ov-rules">${lines}</div>
+  </details>`
+}
+
 function row(
   r: Result,
   meta: Meta | null,
   sourceBaseUrl?: string,
   facets: string[] = [],
-  appPath?: string
+  appPath?: string,
+  a11y: A11y | null = null
 ): string {
   const b = r.status === 'added' ? '' : thumb('baseline', r.name)
   const a = r.status === 'removed' ? '' : thumb('actual', r.name)
@@ -283,14 +904,21 @@ function row(
   const htmlUrl =
     r.status === 'removed' ? '' : appUrlFor(r.name, meta, facets, appPath)
   const htmlAttr = htmlUrl ? ` data-html-url="${htmlUrl}"` : ''
+  const { findings, page } = findingsFor(r.name, a11y)
+  // Which rules this row trips, so the overview's rule filter can hide the
+  // whole row without reaching into the findings.
+  const rules = [...new Set(findings.map((f) => f.rule))].join(' ')
   return `
     <section class="row" data-status="${r.status}" data-name="${
-      r.name
-    }" data-has-both="${hasBoth}"${htmlAttr}>
-      <header><h2>${r.name}</h2>${badgeFor(
-        r.status
-      )}${pixelMeta}${source}</header>
+    r.name
+  }" data-has-both="${hasBoth}" data-a11y="${
+    findings.length
+  }" data-rules="${esc(rules)}"${htmlAttr}>
+      <header><h2>${r.name}</h2>${badgeFor(r.status)}${a11yBadge(
+    findings
+  )}${pixelMeta}${source}</header>
       <div class="grid"><figure><figcaption>Baseline</figcaption>${b}</figure><figure><figcaption>Actual</figcaption>${a}</figure><figure><figcaption>Diff</figcaption>${d}</figure></div>
+      ${a11yTemplate(findings, page)}
     </section>`
 }
 
@@ -302,14 +930,15 @@ function renderHtml(
   meta?: Meta | null,
   sourceBaseUrl?: string,
   facets: string[] = [],
-  appPath?: string
+  appPath?: string,
+  a11y: A11y | null = null
 ): string {
   const prBadge =
     prNumber && prUrl
       ? `<a href="${prUrl}" style="font-weight:600;color:#0969da;text-decoration:none;">PR #${prNumber}</a>`
       : prNumber
-        ? `<span style="font-weight:600;">PR #${prNumber}</span>`
-        : ''
+      ? `<span style="font-weight:600;">PR #${prNumber}</span>`
+      : ''
   // Land on the "Changed" view by default so reviewers see regressions first,
   // but fall back to "All" when nothing changed (otherwise the list is blank).
   const defaultFilter = summary.changed > 0 ? 'changed' : 'all'
@@ -318,8 +947,10 @@ function renderHtml(
     ['changed', 'Changed'],
     ['added', 'New'],
     ['removed', 'Removed'],
-    ['unchanged', 'Unchanged']
+    ['unchanged', 'Unchanged'],
+    ['a11y', '⚠ A11y']
   ]
+  const overview = a11yOverview(a11ySummary(a11y), summary.a11yPages)
   return `<!doctype html>
 <html><head><meta charset="utf-8"><title>Visual regression report</title>
 <style>
@@ -341,7 +972,73 @@ function renderHtml(
   .new { background: #ddf4ff; color: #0969da; }
   .gone { background: #fff1e5; color: #9a6700; }
   .meta { font-size: 12px; color: #666; }
+
+  /* --- accessibility -------------------------------------------------- */
+  /* One hue per impact, reused by pills, cards, and the boxes drawn on the
+     screenshot, so a color always means the same severity. */
+  [data-impact=critical], .impact.critical { --c: #8b1a10; }
+  [data-impact=serious], .impact.serious { --c: #cf222e; }
+  [data-impact=moderate], .impact.moderate { --c: #b26a00; }
+  [data-impact=minor], .impact.minor { --c: #4f7a9c; }
+  [data-impact=unknown], .impact.unknown { --c: #57606a; }
+  .impact { padding: 2px 7px; border-radius: 8px; font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #fff; background: var(--c); flex-shrink: 0; }
+  /* The badge is the only a11y affordance on a row — it opens the A11y view. */
+  button.pill.a11y { font: inherit; font-size: 11px; font-weight: 600; text-transform: uppercase; border: 0; cursor: pointer; color: #fff; background: var(--c, #8250df); }
+  button.pill.a11y:hover { filter: brightness(1.15); }
+  button.pill.a11y:focus-visible { outline: 2px solid #0969da; outline-offset: 2px; }
+
+  /* Overlay boxes. Positioned in % of the captured page so the same markup
+     works on the thumbnail and blown up in the lightbox. */
+  .shot { position: relative; display: inline-block; max-width: 100%; vertical-align: top; }
+  .mk { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); min-width: 6px; min-height: 6px; box-sizing: border-box; border: 2px solid var(--c); border-radius: 3px; background: color-mix(in srgb, var(--c) 12%, transparent); pointer-events: none; }
+  .mk > b { position: absolute; top: -8px; left: -8px; min-width: 16px; height: 16px; padding: 0 3px; box-sizing: border-box; background: var(--c); color: #fff; border-radius: 8px; font-size: 10px; line-height: 16px; text-align: center; font-weight: 700; box-shadow: 0 0 0 1.5px #fff; }
+  .mk.pulse { animation: mkpulse 1.1s ease-out 2; }
+  @keyframes mkpulse { 0%,100% { box-shadow: 0 0 0 0 transparent; } 40% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 45%, transparent); } }
+
+  .v-card { display: flex; gap: 10px; padding: 10px 12px; border: 1px solid #eaeaea; border-left: 4px solid var(--c); border-radius: 6px; background: #fcfcfc; }
+  .v-card.pulse { background: #fff8e5; }
+  .v-num { flex-shrink: 0; width: 20px; height: 20px; border-radius: 10px; background: var(--c); color: #fff; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; }
+  .v-body { flex: 1; min-width: 0; }
+  .v-head { display: flex; align-items: center; gap: 8px; }
+  .v-head h3 { margin: 0; font-size: 14px; font-weight: 600; }
+  .v-where { font-size: 13px; color: #24292f; margin-top: 4px; }
+  .v-where.muted { color: #8c959f; font-style: italic; }
+  .v-fix { font-size: 13px; color: #57606a; margin-top: 4px; }
+  .v-contrast { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; }
+  .v-contrast .sw { width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.25); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35); }
+  .v-contrast code { font-size: 12px; color: #24292f; }
+  .v-contrast .on { color: #8c959f; margin: 0 2px; }
+  .v-contrast .ratio { font-weight: 700; font-size: 15px; margin-left: 4px; }
+  .v-contrast .ratio.bad { color: #cf222e; }
+  .v-contrast .ratio.ok { color: #1a7f37; }
+  .v-contrast .need { color: #57606a; }
+  .v-contrast .fs { color: #8c959f; margin-left: 4px; }
+  .v-tech { margin-top: 6px; font-size: 12px; }
+  .v-tech > summary { cursor: pointer; color: #57606a; }
+  .v-tech dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px; margin: 6px 0 0; }
+  .v-tech dt { color: #8c959f; }
+  .v-tech dd { margin: 0; min-width: 0; }
+  .v-tech code { word-break: break-all; color: #57606a; }
+  .v-tech pre { margin: 0; white-space: pre-wrap; color: #57606a; font-size: 11px; }
+
+  .overview { background: #fff; border: 1px solid #e5e5e5; border-left: 4px solid #cf222e; border-radius: 8px; margin-bottom: 16px; padding: 12px 16px; }
+  .overview > summary { cursor: pointer; font-size: 14px; }
+  .ov-hint { font-size: 12px; color: #57606a; margin: 8px 0 10px; }
+  .ov-rules { display: grid; gap: 4px; }
+  .ov-rule { display: grid; grid-template-columns: 76px 1fr auto auto auto; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; padding: 7px 8px; border: 1px solid transparent; border-radius: 6px; background: #fafafa; cursor: pointer; }
+  .ov-rule:hover { background: #f0f6ff; border-color: #cfe3ff; }
+  .ov-rule.active { background: #ddf4ff; border-color: #0969da; }
+  .ov-rule .impact { text-align: center; }
+  .ov-title { font-weight: 600; }
+  .ov-id { font-size: 11px; color: #8c959f; }
+  .ov-count { font-size: 12px; color: #24292f; white-space: nowrap; }
+  .ov-screens { font-size: 12px; color: #8c959f; white-space: nowrap; }
+
   .filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
+  .filter .lbl { font-size: 12px; color: #666; }
+  #rule-chip { display: none; align-items: center; gap: 6px; font-size: 12px; padding: 3px 6px 3px 10px; border-radius: 12px; background: #ddf4ff; color: #0969da; }
+  #rule-chip.on { display: inline-flex; }
+  #rule-chip button { border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; padding: 0 2px; }
   .filter button { font-size: 12px; padding: 4px 10px; border: 1px solid #ddd; background: #fff; border-radius: 4px; cursor: pointer; }
   .filter button.active { background: #0969da; color: #fff; border-color: #0969da; }
   .filter input[type=search] { flex: 1; min-width: 180px; max-width: 320px; margin-left: auto; padding: 4px 10px; border: 1px solid #ddd; border-radius: 4px; font: inherit; }
@@ -356,11 +1053,22 @@ function renderHtml(
   .lightbox .bar h3 { margin: 0; font-size: 14px; font-weight: 600; flex: 1; }
   .lightbox .bar button { background: transparent; color: #eee; border: 1px solid #555; padding: 4px 10px; border-radius: 4px; cursor: pointer; font: inherit; }
   .lightbox .bar button.active { background: #fff; color: #111; border-color: #fff; }
-  .lightbox .viewer { flex: 1; overflow: auto; display: flex; align-items: center; justify-content: center; padding: 16px; }
+  .lightbox .viewer { position: relative; flex: 1; overflow: auto; display: flex; align-items: center; justify-content: center; padding: 16px; }
   .lightbox .viewer.actual-size { align-items: flex-start; }
   .lightbox .viewer > img { display: block; background: #fff; max-width: 100%; max-height: 100%; object-fit: contain; }
   .lightbox .viewer.actual-size > img { max-width: none; max-height: none; image-rendering: pixelated; }
   .lightbox .viewer > iframe { width: 100%; height: 100%; border: 0; background: #fff; }
+  /* A11y mode: the screenshot with its boxes on the left, the same cards the
+     row shows (cloned, so there is one renderer) docked on the right. */
+  .lightbox .viewer.a11y { align-items: stretch; justify-content: stretch; padding: 0; }
+  .a11y-view { display: flex; width: 100%; min-height: 0; }
+  .a11y-stage { flex: 1; min-width: 0; overflow: auto; padding: 16px; display: flex; justify-content: center; align-items: flex-start; }
+  .a11y-stage .shot img { display: block; max-width: 100%; background: #fff; }
+  .lightbox .viewer.actual-size .a11y-stage .shot img { max-width: none; }
+  /* The panel is a single column regardless of the row's two-up layout. */
+  .a11y-panel { width: 400px; flex-shrink: 0; overflow: auto; background: #fff; border-left: 1px solid #333; padding: 12px; display: grid; grid-template-columns: 1fr; gap: 8px; align-content: start; }
+  .a11y-panel .v-card { cursor: pointer; }
+  .a11y-panel-hd { font-size: 12px; color: #57606a; }
   .lightbox .slider { position: relative; user-select: none; background: #fff; flex-shrink: 0; }
   .lightbox .slider img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
   .lightbox .slider .top { clip-path: inset(0 0 0 var(--split, 50%)); }
@@ -378,7 +1086,12 @@ function renderHtml(
       <span style="color:#1a7f37;">OK: ${summary.unchanged}</span>
       <span style="color:#cf222e;">Changed: ${summary.changed}</span>
       <span style="color:#0969da;">New: ${summary.added}</span>
-      <span style="color:#9a6700;">Removed: ${summary.removed}</span>
+      <span style="color:#9a6700;">Removed: ${summary.removed}</span>${
+    summary.a11yPages
+      ? `
+      <span style="color:#cf222e;">⚠ A11y: ${summary.a11yViolations} on ${summary.a11yPages}</span>`
+      : ''
+  }
     </div>
     <div class="filter" id="status-filter">
       ${statusFilters
@@ -389,20 +1102,21 @@ function renderHtml(
             }>${label}</button>`
         )
         .join('')}
+      <span id="rule-chip">rule: <b id="rule-chip-name"></b><button type="button" aria-label="Clear rule filter">✕</button></span>
       <input id="search" type="search" placeholder="Filter by name…" autocomplete="off" />
     </div>${
       facets.length
         ? `
     <div class="filter" id="facet-filter">
-      <span style="font-size:12px;color:#666;">Theme:</span>
+      <span class="lbl">Theme:</span>
       <button data-facet="all" class="active">All</button>
       ${facets.map((f) => `<button data-facet="${f}">${f}</button>`).join('')}
     </div>`
         : ''
     }
   </header>
-  <main>${results
-    .map((r) => row(r, meta ?? null, sourceBaseUrl, facets, appPath))
+  <main>${overview}${results
+    .map((r) => row(r, meta ?? null, sourceBaseUrl, facets, appPath, a11y))
     .join('')}</main>
 
   <div class="lightbox" id="lb" aria-hidden="true">
@@ -413,6 +1127,7 @@ function renderHtml(
         <button data-mode="actual">Actual</button>
         <button data-mode="diff">Diff</button>
         <button data-mode="slider" id="lb-slider-btn">Slider</button>
+        <button data-mode="a11y" id="lb-a11y-btn">⚠ A11y</button>
         <button data-mode="html" id="lb-html-btn">HTML</button>
       </div>
       <button id="lb-zoom">1:1</button>
@@ -425,23 +1140,30 @@ function renderHtml(
 
   <script>
     (function () {
-      const listState = { filter: '${defaultFilter}', query: '', facet: 'all' }
+      const listState = { filter: '${defaultFilter}', query: '', facet: 'all', rule: 'all' }
 
       function applyFilters() {
         const q = listState.query.toLowerCase()
+        const rule = listState.rule
         document.querySelectorAll('.row').forEach(r => {
-          const matchesFilter = listState.filter === 'all' || r.dataset.status === listState.filter
+          const matchesFilter = listState.filter === 'all'
+            || (listState.filter === 'a11y' ? Number(r.dataset.a11y) > 0 : r.dataset.status === listState.filter)
           const matchesQuery = !q || r.dataset.name.toLowerCase().includes(q)
           const matchesFacet = listState.facet === 'all' || r.dataset.name.includes('-' + listState.facet + '.')
-          if (matchesFilter && matchesQuery && matchesFacet) r.removeAttribute('data-hidden')
+          const matchesRule = rule === 'all' || (r.dataset.rules || '').split(' ').includes(rule)
+          if (matchesFilter && matchesQuery && matchesFacet && matchesRule) r.removeAttribute('data-hidden')
           else r.setAttribute('data-hidden', '')
         })
       }
 
+      function setStatusFilter(value) {
+        listState.filter = value
+        document.querySelectorAll('#status-filter button').forEach(b => b.classList.toggle('active', b.dataset.filter === value))
+      }
+
       document.querySelectorAll('#status-filter button').forEach(btn => {
         btn.addEventListener('click', () => {
-          listState.filter = btn.dataset.filter
-          document.querySelectorAll('#status-filter button').forEach(b => b.classList.toggle('active', b === btn))
+          setStatusFilter(btn.dataset.filter)
           applyFilters()
         })
       })
@@ -454,6 +1176,25 @@ function renderHtml(
         })
       })
 
+      // Overview: clicking a rule narrows the list to the screenshots it
+      // affects; clicking it again (or the chip's ✕) clears it.
+      const ruleChip = document.getElementById('rule-chip')
+      const ruleChipName = document.getElementById('rule-chip-name')
+      function setRule(rule) {
+        listState.rule = rule
+        ruleChipName.textContent = rule === 'all' ? '' : rule
+        ruleChip.classList.toggle('on', rule !== 'all')
+        document.querySelectorAll('.ov-rule').forEach(b => b.classList.toggle('active', b.dataset.rule === rule))
+        if (rule !== 'all') setStatusFilter('a11y')
+        applyFilters()
+      }
+      document.querySelectorAll('.ov-rule').forEach(btn => {
+        btn.addEventListener('click', () => {
+          setRule(listState.rule === btn.dataset.rule ? 'all' : btn.dataset.rule)
+        })
+      })
+      ruleChip.querySelector('button').addEventListener('click', () => setRule('all'))
+
       let searchTimer
       document.getElementById('search').addEventListener('input', (e) => {
         clearTimeout(searchTimer)
@@ -468,6 +1209,7 @@ function renderHtml(
       const lbViewer = document.getElementById('lb-viewer')
       const lbSliderBtn = document.getElementById('lb-slider-btn')
       const lbHtmlBtn = document.getElementById('lb-html-btn')
+      const lbA11yBtn = document.getElementById('lb-a11y-btn')
       const lbZoomBtn = document.getElementById('lb-zoom')
       const state = { rows: [], idx: 0, mode: 'diff', zoom: false }
 
@@ -477,6 +1219,26 @@ function renderHtml(
         lbZoomBtn.textContent = state.zoom ? 'Fit' : '1:1'
       }
 
+      // Briefly draw attention to one finding's box and its card at once, so
+      // clicking either end of the pair shows you the other.
+      function pulse(scope, n) {
+        scope.querySelectorAll('.pulse').forEach(el => el.classList.remove('pulse'))
+        const marker = scope.querySelector('.mk[data-n="' + n + '"]')
+        const card = scope.querySelector('.v-card[data-n="' + n + '"]')
+        if (marker) {
+          marker.classList.add('pulse')
+          marker.scrollIntoView({ block: 'center', inline: 'center' })
+        }
+        if (card) {
+          card.classList.add('pulse')
+          card.scrollIntoView({ block: 'nearest' })
+        }
+        setTimeout(() => {
+          if (marker) marker.classList.remove('pulse')
+          if (card) card.classList.remove('pulse')
+        }, 2400)
+      }
+
       function refreshRows() {
         state.rows = Array.from(document.querySelectorAll('.row')).filter(r => !r.hasAttribute('data-hidden'))
       }
@@ -488,9 +1250,12 @@ function renderHtml(
         const status = row.dataset.status
         const hasBoth = row.dataset.hasBoth === 'true'
         const htmlUrl = row.dataset.htmlUrl || ''
+        const a11yCount = Number(row.dataset.a11y) || 0
         lbTitle.textContent = name + '  (' + (state.idx + 1) + '/' + state.rows.length + ') · ' + status
         lbSliderBtn.style.display = hasBoth ? '' : 'none'
         lbHtmlBtn.style.display = htmlUrl ? '' : 'none'
+        lbA11yBtn.style.display = a11yCount ? '' : 'none'
+        lbA11yBtn.textContent = '⚠ ' + a11yCount + ' a11y'
 
         document.querySelectorAll('#lb-modes button').forEach(b => {
           b.classList.toggle('active', b.dataset.mode === state.mode)
@@ -501,11 +1266,56 @@ function renderHtml(
           actual: status !== 'removed',
           diff: status === 'changed',
           slider: hasBoth,
+          a11y: a11yCount > 0,
           html: !!htmlUrl
         }
         if (!availableModes[state.mode]) state.mode = availableModes.diff ? 'diff' : (availableModes.actual ? 'actual' : 'baseline')
+        lbViewer.classList.toggle('a11y', state.mode === 'a11y')
 
-        if (state.mode === 'slider') {
+        if (state.mode === 'a11y') {
+          // Boxes and cards are server-rendered into the row's inert
+          // <template>; clone them out rather than re-implementing the
+          // renderer in the browser.
+          const tpl = row.querySelector('.a11y-findings')
+          lbViewer.innerHTML = ''
+          const view = document.createElement('div')
+          view.className = 'a11y-view'
+          const stage = document.createElement('div')
+          stage.className = 'a11y-stage'
+          const shot = document.createElement('div')
+          shot.className = 'shot'
+          const img = document.createElement('img')
+          img.src = 'actual/' + name
+          img.alt = name
+          shot.appendChild(img)
+          tpl.content.querySelectorAll('.mk').forEach(m => shot.appendChild(m.cloneNode(true)))
+          stage.appendChild(shot)
+          const panel = document.createElement('aside')
+          panel.className = 'a11y-panel'
+          const hd = document.createElement('div')
+          hd.className = 'a11y-panel-hd'
+          // Only promise the click-to-locate behaviour when boxes were captured.
+          hd.textContent = a11yCount + ' issue' + (a11yCount === 1 ? '' : 's') +
+            (shot.querySelector('.mk') ? ' — click one to find it on the screenshot' : '')
+          panel.appendChild(hd)
+          tpl.content.querySelectorAll('.v-card').forEach(c => {
+            const clone = c.cloneNode(true)
+            clone.addEventListener('click', (e) => {
+              // Leave the disclosure's own toggling alone.
+              if (e.target.closest('.v-tech')) return
+              pulse(view, clone.dataset.n)
+            })
+            panel.appendChild(clone)
+          })
+          view.appendChild(stage)
+          view.appendChild(panel)
+          lbViewer.appendChild(view)
+          shot.querySelectorAll('.mk > b').forEach(pin => {
+            pin.style.pointerEvents = 'auto'
+            pin.style.cursor = 'pointer'
+            pin.addEventListener('click', () => pulse(view, pin.parentNode.dataset.n))
+          })
+        } else if (state.mode === 'slider') {
           lbViewer.innerHTML = ''
           const wrap = document.createElement('div')
           wrap.className = 'slider'
@@ -553,6 +1363,8 @@ function renderHtml(
           wrap.addEventListener('touchstart', (e) => { onMove(e); e.preventDefault() }, { passive: false })
           wrap.addEventListener('touchmove', (e) => { onMove(e); e.preventDefault() }, { passive: false })
         } else if (state.mode === 'html') {
+          // Just the live page. A11y findings belong to the A11y view, which
+          // shows them against the pixels they were measured on.
           lbViewer.innerHTML = '<iframe src="' + htmlUrl + '" title="' + name + '"></iframe>'
         } else {
           lbViewer.innerHTML = '<img src="' + state.mode + '/' + name + '" alt="' + name + '" />'
@@ -560,14 +1372,15 @@ function renderHtml(
         applyZoom()
       }
 
-      function open(name) {
+      function open(name, mode, focusN) {
         refreshRows()
         const i = state.rows.findIndex(r => r.dataset.name === name)
         state.idx = i >= 0 ? i : 0
-        state.mode = 'diff'
+        state.mode = mode || 'diff'
         lb.classList.add('open')
         lb.setAttribute('aria-hidden', 'false')
         render()
+        if (focusN) pulse(lbViewer, focusN)
       }
 
       function close() {
@@ -579,6 +1392,12 @@ function renderHtml(
       document.querySelectorAll('.thumb').forEach(img => {
         img.addEventListener('click', () => open(img.dataset.name))
       })
+
+      // The row's a11y badge is the only entry point to the findings — it
+      // opens the lightbox straight into the A11y view.
+      document.querySelectorAll('.row button.pill.a11y').forEach(badge => {
+        badge.addEventListener('click', () => open(badge.closest('.row').dataset.name, 'a11y'))
+      })
       function step(delta) {
         if (!state.rows.length) return
         state.idx = (state.idx + delta + state.rows.length) % state.rows.length
@@ -664,17 +1483,36 @@ function run(args: Args): number {
     results.push({ name, status, numDiff, sizeMismatch })
   }
 
+  let a11y: A11y | null = null
+  if (args.a11y && existsSync(args.a11y)) {
+    try {
+      a11y = normalizeA11y(JSON.parse(readFileSync(args.a11y, 'utf8')))
+    } catch {
+      a11y = null
+    }
+  }
+  const a11yEntries = Object.values(a11y ?? {})
+
   const summary = {
     total: results.length,
     unchanged: results.filter((r) => r.status === 'unchanged').length,
     changed: results.filter((r) => r.status === 'changed').length,
     added: results.filter((r) => r.status === 'added').length,
-    removed: results.filter((r) => r.status === 'removed').length
+    removed: results.filter((r) => r.status === 'removed').length,
+    a11yPages: a11yEntries.length,
+    // Counted per offending element, not per rule — that's the number of
+    // things someone actually has to go fix.
+    a11yViolations: a11yEntries.reduce(
+      (n, e) => n + e.violations.reduce((m, v) => m + v.nodes.length, 0),
+      0
+    )
   }
 
+  // `a11y` is the same per-rule rollup the report's overview panel shows, so
+  // the PR comment can name the rules instead of pointing at the run logs.
   writeFileSync(
     join(outputDir, 'summary.json'),
-    JSON.stringify({ summary, results }, null, 2)
+    JSON.stringify({ summary, results, a11y: a11ySummary(a11y) }, null, 2)
   )
   let meta: Meta | null = null
   if (args.meta && existsSync(args.meta)) {
@@ -700,12 +1538,16 @@ function run(args: Args): number {
       meta,
       args.sourceBaseUrl,
       facets,
-      args.appPath
+      args.appPath,
+      a11y
     )
   )
 
   console.log(
-    `Total: ${summary.total} | OK: ${summary.unchanged} | Changed: ${summary.changed} | New: ${summary.added} | Removed: ${summary.removed}`
+    `Total: ${summary.total} | OK: ${summary.unchanged} | Changed: ${summary.changed} | New: ${summary.added} | Removed: ${summary.removed}` +
+      (summary.a11yPages
+        ? ` | A11y: ${summary.a11yViolations} on ${summary.a11yPages}`
+        : '')
   )
 
   const missingBaseline = summary.added > 0 && failOnMissingBaseline
@@ -770,6 +1612,11 @@ export default {
       type: 'string',
       describe:
         'Path (relative to the report root) where the live app is published, e.g. "app". Enables an "HTML" view in the lightbox that iframes the rendered page for each screenshot.'
+    },
+    a11y: {
+      type: 'string',
+      describe:
+        'Path to a JSON file of axe accessibility violations keyed by screenshot slug. Renders a run-level overview grouped by rule, numbered boxes over each offending element on the "Actual" screenshot, per-finding cards (plain-language summary, contrast swatches, suggested fix), and impact/rule filters.'
     }
   },
   handler: (argv: Args) => {
diff --git a/regression-test/.gitignore b/regression-test/.gitignore
index 33d4f1c545..23f3a9fd84 100644
--- a/regression-test/.gitignore
+++ b/regression-test/.gitignore
@@ -41,6 +41,7 @@ next-env.d.ts
 /cypress/downloads
 /cypress/screenshots
 /cypress/meta.json
+/cypress/a11y.json
 
 # visual regression local runs
 /.actual
diff --git a/regression-test/README.md b/regression-test/README.md
index c0ed7bd35e..f07f03e933 100644
--- a/regression-test/README.md
+++ b/regression-test/README.md
@@ -3,7 +3,7 @@
 A small Next.js app that imports `@instructure/ui` locally and exposes one page per component. Cypress visits each page to:
 
 - **Detect visual changes** — screenshots are diffed against baselines by the `ui-scripts visual-diff` command; an interactive HTML report is published to GitHub Pages on every PR. Each screenshot opens in a lightbox that switches between Baseline / Actual / Diff / Slider views and an **HTML** view that iframes the live rendered page (a static export of this app is published next to the report), so you can inspect the real DOM alongside the pixels.
-- **Detect a11y issues** — axe-core runs against every page.
+- **Detect a11y issues** — axe-core runs against every page. Violations are recorded with the offending element's position and name (`cypress/support/a11y-capture.ts`), so the diff report can box them on the screenshot itself and describe each one in plain language instead of printing a CSS selector.
 - **Detect unexpected console errors** — the spec's `afterEach` hook asserts `console.error` was not called.
 
 Each page is captured once **per theme** (`canvas`, `light`, `dark`), so screenshots are named `<slug>-<theme>.png`. The theme is selected with the `?theme=<key>` query param, which `src/app/layout.tsx` reads and applies via `InstUISettingsProvider`. The page background is painted from the active theme's own `background.page` semantic token, so each theme is captured on the surface it's actually used on — most visibly, the dark theme renders on its near-black surface rather than on white. Add or remove themes with the `THEMES` array in `cypress/e2e/spec.cy.ts` (this multiplies the screenshot/baseline count).
diff --git a/regression-test/cypress.config.ts b/regression-test/cypress.config.ts
index 9b06733da9..b96443f7ac 100644
--- a/regression-test/cypress.config.ts
+++ b/regression-test/cypress.config.ts
@@ -25,6 +25,9 @@ import { defineConfig } from 'cypress'
 import { existsSync, readFileSync, writeFileSync } from 'node:fs'
 
 const META_FILE = 'cypress/meta.json'
+// Accessibility violations captured per screenshot (`<slug>-<theme>`), consumed
+// by `ui-scripts visual-diff --a11y` to render a11y badges/details in the report.
+const A11Y_FILE = 'cypress/a11y.json'
 
 export default defineConfig({
   screenshotsFolder: 'cypress/screenshots',
@@ -41,6 +44,7 @@ export default defineConfig({
     setupNodeEvents(on, config) {
       on('before:run', () => {
         writeFileSync(META_FILE, '{}')
+        writeFileSync(A11Y_FILE, '{}')
       })
       on('task', {
         log(message) {
@@ -58,6 +62,25 @@ export default defineConfig({
           data[name] = pagePath
           writeFileSync(META_FILE, JSON.stringify(data, null, 2))
           return null
+        },
+        // `page` carries the dimensions each violation's bounding box was
+        // measured against, so the report can position the boxes over the
+        // screenshot as percentages. See cypress/support/a11y-capture.ts.
+        recordA11y({
+          name,
+          page,
+          violations
+        }: {
+          name: string
+          page: { w: number; h: number }
+          violations: unknown[]
+        }) {
+          const data = existsSync(A11Y_FILE)
+            ? JSON.parse(readFileSync(A11Y_FILE, 'utf8'))
+            : {}
+          data[name] = { page, violations }
+          writeFileSync(A11Y_FILE, JSON.stringify(data, null, 2))
+          return null
         }
       })
     }
diff --git a/regression-test/cypress/diff-demo/README.md b/regression-test/cypress/diff-demo/README.md
deleted file mode 100644
index e785cfd590..0000000000
--- a/regression-test/cypress/diff-demo/README.md
+++ /dev/null
@@ -1,35 +0,0 @@
-# diff-demo (TEMPORARY)
-
-A synthetic `baseline.png` / `actual.png` pair used only to preview the visual
-regression report's **diff visualization** while this PR is open.
-
-## Why it exists
-
-This PR renames every captured screenshot with a `-<theme>` suffix
-(`alert-dark.png` etc.), so none of them match the old baselines on the
-`visual-baselines` branch. The result is a report full of _added_ / _removed_
-rows and **zero _changed_ rows** — meaning the reworked pixel-highlight diff
-image never renders. This fixture forces one deterministic _changed_ row so the
-new rendering can be reviewed in the published CI report.
-
-The two images are identical except for a few localized spots (a recolored
-button and icon, a widened text line, and a 1px hairline underline) so the diff
-exercises both the dimmed backdrop and the dilated highlight.
-
-## How it's wired in
-
-The `TEMP inject diff-demo fixture` step in
-`.github/workflows/visual-regression.yml` copies `baseline.png` into
-`.baselines/diff-demo.png` and `actual.png` into `.actual/diff-demo.png` just
-before the diff step runs.
-
-## Removing it (before merge)
-
-1. Delete this directory (`regression-test/cypress/diff-demo/`).
-2. Delete the `TEMP inject diff-demo fixture` step in
-   `.github/workflows/visual-regression.yml`.
-
-## Regenerating the images
-
-The images were produced by a throwaway `pngjs` script; see the PR discussion.
-Any two near-identical PNGs with a small localized delta work equally well.
diff --git a/regression-test/cypress/diff-demo/actual.png b/regression-test/cypress/diff-demo/actual.png
deleted file mode 100644
index e7be9b7bd3..0000000000
Binary files a/regression-test/cypress/diff-demo/actual.png and /dev/null differ
diff --git a/regression-test/cypress/diff-demo/baseline.png b/regression-test/cypress/diff-demo/baseline.png
deleted file mode 100644
index 440633165b..0000000000
Binary files a/regression-test/cypress/diff-demo/baseline.png and /dev/null differ
diff --git a/regression-test/cypress/e2e/spec.cy.ts b/regression-test/cypress/e2e/spec.cy.ts
index 62424e9fda..704f09eb1f 100644
--- a/regression-test/cypress/e2e/spec.cy.ts
+++ b/regression-test/cypress/e2e/spec.cy.ts
@@ -23,6 +23,7 @@
  */
 
 import type { Result, RunOnly } from 'axe-core'
+import { captureViolations } from '../support/a11y-capture'
 
 type ConsoleErrorStub = Cypress.Agent<sinon.SinonStub<any[], any>>
 let windowErrorSpy: ConsoleErrorStub | undefined
@@ -204,16 +205,33 @@ describe('visual regression test', () => {
 
         if (a11y) {
           cy.injectAxe()
+          // Collect here, serialize in the cy.window() step below: measuring
+          // each violating element needs DOM access, and the violation callback
+          // runs synchronously inside checkA11y without a window handle.
+          const found: Result[] = []
           cy.checkA11y(
             '.axe-test',
             axeOptions,
             (violations) => {
               terminalLog(violations)
               violationCount += violations.length
+              found.push(...violations)
             },
             // skipFailures: don't throw here — collect and assert once at the end
             true
           )
+          // Persist the violations for this screenshot so the visual-diff report
+          // can draw them on the image and describe them in plain language.
+          // The page is untouched since the screenshot above, so the geometry
+          // captured here lines up with the pixels.
+          cy.window({ log: false }).then((win) => {
+            if (!found.length) return
+            cy.task(
+              'recordA11y',
+              { name, ...captureViolations(found, win) },
+              { log: false }
+            )
+          })
         }
       })
 
diff --git a/regression-test/cypress/support/a11y-capture.ts b/regression-test/cypress/support/a11y-capture.ts
new file mode 100644
index 0000000000..074b5b96d4
--- /dev/null
+++ b/regression-test/cypress/support/a11y-capture.ts
@@ -0,0 +1,210 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * Turns axe's raw output into something the visual-diff report can show to a
+ * designer.
+ *
+ * axe tells you a rule id and a CSS selector. Neither means much to someone
+ * reading a screenshot, so while the page is still on screen we also grab, per
+ * violating element:
+ *
+ * - its **bounding box** in page coordinates, so the report can draw a numbered
+ *   box over exactly that spot on the screenshot;
+ * - a **human-readable label** (`button "Save changes"`) to name it in prose;
+ * - the **color-contrast numbers** axe already computed, so the report can show
+ *   swatches and a ratio instead of a paragraph of prose.
+ *
+ * The result is consumed by `ui-scripts visual-diff --a11y`.
+ */
+
+import type { NodeResult, Result } from 'axe-core'
+
+export type A11yRect = { x: number; y: number; w: number; h: number }
+
+export type A11yContrast = {
+  fg: string
+  bg: string
+  ratio: number
+  expected: number
+  fontSize?: string
+  fontWeight?: string
+}
+
+export type CapturedNode = {
+  target: string
+  html: string
+  summary: string
+  label: string
+  rect: A11yRect | null
+  contrast: A11yContrast | null
+}
+
+export type CapturedViolation = {
+  id: string
+  impact: string | null
+  help: string
+  helpUrl: string
+  nodes: CapturedNode[]
+}
+
+export type CapturedPage = {
+  page: { w: number; h: number }
+  violations: CapturedViolation[]
+}
+
+// Longer than this and the label stops being a label.
+const MAX_LABEL_TEXT = 60
+
+/**
+ * axe returns a selector per DOM level, and an array-of-arrays when the element
+ * is inside a shadow root. Flatten to a single descendant selector — good
+ * enough to re-find light-DOM elements, which is all InstUI renders.
+ */
+export function flattenTarget(target: unknown[]): string {
+  return target
+    .map((t) => (Array.isArray(t) ? t.join(' ') : String(t)))
+    .join(' ')
+}
+
+/**
+ * Name an element the way a person would point at it: what kind of thing it is,
+ * plus whatever text identifies it. Falls back to the tag name alone for
+ * elements with no text (an icon, an empty container) rather than inventing
+ * something.
+ */
+export function describeElement(el: Element): string {
+  const tag = el.tagName.toLowerCase()
+  const role = el.getAttribute('role')
+  const kind = role ? `${tag} (role=${role})` : tag
+  const text = (
+    el.getAttribute('aria-label') ||
+    el.getAttribute('alt') ||
+    el.getAttribute('title') ||
+    (el as HTMLElement).innerText ||
+    el.textContent ||
+    ''
+  )
+    .replace(/\s+/g, ' ')
+    .trim()
+  if (!text) return kind
+  const clipped =
+    text.length > MAX_LABEL_TEXT ? `${text.slice(0, MAX_LABEL_TEXT)}…` : text
+  return `${kind} “${clipped}”`
+}
+
+/**
+ * Pull the contrast numbers out of the check axe actually ran. `expectedContrastRatio`
+ * comes back as a string like `"4.5:1"`.
+ */
+export function contrastOf(node: NodeResult): A11yContrast | null {
+  const check = [...(node.any ?? []), ...(node.all ?? [])].find(
+    (c) => c.id === 'color-contrast' || c.id === 'color-contrast-enhanced'
+  )
+  const data = check?.data as
+    | {
+        fgColor?: string
+        bgColor?: string
+        contrastRatio?: number
+        expectedContrastRatio?: string
+        fontSize?: string
+        fontWeight?: string
+      }
+    | undefined
+  if (!data?.fgColor || !data.bgColor || typeof data.contrastRatio !== 'number')
+    return null
+  return {
+    fg: data.fgColor,
+    bg: data.bgColor,
+    ratio: data.contrastRatio,
+    expected: parseFloat(data.expectedContrastRatio ?? '4.5'),
+    fontSize: data.fontSize,
+    fontWeight: data.fontWeight
+  }
+}
+
+/**
+ * Bounding box in document coordinates. The screenshots are captured with
+ * `capture: 'fullPage'`, whose origin is the top-left of the document, so the
+ * scroll offset has to be folded in — `getBoundingClientRect` is
+ * viewport-relative.
+ */
+export function rectOf(el: Element, win: Window): A11yRect | null {
+  const r = el.getBoundingClientRect()
+  if (!r.width && !r.height) return null
+  return {
+    x: Math.round(r.left + win.scrollX),
+    y: Math.round(r.top + win.scrollY),
+    w: Math.round(r.width),
+    h: Math.round(r.height)
+  }
+}
+
+/**
+ * Dimensions the rects were measured against, so the report can express every
+ * box as a percentage and have it hold at any rendered size. Width is the
+ * layout viewport (fullPage screenshots grow downward, never sideways).
+ */
+export function pageSizeOf(win: Window): { w: number; h: number } {
+  const el = win.document.documentElement
+  return {
+    w: el.clientWidth,
+    h: Math.max(el.scrollHeight, el.clientHeight)
+  }
+}
+
+/** Serialize one axe run against the page that is currently rendered. */
+export function captureViolations(
+  violations: Result[],
+  win: Window
+): CapturedPage {
+  return {
+    page: pageSizeOf(win),
+    violations: violations.map((v) => ({
+      id: v.id,
+      impact: v.impact ?? null,
+      help: v.help,
+      helpUrl: v.helpUrl,
+      nodes: v.nodes.map((node) => {
+        const target = flattenTarget(node.target)
+        let el: Element | null = null
+        try {
+          el = win.document.querySelector(target)
+        } catch {
+          // A selector axe can produce but querySelector can't parse (shadow
+          // DOM paths, mostly). The finding still reports; it just won't get a
+          // box on the screenshot.
+        }
+        return {
+          target,
+          html: node.html,
+          summary: node.failureSummary ?? '',
+          label: el ? describeElement(el) : '',
+          rect: el ? rectOf(el, win) : null,
+          contrast: contrastOf(node)
+        }
+      })
+    }))
+  }
+}
diff --git a/regression-test/src/app/button/page.tsx b/regression-test/src/app/button/page.tsx
index f4c5034248..5cc4dc27d7 100644
--- a/regression-test/src/app/button/page.tsx
+++ b/regression-test/src/app/button/page.tsx
@@ -34,7 +34,8 @@ import {
   IconUserLine,
   IconAiSolid,
   IconAiColoredSolid,
-  IconXSolid
+  IconXSolid,
+  Text
 } from '@instructure/ui/latest'
 
 export default function ButtonPage() {
@@ -58,7 +59,7 @@ export default function ButtonPage() {
         <Button color="success">success</Button>
         <Button color="danger">danger</Button>
       </div>
-      withBackground = false:
+      <Text>withBackground = false:</Text>
       <div style={{ display: 'flex', gap: '0.5rem' }}>
         <Button withBackground={false}>Button</Button>
         <Button color="primary" withBackground={false}>
@@ -89,7 +90,7 @@ export default function ButtonPage() {
         <Button size="large">large</Button>
       </div>
       <Button renderIcon={<IconAddLine />}>Icon Button</Button>
-      Disabled:
+      <Text>Disabled:</Text>
       <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
         <Button disabled>Button</Button>
         <Button disabled withBackground={false}>
@@ -246,9 +247,15 @@ export default function ButtonPage() {
         compensation is manual and size-specific, it's easy to miss a size or
         variant.
       */}
-      ai-secondary size parity (all sizes):
+      <Text>ai-secondary size parity (all sizes):</Text>
       {(
-        ['small', 'medium', 'large', 'condensedSmall', 'condensedMedium'] as const
+        [
+          'small',
+          'medium',
+          'large',
+          'condensedSmall',
+          'condensedMedium'
+        ] as const
       ).map((size) => (
         <div
           key={size}
diff --git a/regression-test/src/app/checkbox/page.tsx b/regression-test/src/app/checkbox/page.tsx
index 5b74031a13..dcdb805c93 100644
--- a/regression-test/src/app/checkbox/page.tsx
+++ b/regression-test/src/app/checkbox/page.tsx
@@ -27,13 +27,15 @@ import {
   Checkbox as cb,
   View as vw,
   ScreenReaderContent as src,
-  FormFieldGroup as ffg
+  FormFieldGroup as ffg,
+  Text as tx
 } from '@instructure/ui/latest'
 
 const Checkbox = cb as any
 const View = vw as any
 const ScreenReaderContent = src as any
 const FormFieldGroup = ffg as any
+const Text = tx as any
 
 export default function CheckboxPage() {
   return (
@@ -147,7 +149,9 @@ export default function CheckboxPage() {
         />
       </FormFieldGroup>
 
-      <span>Screenreader-only label:</span>
+      <span>
+        <Text>Screenreader-only label:</Text>
+      </span>
       <Checkbox
         label={
           <ScreenReaderContent>
diff --git a/regression-test/src/app/custom-icons/page.tsx b/regression-test/src/app/custom-icons/page.tsx
index 9d9b5708fe..43e339ebef 100644
--- a/regression-test/src/app/custom-icons/page.tsx
+++ b/regression-test/src/app/custom-icons/page.tsx
@@ -39,6 +39,10 @@ import {
   HeartInstUIIcon
 } from '@instructure/ui-icons'
 import type { InstUIIconProps } from '@instructure/ui-icons'
+import { Heading as hd, Text as tx } from '@instructure/ui/latest'
+
+const Heading = hd as any
+const Text = tx as any
 
 // This is just a React component, but that type doesn't work because
 // the main project uses a different React version
@@ -95,11 +99,10 @@ function IconGrid({
       {icons.map(([name, Icon]) => (
         <div key={name} className="flex flex-col items-center gap-1 p-1">
           <Icon size={size} color={color} title={name} />
-          <span
-            style={{ fontSize: '15px' }}
-            className="text-gray-500 text-center leading-tight"
-          >
-            {name.replace('InstUIIcon_', '')}
+          <span className="text-center leading-tight">
+            <Text color="secondary" variant="contentSmall">
+              {name.replace('InstUIIcon_', '')}
+            </Text>
           </span>
         </div>
       ))}
@@ -121,9 +124,9 @@ function SizeRow({
       {SIZES.map((size) => (
         <div key={size} className="flex flex-col items-center gap-1 p-1">
           <Icon size={size} color={color} title={name} />
-          <span style={{ fontSize: '15px' }} className="text-gray-500">
+          <Text color="secondary" variant="contentSmall">
             {size}
-          </span>
+          </Text>
         </div>
       ))}
     </div>
@@ -132,18 +135,22 @@ function SizeRow({
 
 function SectionHeader({ children }: { children: React.ReactNode }) {
   return (
-    <p className="text-xs font-bold mt-7 mb-2 pb-1 border-b border-gray-300 text-gray-700">
-      {children}
-    </p>
+    <div className="mt-7 mb-2">
+      <Heading level="h3" variant="label" border="bottom">
+        {children}
+      </Heading>
+    </div>
   )
 }
 
 export default function CustomIconsPage() {
   return (
     <main className="axe-test p-6 font-sans">
-      <h1 className="text-sm font-bold mb-1">
-        Custom icons (sample of {CUSTOM.length})
-      </h1>
+      <div className="mb-1">
+        <Heading level="h1" variant="titleCardMini">
+          Custom icons (sample of {CUSTOM.length})
+        </Heading>
+      </div>
 
       {COLORS.map((color) => (
         <React.Fragment key={color}>
@@ -170,9 +177,11 @@ export default function CustomIconsPage() {
         color="baseColor"
       />
 
-      <h1 className="text-sm font-bold mt-10 mb-1">
-        Lucide icons (sample of {LUCIDE.length})
-      </h1>
+      <div className="mt-10 mb-1">
+        <Heading level="h1" variant="titleCardMini">
+          Lucide icons (sample of {LUCIDE.length})
+        </Heading>
+      </div>
 
       {COLORS.map((color) => (
         <React.Fragment key={color}>
diff --git a/regression-test/src/app/dateinput/page.tsx b/regression-test/src/app/dateinput/page.tsx
index 8c3f1669ff..ed4e2422d8 100644
--- a/regression-test/src/app/dateinput/page.tsx
+++ b/regression-test/src/app/dateinput/page.tsx
@@ -24,9 +24,14 @@
 
 'use client'
 import React, { useState } from 'react'
-import { DateInput as di, IconAddLine } from '@instructure/ui/latest'
+import {
+  DateInput as di,
+  IconAddLine,
+  Text as tx
+} from '@instructure/ui/latest'
 
 const DateInput = di as any
+const Text = tx as any
 
 export default function DateInputExamplesPage() {
   // DateInput states
@@ -40,7 +45,9 @@ export default function DateInputExamplesPage() {
 
   return (
     <main className="flex gap-10 p-12 flex-col items-start axe-test">
-      <div>DateInput:</div>
+      <div>
+        <Text>DateInput:</Text>
+      </div>
       <section>
         <DateInput
           locale="en-us"
@@ -61,9 +68,13 @@ export default function DateInputExamplesPage() {
           invalidDateErrorMessage="Invalid date"
         />
         <p>
-          Input Value: <code>{di2Value}</code>
+          <Text>
+            Input Value: <code>{di2Value}</code>
+          </Text>
           <br />
-          UTC Date String: <code>{di2DateString}</code>
+          <Text>
+            UTC Date String: <code>{di2DateString}</code>
+          </Text>
         </p>
       </section>
 
diff --git a/regression-test/src/app/datetimeinput/page.tsx b/regression-test/src/app/datetimeinput/page.tsx
index 4e79167175..4138e8788a 100644
--- a/regression-test/src/app/datetimeinput/page.tsx
+++ b/regression-test/src/app/datetimeinput/page.tsx
@@ -26,11 +26,13 @@
 import React, { useRef, useState } from 'react'
 import {
   DateTimeInput as dti,
-  ScreenReaderContent as src
+  ScreenReaderContent as src,
+  Text as tx
 } from '@instructure/ui/latest'
 
 const DateTimeInput = dti as any
 const ScreenReaderContent = src as any
+const Text = tx as any
 
 export default function DateTimeInputPage() {
   // Example 2: required + hint if in past
@@ -39,7 +41,7 @@ export default function DateTimeInputPage() {
 
   return (
     <main className="flex gap-10 p-8 flex-col items-start axe-test">
-      1) Columns layout with default value
+      <Text>1) Columns layout with default value</Text>
       <DateTimeInput
         description="Pick a date and time"
         datePlaceholder="Choose a date"
@@ -54,7 +56,7 @@ export default function DateTimeInputPage() {
         defaultValue="2018-01-18T13:30"
         layout="columns"
       />
-      2) Required + hint when value is in the past, stacked layout
+      <Text>2) Required + hint when value is in the past, stacked layout</Text>
       <DateTimeInput
         description={
           <ScreenReaderContent>Pick a date and time</ScreenReaderContent>
@@ -89,7 +91,7 @@ export default function DateTimeInputPage() {
         allowNonStepInput
         isRequired
       />
-      3) Disabled DateTimeInput
+      <Text>3) Disabled DateTimeInput</Text>
       <DateTimeInput
         description="Pick a date and time"
         datePlaceholder="Choose a date"
@@ -106,7 +108,7 @@ export default function DateTimeInputPage() {
         interaction="disabled"
       />
       {/*
-      4) Disabled dates via string array
+      <Text>4) Disabled dates via string array</Text>
       <DateTimeInput
         description="Pick a date and time"
         datePlaceholder="Choose a date"
diff --git a/regression-test/src/app/link/page.tsx b/regression-test/src/app/link/page.tsx
index e61d109ed3..8f502970ab 100644
--- a/regression-test/src/app/link/page.tsx
+++ b/regression-test/src/app/link/page.tsx
@@ -87,15 +87,17 @@ export default function LinkPage() {
       {/* Variants */}
       <section>
         <div>
-          In a line of text you should use the{' '}
-          <Link
-            variant="inline"
-            renderIcon={<IconUserLine />}
-            href="https://instructure.github.io/instructure-ui/"
-          >
-            inline
-          </Link>{' '}
-          link variant.
+          <Text>
+            In a line of text you should use the{' '}
+            <Link
+              variant="inline"
+              renderIcon={<IconUserLine />}
+              href="https://instructure.github.io/instructure-ui/"
+            >
+              inline
+            </Link>{' '}
+            link variant.
+          </Text>
         </div>
         <br />
         <div>
@@ -114,28 +116,32 @@ export default function LinkPage() {
         </div>
         <br />
         <div>
-          If the link is standalone (not in a text), use the{' '}
-          <code>standalone</code>{' '}
-          <Link
-            display="block"
-            variant="standalone"
-            href="https://instructure.github.io/instructure-ui/"
-          >
-            standalone
-          </Link>
+          <Text>
+            If the link is standalone (not in a text), use the{' '}
+            <code>standalone</code>{' '}
+            <Link
+              display="block"
+              variant="standalone"
+              href="https://instructure.github.io/instructure-ui/"
+            >
+              standalone
+            </Link>
+          </Text>
         </div>
         <br />
         <div>
-          If the link is standalone (not in a text), but smaller, use{' '}
-          <code>standalone</code> with <code>size=&quot;small&quot;</code>{' '}
-          <Link
-            display="block"
-            variant="standalone"
-            size="small"
-            href="https://instructure.github.io/instructure-ui/"
-          >
-            standalone + size=&quot;small&quot;
-          </Link>
+          <Text>
+            If the link is standalone (not in a text), but smaller, use{' '}
+            <code>standalone</code> with <code>size=&quot;small&quot;</code>{' '}
+            <Link
+              display="block"
+              variant="standalone"
+              size="small"
+              href="https://instructure.github.io/instructure-ui/"
+            >
+              standalone + size=&quot;small&quot;
+            </Link>
+          </Text>
         </div>
       </section>
 
diff --git a/regression-test/src/app/pagination/page.tsx b/regression-test/src/app/pagination/page.tsx
index 9ae77a2d12..1b8f87338c 100644
--- a/regression-test/src/app/pagination/page.tsx
+++ b/regression-test/src/app/pagination/page.tsx
@@ -24,10 +24,15 @@
 
 'use client'
 import React, { useMemo, useState } from 'react'
-import { Pagination as pg, View as vw } from '@instructure/ui/latest'
+import {
+  Pagination as pg,
+  View as vw,
+  Text as tx
+} from '@instructure/ui/latest'
 
 const Pagination = pg as any
 const View = vw as any
+const Text = tx as any
 
 export default function PaginationPage() {
   // New API states
@@ -123,7 +128,9 @@ export default function PaginationPage() {
           onPageChange={(nextPage: number) => setCurrentInput(nextPage)}
         />
       </section>
-      <div>Legacy API</div>
+      <div>
+        <Text>Legacy API</Text>
+      </div>
       {/* Legacy API: compact variant with children */}
       <section>
         <View as="div" display="block" margin="small 0">
diff --git a/regression-test/src/app/progressbar/page.tsx b/regression-test/src/app/progressbar/page.tsx
index 252b9762c2..d4fb349e5d 100644
--- a/regression-test/src/app/progressbar/page.tsx
+++ b/regression-test/src/app/progressbar/page.tsx
@@ -40,7 +40,9 @@ export default function ProgressBarPage() {
   return (
     <main className="flex gap-12 p-8 flex-col items-start axe-test">
       <section style={{ width: '500px' }}>
-        <div>Sizes:</div>
+        <div>
+          <Text>Sizes:</Text>
+        </div>
         <ProgressBar
           size="x-small"
           screenReaderLabel="Loading completion"
@@ -94,7 +96,9 @@ export default function ProgressBarPage() {
       </section>
 
       <section style={{ width: '500px' }}>
-        <div>Inverse:</div>
+        <div>
+          <Text>Inverse:</Text>
+        </div>
         <View background="primary-inverse" as="div" padding="small">
           <ProgressBar
             screenReaderLabel="Loading completion"
@@ -112,7 +116,9 @@ export default function ProgressBarPage() {
       </section>
 
       <section style={{ width: '500px' }}>
-        <div>Colors:</div>
+        <div>
+          <Text>Colors:</Text>
+        </div>
         <ProgressBar
           screenReaderLabel="Loading completion"
           meterColor="info"
@@ -180,7 +186,9 @@ export default function ProgressBarPage() {
         />
       </section>
 
-      <div>ProgressCircle:</div>
+      <div>
+        <Text>ProgressCircle:</Text>
+      </div>
       <section style={{ width: '600px' }}>
         <ProgressCircle
           size="x-small"
diff --git a/regression-test/src/app/select/page.tsx b/regression-test/src/app/select/page.tsx
index 1d2edd7753..4f40a247b2 100644
--- a/regression-test/src/app/select/page.tsx
+++ b/regression-test/src/app/select/page.tsx
@@ -32,7 +32,8 @@ import {
   AccessibleContent as ac,
   IconUserSolid as ius,
   IconUserLine as iul,
-  IconSearchLine as isl
+  IconSearchLine as isl,
+  Text as tx
 } from '@instructure/ui/latest'
 
 const Select = sl as any
@@ -43,6 +44,7 @@ const AccessibleContent = ac as any
 const IconUserSolid = ius as any
 const IconUserLine = iul as any
 const IconSearchLine = isl as any
+const Text = tx as any
 
 type OptionT = { id: string; label: string; disabled?: boolean }
 
@@ -286,7 +288,9 @@ function GroupSelectExample({
           </Select.Group>
         ))}
       </Select>
-      <div>SimpleSelect:</div>
+      <div>
+        <Text>SimpleSelect:</Text>
+      </div>
       <div>
         <SimpleSelect renderLabel="Uncontrolled Select">
           <SimpleSelect.Option
@@ -310,7 +314,6 @@ function GroupSelectExample({
   )
 }
 
-
 function MultipleSelectExample({ selected }: { selected: string[] }) {
   return (
     <View display="block">
@@ -329,7 +332,11 @@ function MultipleSelectExample({ selected }: { selected: string[] }) {
           <Tag
             key={i}
             dismissible
-            text={<AccessibleContent alt={`Remove ${label}`}>{label}</AccessibleContent>}
+            text={
+              <AccessibleContent alt={`Remove ${label}`}>
+                {label}
+              </AccessibleContent>
+            }
             onClick={() => {}}
           />
         ))}
diff --git a/regression-test/src/app/small-components/page.tsx b/regression-test/src/app/small-components/page.tsx
index 38d07a9cad..cfc24a7c5b 100644
--- a/regression-test/src/app/small-components/page.tsx
+++ b/regression-test/src/app/small-components/page.tsx
@@ -48,17 +48,23 @@ const Text = tx as any
 export default function SmallComponentsPage() {
   return (
     <main id="main" className="flex gap-8 p-8 flex-col items-start axe-test">
-      <div>Metric:</div>
+      <div>
+        <Text>Metric:</Text>
+      </div>
       <Metric textAlign="start" renderLabel="Grade" renderValue="80%" />
       <Metric renderLabel="Grade" renderValue="80%" />
       <Metric textAlign="end" renderLabel="Grade" renderValue="80%" />
-      <div>MetricGroup:</div>
+      <div>
+        <Text>MetricGroup:</Text>
+      </div>
       <MetricGroup>
         <Metric renderLabel="Grade" renderValue="80%" />
         <Metric renderLabel="Late" renderValue="4" />
         <Metric renderLabel="Missing" renderValue="2" />
       </MetricGroup>
-      <div>Pill:</div>
+      <div>
+        <Text>Pill:</Text>
+      </div>
       <div>
         <Pill margin="x-small">Excused</Pill>
         <Pill statusLabel="Status" color="info" margin="x-small">
@@ -82,7 +88,9 @@ export default function SmallComponentsPage() {
           Notification
         </Pill>
       </div>
-      <div>Tag:</div>
+      <div>
+        <Text>Tag:</Text>
+      </div>
       <div>
         <Tag text="Static" margin="0 xx-small 0 0" />
         <Tag
@@ -106,14 +114,18 @@ export default function SmallComponentsPage() {
           onClick={function () {}}
         />
       </div>
-      <div>TimeSelect:</div>
+      <div>
+        <Text>TimeSelect:</Text>
+      </div>
       <TimeSelect
         renderLabel="Choose a time"
         onChange={(e: any, { value }: any) => 3}
         onHideOptions={(e: any) => 5}
         defaultValue="2025-08-18T09:30:00+00:00"
       />
-      <div>Text:</div>
+      <div>
+        <Text>Text:</Text>
+      </div>
       <div>
         <Text variant="descriptionPage"> descriptionPage </Text>
         <Text variant="descriptionSection"> descriptionSection </Text>
diff --git a/regression-test/src/app/tooltip/page.tsx b/regression-test/src/app/tooltip/page.tsx
index d36f4523f5..2feb32f624 100644
--- a/regression-test/src/app/tooltip/page.tsx
+++ b/regression-test/src/app/tooltip/page.tsx
@@ -107,8 +107,10 @@ export default function TooltipPage() {
 
   /* eslint-disable react/jsx-key */
   const components = [
-    'just some text',
-    <a href="/">&apos;a&apos; tag</a>,
+    <Text>just some text</Text>,
+    <a href="/">
+      <Text>&apos;a&apos; tag</Text>
+    </a>,
 
     <Alert transition="none">Alert</Alert>,
     <Avatar name="Avatar" />,
@@ -140,9 +142,15 @@ export default function TooltipPage() {
       ContextView
     </ContextView>,
     <Flex withVisualDebug margin="none none small">
-      <Flex.Item>Flex One</Flex.Item>
-      <Flex.Item>Flex Two</Flex.Item>
-      <Flex.Item>Flex Three</Flex.Item>
+      <Flex.Item>
+        <Text>Flex One</Text>
+      </Flex.Item>
+      <Flex.Item>
+        <Text>Flex Two</Text>
+      </Flex.Item>
+      <Flex.Item>
+        <Text>Flex Three</Text>
+      </Flex.Item>
     </Flex>,
     <FormField id="foo" label="This is a FormField" width="200px">
       <input style={{ display: 'block', width: '100%' }} />
@@ -201,7 +209,9 @@ export default function TooltipPage() {
     <Text>Text component</Text>,
     <TextArea label="This is a TextArea" />,
     <TextInput renderLabel="This is a TextInput" />,
-    <View>This is a View</View>
+    <View>
+      <Text>This is a View</Text>
+    </View>
   ]
   /* eslint-enable react/jsx-key */
   return (
diff --git a/regression-test/src/app/view/page.tsx b/regression-test/src/app/view/page.tsx
index 00c245d64f..26727963cb 100644
--- a/regression-test/src/app/view/page.tsx
+++ b/regression-test/src/app/view/page.tsx
@@ -24,9 +24,10 @@
 
 'use client'
 import React from 'react'
-import { View as vw } from '@instructure/ui/latest'
+import { View as vw, Text as tx } from '@instructure/ui/latest'
 
 const View = vw as any
+const Text = tx as any
 
 export default function ViewPage() {
   return (
@@ -252,7 +253,7 @@ export default function ViewPage() {
             margin="large auto"
             padding="0 small 0 0"
           >
-            Inline block A
+            <Text>Inline block A</Text>
           </View>
           <View
             as="div"
@@ -261,21 +262,23 @@ export default function ViewPage() {
             margin="large auto"
             padding="0 0 0 small"
           >
-            Inline block B
+            <Text>Inline block B</Text>
           </View>
         </View>
         <section style={{ margin: '15px' }}>
           <View as="header" margin="0 0 medium" withVisualDebug>
-            Some header content
+            <Text>Some header content</Text>
           </View>
-          <div>Paragraph-like content</div>
+          <div>
+            <Text>Paragraph-like content</Text>
+          </div>
         </section>
       </section>
 
       {/* Current (era-3) spacing tokens via dot-path notation */}
       <section>
         <View as="div" margin="general.spaceMd" padding="small" withVisualDebug>
-          margin=&quot;general.spaceMd&quot;
+          <Text>margin=&quot;general.spaceMd&quot;</Text>
         </View>
         <View
           as="div"
@@ -283,13 +286,13 @@ export default function ViewPage() {
           padding="small"
           withVisualDebug
         >
-          margin=&quot;general.spaceLg auto general.spaceXl&quot;
+          <Text>margin=&quot;general.spaceLg auto general.spaceXl&quot;</Text>
         </View>
         <View as="div" margin="gap.cards.md" padding="small" withVisualDebug>
-          margin=&quot;gap.cards.md&quot;
+          <Text>margin=&quot;gap.cards.md&quot;</Text>
         </View>
         <View as="div" margin="padding.card.lg" padding="small" withVisualDebug>
-          margin=&quot;padding.card.lg&quot;
+          <Text>margin=&quot;padding.card.lg&quot;</Text>
         </View>
       </section>
     </main>