diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index d8fcc41d1d..c13a1354eb 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -227,7 +227,32 @@ describe('featureName', () => {
 > [!TIP]
 > If you need access to the Nuxt context in your unit or component test, place your test in the `test/nuxt/` directory and run with `pnpm test:nuxt`
 
-### E2e tests
+### Component accessibility tests
+
+All new components should have a basic accessibility test in `test/nuxt/components.spec.ts`. These tests use [axe-core](https://github.com/dequelabs/axe-core) to catch common accessibility violations.
+
+```typescript
+import MyComponent from '~/components/MyComponent.vue'
+
+describe('MyComponent', () => {
+  it('should have no accessibility violations', async () => {
+    const component = await mountSuspended(MyComponent, {
+      props: {
+        /* required props */
+      },
+    })
+    const results = await runAxe(component)
+    expect(results.violations).toEqual([])
+  })
+})
+```
+
+The `runAxe` helper handles DOM isolation and disables page-level rules that don't apply to isolated component testing.
+
+> [!IMPORTANT]
+> Just because axe-core doesn't find any obvious issues, it does not mean a component is accessible. Please do additional checks and use best practices.
+
+### End to end tests
 
 Write end-to-end tests using Playwright:
 
diff --git a/app/app.vue b/app/app.vue
index 040daa6114..22bd00681d 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -285,7 +285,7 @@ button {
   border-left: 2px solid #262626;
   padding-left: 1rem;
   margin: 1.5rem 0;
-  color: #666666;
+  color: #8a8a8a;
   font-style: italic;
 }
 
diff --git a/app/components/CodeViewer.vue b/app/components/CodeViewer.vue
index 9d5d9c5229..b3b95d2ee0 100644
--- a/app/components/CodeViewer.vue
+++ b/app/components/CodeViewer.vue
@@ -66,6 +66,7 @@ watch(
         :id="`L${lineNum}`"
         :key="lineNum"
         :href="`#L${lineNum}`"
+        tabindex="-1"
         class="line-number block px-3 py-0 font-mono text-sm leading-6 cursor-pointer transition-colors no-underline"
         :class="[
           isLineSelected(lineNum)
diff --git a/app/components/OgImage/Default.vue b/app/components/OgImage/Default.vue
index 0f2d2521bd..a2f5170c2e 100644
--- a/app/components/OgImage/Default.vue
+++ b/app/components/OgImage/Default.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="h-full w-full flex flex-col justify-center items-center bg-[#0a0a0a] text-[#fafafa]">
     <h1 class="text-6xl font-medium tracking-tight" style="font-family: 'Geist Mono'">
-      <span class="text-[#666666]" style="letter-spacing: -0.1em">./</span> npmx
+      <span class="text-fg-subtle" style="letter-spacing: -0.1em">./</span> npmx
     </h1>
     <h1 class="text-3xl font-medium tracking-tight">a better browser for the npm registry</h1>
 
diff --git a/app/components/OgImage/Package.vue b/app/components/OgImage/Package.vue
index 9d2323bad6..8a180a4df1 100644
--- a/app/components/OgImage/Package.vue
+++ b/app/components/OgImage/Package.vue
@@ -22,7 +22,7 @@ withDefaults(
       {{ name }}
     </h1>
 
-    <div class="flex items-center gap-6 mt-6 text-xl text-[#666666]">
+    <div class="flex items-center gap-6 mt-6 text-xl text-fg-subtle">
       <span>v{{ version }}</span>
       <span v-if="downloads">{{ downloads }}/wk</span>
       <span v-if="license">{{ license }}</span>
diff --git a/app/components/PackageDownloadStats.vue b/app/components/PackageDownloadStats.vue
index 20b9356133..8926717bb2 100644
--- a/app/components/PackageDownloadStats.vue
+++ b/app/components/PackageDownloadStats.vue
@@ -59,7 +59,7 @@ const config = computed(() => ({
     title: {
       text: lastDatapoint.value,
       fontSize: 12,
-      color: '#666666',
+      color: '#8A8A8A',
       bold: false,
     },
     verticalIndicator: {
diff --git a/package.json b/package.json
index 6e02c01f87..4465fca258 100644
--- a/package.json
+++ b/package.json
@@ -66,6 +66,7 @@
     "@vitest/browser-playwright": "^4.0.18",
     "@vitest/coverage-v8": "^4.0.18",
     "@vue/test-utils": "2.4.6",
+    "axe-core": "^4.11.1",
     "happy-dom": "20.3.5",
     "lint-staged": "16.2.7",
     "marked": "17.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 53d9a35cfe..935e465b4e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -129,6 +129,9 @@ importers:
       '@vue/test-utils':
         specifier: 2.4.6
         version: 2.4.6
+      axe-core:
+        specifier: ^4.11.1
+        version: 4.11.1
       happy-dom:
         specifier: 20.3.5
         version: 20.3.5
diff --git a/test/nuxt/components.spec.ts b/test/nuxt/components.spec.ts
new file mode 100644
index 0000000000..f663581c97
--- /dev/null
+++ b/test/nuxt/components.spec.ts
@@ -0,0 +1,802 @@
+import type { AxeResults, RunOptions } from 'axe-core'
+import type { VueWrapper } from '@vue/test-utils'
+import 'axe-core'
+import { afterEach, describe, expect, it } from 'vitest'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+
+// axe-core is a UMD module that exposes itself as window.axe in the browser
+declare const axe: { run: (context: Element, options?: RunOptions) => Promise<AxeResults> }
+
+// Track mounted containers for cleanup
+const mountedContainers: HTMLElement[] = []
+
+/**
+ * Run axe accessibility audit on a mounted component.
+ * Mounts the component in an isolated container to avoid cross-test pollution.
+ */
+async function runAxe(wrapper: VueWrapper): Promise<AxeResults> {
+  // Create an isolated container for this test
+  const container = document.createElement('div')
+  container.id = `test-container-${Date.now()}`
+  document.body.appendChild(container)
+  mountedContainers.push(container)
+
+  // Clone the element into our isolated container
+  const el = wrapper.element.cloneNode(true) as HTMLElement
+  container.appendChild(el)
+
+  // Run axe only on the isolated container
+  return axe.run(container, {
+    // Disable rules that don't apply to isolated component testing
+    rules: {
+      // These rules check page-level concerns that don't apply to isolated components
+      'landmark-one-main': { enabled: false },
+      'region': { enabled: false },
+      'page-has-heading-one': { enabled: false },
+      // Duplicate landmarks are expected when testing multiple header/footer components
+      'landmark-no-duplicate-banner': { enabled: false },
+      'landmark-no-duplicate-contentinfo': { enabled: false },
+      'landmark-no-duplicate-main': { enabled: false },
+    },
+  })
+}
+
+// Clean up mounted containers after each test
+afterEach(() => {
+  for (const container of mountedContainers) {
+    container.remove()
+  }
+  mountedContainers.length = 0
+})
+
+import AppHeader from '~/components/AppHeader.vue'
+import AppFooter from '~/components/AppFooter.vue'
+import AppTooltip from '~/components/AppTooltip.vue'
+import LoadingSpinner from '~/components/LoadingSpinner.vue'
+import JsrBadge from '~/components/JsrBadge.vue'
+import ProvenanceBadge from '~/components/ProvenanceBadge.vue'
+import MarkdownText from '~/components/MarkdownText.vue'
+import PackageSkeleton from '~/components/PackageSkeleton.vue'
+import PackageCard from '~/components/PackageCard.vue'
+import PackageDownloadStats from '~/components/PackageDownloadStats.vue'
+import PackagePlaygrounds from '~/components/PackagePlaygrounds.vue'
+import PackageDependencies from '~/components/PackageDependencies.vue'
+import PackageVersions from '~/components/PackageVersions.vue'
+import PackageListControls from '~/components/PackageListControls.vue'
+import PackageMaintainers from '~/components/PackageMaintainers.vue'
+import CodeViewer from '~/components/CodeViewer.vue'
+import CodeDirectoryListing from '~/components/CodeDirectoryListing.vue'
+import CodeFileTree from '~/components/CodeFileTree.vue'
+import UserCombobox from '~/components/UserCombobox.vue'
+import ConnectorModal from '~/components/ConnectorModal.vue'
+import ConnectorStatusServer from '~/components/ConnectorStatus.server.vue'
+import ConnectorStatusClient from '~/components/ConnectorStatus.client.vue'
+import ClaimPackageModal from '~/components/ClaimPackageModal.vue'
+import OperationsQueue from '~/components/OperationsQueue.vue'
+import PackageList from '~/components/PackageList.vue'
+import PackageMetricsBadges from '~/components/PackageMetricsBadges.vue'
+import PackageVulnerabilities from '~/components/PackageVulnerabilities.vue'
+import PackageAccessControls from '~/components/PackageAccessControls.vue'
+import OrgMembersPanel from '~/components/OrgMembersPanel.vue'
+import OrgTeamsPanel from '~/components/OrgTeamsPanel.vue'
+import CodeMobileTreeDrawer from '~/components/CodeMobileTreeDrawer.vue'
+
+describe('component accessibility audits', () => {
+  describe('AppHeader', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(AppHeader)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations without logo', async () => {
+      const component = await mountSuspended(AppHeader, {
+        props: { showLogo: false },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations without connector', async () => {
+      const component = await mountSuspended(AppHeader, {
+        props: { showConnector: false },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('AppFooter', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(AppFooter)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('AppTooltip', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(AppTooltip, {
+        props: { text: 'Tooltip content' },
+        slots: { default: '<button>Trigger</button>' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('LoadingSpinner', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(LoadingSpinner)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with custom text', async () => {
+      const component = await mountSuspended(LoadingSpinner, {
+        props: { text: 'Fetching data...' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('JsrBadge', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(JsrBadge, {
+        props: { url: 'https://jsr.io/@std/fs' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations in compact mode', async () => {
+      const component = await mountSuspended(JsrBadge, {
+        props: { url: 'https://jsr.io/@std/fs', compact: true },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('ProvenanceBadge', () => {
+    it('should have no accessibility violations without link', async () => {
+      const component = await mountSuspended(ProvenanceBadge)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with link', async () => {
+      const component = await mountSuspended(ProvenanceBadge, {
+        props: {
+          provider: 'github',
+          packageName: 'vue',
+          version: '3.0.0',
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations in compact mode', async () => {
+      const component = await mountSuspended(ProvenanceBadge, {
+        props: {
+          provider: 'github',
+          packageName: 'vue',
+          version: '3.0.0',
+          compact: true,
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('MarkdownText', () => {
+    it('should have no accessibility violations with plain text', async () => {
+      const component = await mountSuspended(MarkdownText, {
+        props: { text: 'Simple text' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with formatted text', async () => {
+      const component = await mountSuspended(MarkdownText, {
+        props: { text: '**Bold** and *italic* and `code`' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('PackageSkeleton', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(PackageSkeleton)
+      const results = await runAxe(component)
+      // PackageSkeleton uses empty h1/h2 elements as skeleton placeholders.
+      // These are expected since the component represents a loading state.
+      // The real content will have proper heading text when loaded.
+      // Filter out 'empty-heading' violations as they're expected for skeleton components.
+      const violations = results.violations.filter(v => v.id !== 'empty-heading')
+      expect(violations).toEqual([])
+    })
+  })
+
+  describe('PackageCard', () => {
+    const mockResult = {
+      package: {
+        name: 'vue',
+        version: '3.5.0',
+        description: 'The progressive JavaScript framework',
+        date: '2024-01-15T00:00:00.000Z',
+        keywords: ['framework', 'frontend', 'reactive'],
+        links: {},
+        publisher: {
+          username: 'yyx990803',
+        },
+      },
+      score: {
+        final: 0.9,
+        detail: { quality: 0.9, popularity: 0.9, maintenance: 0.9 },
+      },
+      searchScore: 100000,
+    }
+
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(PackageCard, {
+        props: { result: mockResult },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with h2 heading', async () => {
+      const component = await mountSuspended(PackageCard, {
+        props: { result: mockResult, headingLevel: 'h2' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations showing publisher', async () => {
+      const component = await mountSuspended(PackageCard, {
+        props: { result: mockResult, showPublisher: true },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('PackageDownloadStats', () => {
+    it('should have no accessibility violations without data', async () => {
+      const component = await mountSuspended(PackageDownloadStats)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with download data', async () => {
+      const downloads = [
+        { downloads: 1000, weekStart: '2024-01-01', weekEnd: '2024-01-07' },
+        { downloads: 1200, weekStart: '2024-01-08', weekEnd: '2024-01-14' },
+        { downloads: 1500, weekStart: '2024-01-15', weekEnd: '2024-01-21' },
+      ]
+      const component = await mountSuspended(PackageDownloadStats, {
+        props: { downloads },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('PackagePlaygrounds', () => {
+    it('should have no accessibility violations with single link', async () => {
+      const links = [
+        {
+          provider: 'stackblitz',
+          providerName: 'StackBlitz',
+          label: 'Open in StackBlitz',
+          url: 'https://stackblitz.com/example',
+        },
+      ]
+      const component = await mountSuspended(PackagePlaygrounds, {
+        props: { links },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with multiple links', async () => {
+      const links = [
+        {
+          provider: 'stackblitz',
+          providerName: 'StackBlitz',
+          label: 'Open in StackBlitz',
+          url: 'https://stackblitz.com/example',
+        },
+        {
+          provider: 'codesandbox',
+          providerName: 'CodeSandbox',
+          label: 'Open in CodeSandbox',
+          url: 'https://codesandbox.io/example',
+        },
+      ]
+      const component = await mountSuspended(PackagePlaygrounds, {
+        props: { links },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with empty links', async () => {
+      const component = await mountSuspended(PackagePlaygrounds, {
+        props: { links: [] },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('PackageDependencies', () => {
+    it('should have no accessibility violations without dependencies', async () => {
+      const component = await mountSuspended(PackageDependencies, {
+        props: { packageName: 'test-package' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with dependencies', async () => {
+      const component = await mountSuspended(PackageDependencies, {
+        props: {
+          packageName: 'test-package',
+          dependencies: {
+            vue: '^3.0.0',
+            lodash: '^4.17.0',
+          },
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with peer dependencies', async () => {
+      const component = await mountSuspended(PackageDependencies, {
+        props: {
+          packageName: 'test-package',
+          peerDependencies: {
+            vue: '^3.0.0',
+          },
+          peerDependenciesMeta: {
+            vue: { optional: true },
+          },
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('PackageVersions', () => {
+    it('should have no accessibility violations', async () => {
+      // Minimal mock data satisfying PackumentVersion type
+      const mockVersion = {
+        _id: 'vue@3.5.0',
+        _npmVersion: '10.0.0',
+        name: 'vue',
+        version: '3.5.0',
+        dist: { tarball: '', shasum: '', signatures: [] },
+      }
+      const component = await mountSuspended(PackageVersions, {
+        props: {
+          packageName: 'vue',
+          versions: {
+            '3.5.0': mockVersion,
+            '3.4.0': { ...mockVersion, _id: 'vue@3.4.0', version: '3.4.0' },
+          },
+          distTags: {
+            latest: '3.5.0',
+            next: '3.4.0',
+          },
+          time: {
+            '3.5.0': '2024-01-15T00:00:00.000Z',
+            '3.4.0': '2024-01-01T00:00:00.000Z',
+          },
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('PackageListControls', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(PackageListControls, {
+        props: {
+          filter: '',
+          sort: 'downloads',
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with filter active', async () => {
+      const component = await mountSuspended(PackageListControls, {
+        props: {
+          filter: 'vue',
+          sort: 'downloads',
+          totalCount: 100,
+          filteredCount: 10,
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('PackageMaintainers', () => {
+    it('should have no accessibility violations without maintainers', async () => {
+      const component = await mountSuspended(PackageMaintainers, {
+        props: { packageName: 'vue' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with maintainers', async () => {
+      const component = await mountSuspended(PackageMaintainers, {
+        props: {
+          packageName: 'vue',
+          maintainers: [
+            { name: 'yyx990803', email: 'evan@vuejs.org' },
+            { name: 'posva', email: 'posva@example.com' },
+          ],
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('CodeViewer', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(CodeViewer, {
+        props: {
+          html: '<pre><code><span class="line">const x = 1;</span></code></pre>',
+          lines: 1,
+          selectedLines: null,
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with selected lines', async () => {
+      const component = await mountSuspended(CodeViewer, {
+        props: {
+          html: '<pre><code><span class="line">const x = 1;</span><span class="line">const y = 2;</span></code></pre>',
+          lines: 2,
+          selectedLines: { start: 1, end: 1 },
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('CodeDirectoryListing', () => {
+    const mockTree = [
+      { name: 'src', type: 'directory' as const, path: 'src', children: [] },
+      { name: 'index.js', type: 'file' as const, path: 'index.js', size: 1024 },
+      { name: 'package.json', type: 'file' as const, path: 'package.json', size: 512 },
+    ]
+
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(CodeDirectoryListing, {
+        props: {
+          tree: mockTree,
+          currentPath: '',
+          baseUrl: '/code/vue',
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with nested path', async () => {
+      const component = await mountSuspended(CodeDirectoryListing, {
+        props: {
+          tree: mockTree,
+          currentPath: 'src',
+          baseUrl: '/code/vue',
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('CodeFileTree', () => {
+    const mockTree = [
+      {
+        name: 'src',
+        type: 'directory' as const,
+        path: 'src',
+        children: [{ name: 'index.ts', type: 'file' as const, path: 'src/index.ts' }],
+      },
+      { name: 'package.json', type: 'file' as const, path: 'package.json' },
+    ]
+
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(CodeFileTree, {
+        props: {
+          tree: mockTree,
+          currentPath: '',
+          baseUrl: '/code/vue',
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with selected file', async () => {
+      const component = await mountSuspended(CodeFileTree, {
+        props: {
+          tree: mockTree,
+          currentPath: 'src/index.ts',
+          baseUrl: '/code/vue',
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('UserCombobox', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(UserCombobox, {
+        props: {
+          suggestions: ['user1', 'user2', 'user3'],
+          label: 'Select a user',
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations when disabled', async () => {
+      const component = await mountSuspended(UserCombobox, {
+        props: {
+          suggestions: ['user1', 'user2'],
+          disabled: true,
+          label: 'Select a user',
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('ConnectorModal', () => {
+    it('should have no accessibility violations when closed', async () => {
+      const component = await mountSuspended(ConnectorModal, {
+        props: { open: false },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations when open (disconnected)', async () => {
+      const component = await mountSuspended(ConnectorModal, {
+        props: { open: true },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('ConnectorStatus.server', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(ConnectorStatusServer)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('ConnectorStatus.client', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(ConnectorStatusClient)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('ClaimPackageModal', () => {
+    it('should have no accessibility violations when closed', async () => {
+      const component = await mountSuspended(ClaimPackageModal, {
+        props: {
+          packageName: 'test-package',
+          open: false,
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations when open', async () => {
+      const component = await mountSuspended(ClaimPackageModal, {
+        props: {
+          packageName: 'test-package',
+          open: true,
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('OperationsQueue', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(OperationsQueue)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('PackageList', () => {
+    const mockResults = [
+      {
+        package: {
+          name: 'vue',
+          version: '3.5.0',
+          description: 'The progressive JavaScript framework',
+          date: '2024-01-15T00:00:00.000Z',
+          keywords: ['framework'],
+          links: {},
+          publisher: { username: 'yyx990803' },
+        },
+        score: { final: 0.9, detail: { quality: 0.9, popularity: 0.9, maintenance: 0.9 } },
+        searchScore: 100000,
+      },
+      {
+        package: {
+          name: 'react',
+          version: '18.2.0',
+          description: 'React is a JavaScript library for building user interfaces.',
+          date: '2024-01-10T00:00:00.000Z',
+          keywords: ['react'],
+          links: {},
+          publisher: { username: 'fb' },
+        },
+        score: { final: 0.9, detail: { quality: 0.9, popularity: 0.9, maintenance: 0.9 } },
+        searchScore: 90000,
+      },
+    ]
+
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(PackageList, {
+        props: { results: mockResults },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with empty results', async () => {
+      const component = await mountSuspended(PackageList, {
+        props: { results: [] },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations when loading', async () => {
+      const component = await mountSuspended(PackageList, {
+        props: {
+          results: mockResults,
+          isLoading: true,
+          hasMore: true,
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('PackageMetricsBadges', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(PackageMetricsBadges, {
+        props: { packageName: 'vue' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with version', async () => {
+      const component = await mountSuspended(PackageMetricsBadges, {
+        props: {
+          packageName: 'vue',
+          version: '3.5.0',
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('PackageVulnerabilities', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(PackageVulnerabilities, {
+        props: {
+          packageName: 'lodash',
+          version: '4.17.21',
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('PackageAccessControls', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(PackageAccessControls, {
+        props: { packageName: '@nuxt/kit' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations for unscoped package', async () => {
+      // Unscoped packages don't show the access controls section
+      const component = await mountSuspended(PackageAccessControls, {
+        props: { packageName: 'vue' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('OrgMembersPanel', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(OrgMembersPanel, {
+        props: { orgName: 'nuxt' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('OrgTeamsPanel', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(OrgTeamsPanel, {
+        props: { orgName: 'nuxt' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('CodeMobileTreeDrawer', () => {
+    const mockTree = [
+      {
+        name: 'src',
+        type: 'directory' as const,
+        path: 'src',
+        children: [{ name: 'index.ts', type: 'file' as const, path: 'src/index.ts' }],
+      },
+      { name: 'package.json', type: 'file' as const, path: 'package.json' },
+    ]
+
+    it('should have no accessibility violations when closed', async () => {
+      const component = await mountSuspended(CodeMobileTreeDrawer, {
+        props: {
+          tree: mockTree,
+          currentPath: '',
+          baseUrl: '/code/vue',
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+})
diff --git a/uno.config.ts b/uno.config.ts
index e420e9a5ed..a9eab583c8 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -39,7 +39,7 @@ export default defineConfig({
       fg: {
         DEFAULT: '#fafafa',
         muted: '#a1a1a1',
-        subtle: '#666666',
+        subtle: '#8A8A8A',
       },
       border: {
         DEFAULT: '#262626',