fix(a11y): add wcag-aa color contrast (#1170)

userquin · danielroe · web-flow · commit 5b126986722d · 2026-02-10T14:49:49.000Z
Co-authored-by: Daniel Roe &lt;daniel@roe.dev&gt;
diff --git a/app/components/Compare/ReplacementSuggestion.vue b/app/components/Compare/ReplacementSuggestion.vue
@@ -25,7 +25,7 @@ const docUrl = computed(() => {
     class="flex items-start gap-2 px-3 py-2 rounded-lg text-sm"
     :class="
       variant === 'nodep'
-        ? 'bg-amber-500/10 border border-amber-600/30 text-amber-700 dark:text-amber-400'
+        ? 'bg-amber-500/10 border border-amber-600/30 text-amber-800 dark:text-amber-400'
         : 'bg-blue-500/10 border border-blue-600/30 text-blue-700 dark:text-blue-400'
     "
   >
diff --git a/app/components/DependencyPathPopup.vue b/app/components/DependencyPathPopup.vue
@@ -68,7 +68,7 @@ function parsePackageString(pkg: string): { name: string; version: string } {
     <!-- Path badge button -->
     <button
       type="button"
-      class="path-badge font-mono text-3xs px-1.5 py-0.5 rounded bg-amber-500/10 border border-amber-500/30 text-amber-700 dark:text-amber-400 transition-all duration-200 ease-out whitespace-nowrap flex items-center gap-1 hover:bg-amber-500/20 hover:border-amber-500/50"
+      class="path-badge font-mono text-3xs px-1.5 py-0.5 rounded bg-amber-500/10 border border-amber-500/30 text-amber-800 dark:text-amber-400 transition-all duration-200 ease-out whitespace-nowrap flex items-center gap-1 hover:bg-amber-500/20 hover:border-amber-500/50"
       :aria-expanded="isOpen"
       @click.stop="togglePopup"
     >
diff --git a/app/components/Package/Dependencies.vue b/app/components/Package/Dependencies.vue
@@ -117,7 +117,7 @@ const numberFormatter = useNumberFormatter()
             <LinkBase
               v-if="getDeprecatedDepInfo(dep)"
               :to="packageRoute(dep, getDeprecatedDepInfo(dep)!.version)"
-              class="shrink-0 text-purple-500"
+              class="shrink-0 text-purple-700 dark:text-purple-500"
               :title="getDeprecatedDepInfo(dep)!.message"
               classicon="i-carbon:warning-hex"
             >
diff --git a/app/components/Package/MetricsBadges.vue b/app/components/Package/MetricsBadges.vue
@@ -63,7 +63,7 @@ const typesHref = computed(() => {
           variant="button-secondary"
           size="small"
           :to="typesHref"
-          classicon="i-carbon-checkmark"
+          classicon="i-carbon:checkmark"
         >
           {{ $t('package.metrics.types_label') }}
         </LinkBase>
@@ -73,10 +73,10 @@ const typesHref = computed(() => {
           :tabindex="0"
           :classicon="
             isLoading
-              ? 'i-carbon-circle-dash motion-safe:animate-spin'
+              ? 'i-carbon:circle-dash motion-safe:animate-spin'
               : hasTypes
-                ? 'i-carbon-checkmark'
-                : 'i-carbon-close'
+                ? 'i-carbon:checkmark'
+                : 'i-carbon:close'
           "
         >
           {{ $t('package.metrics.types_label') }}
@@ -95,10 +95,10 @@ const typesHref = computed(() => {
           :variant="hasEsm && !isLoading ? 'default' : 'ghost'"
           :classicon="
             isLoading
-              ? 'i-carbon-circle-dash motion-safe:animate-spin'
+              ? 'i-carbon:circle-dash motion-safe:animate-spin'
               : hasEsm
-                ? 'i-carbon-checkmark'
-                : 'i-carbon-close'
+                ? 'i-carbon:checkmark'
+                : 'i-carbon:close'
           "
         >
           ESM
@@ -113,7 +113,7 @@ const typesHref = computed(() => {
           tabindex="0"
           :variant="isLoading ? 'ghost' : 'default'"
           :classicon="
-            isLoading ? 'i-carbon-circle-dash motion-safe:animate-spin' : 'i-carbon-checkmark'
+            isLoading ? 'i-carbon:circle-dash motion-safe:animate-spin' : 'i-carbon:checkmark'
           "
         >
           CJS
diff --git a/app/components/Package/Replacement.vue b/app/components/Package/Replacement.vue
@@ -18,7 +18,7 @@ const docPath = computed(() => {
 
 <template>
   <div
-    class="border border-amber-600/40 bg-amber-500/10 rounded-lg px-3 py-2 text-base text-amber-700 dark:text-amber-400"
+    class="border border-amber-600/40 bg-amber-500/10 rounded-lg px-3 py-2 text-base text-amber-800 dark:text-amber-400"
   >
     <h2 class="font-medium mb-1 flex items-center gap-2">
       <span class="i-carbon-idea w-4 h-4" aria-hidden="true" />
diff --git a/app/components/Package/Versions.vue b/app/components/Package/Versions.vue
@@ -359,7 +359,9 @@ function getTagVersions(tag: string): VersionDisplay[] {
                 block
                 class="text-sm"
                 :class="
-                  row.primaryVersion.deprecated ? 'text-red-400 hover:text-red-300' : undefined
+                  row.primaryVersion.deprecated
+                    ? 'text-red-800 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300'
+                    : undefined
                 "
                 :title="
                   row.primaryVersion.deprecated
@@ -415,7 +417,11 @@ function getTagVersions(tag: string): VersionDisplay[] {
                 :to="versionRoute(v.version)"
                 block
                 class="text-xs"
-                :class="v.deprecated ? 'text-red-400 hover:text-red-300' : undefined"
+                :class="
+                  v.deprecated
+                    ? 'text-red-800 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300'
+                    : undefined
+                "
                 :title="
                   v.deprecated
                     ? $t('package.versions.deprecated_title', { version: v.version })
@@ -514,7 +520,9 @@ function getTagVersions(tag: string): VersionDisplay[] {
                 block
                 class="text-xs"
                 :class="
-                  row.primaryVersion.deprecated ? 'text-red-400 hover:text-red-300' : undefined
+                  row.primaryVersion.deprecated
+                    ? 'text-red-800 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300'
+                    : undefined
                 "
                 :title="
                   row.primaryVersion.deprecated
@@ -588,7 +596,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                       class="text-xs"
                       :class="
                         group.versions[0]?.deprecated
-                          ? 'text-red-400 hover:text-red-300'
+                          ? 'text-red-800 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300'
                           : undefined
                       "
                       :title="
@@ -649,7 +657,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                       class="text-xs ms-6"
                       :class="
                         group.versions[0]?.deprecated
-                          ? 'text-red-400 hover:text-red-300'
+                          ? 'text-red-800 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300'
                           : undefined
                       "
                       :title="
@@ -707,7 +715,11 @@ function getTagVersions(tag: string): VersionDisplay[] {
                       :to="versionRoute(v.version)"
                       block
                       class="text-xs"
-                      :class="v.deprecated ? 'text-red-400 hover:text-red-300' : undefined"
+                      :class="
+                        v.deprecated
+                          ? 'text-red-800 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300'
+                          : undefined
+                      "
                       :title="
                         v.deprecated
                           ? $t('package.versions.deprecated_title', { version: v.version })
diff --git a/app/components/Package/VulnerabilityTree.vue b/app/components/Package/VulnerabilityTree.vue
@@ -21,7 +21,7 @@ const hasVulnerabilities = computed(
 )
 
 // Banner - amber for better light mode contrast
-const bannerColor = 'border-amber-600/40 bg-amber-500/10 text-amber-700 dark:text-amber-400'
+const bannerColor = 'border-amber-600/40 bg-amber-500/10 text-amber-800 dark:text-amber-400'
 
 const severityLabels = computed(() => ({
   critical: $t('package.vulnerabilities.severity.critical'),
@@ -100,7 +100,7 @@ function getDepthStyle(depth: string | undefined) {
           </span>
         </span>
         <span class="flex items-center gap-2 shrink-0">
-          <span class="text-xs opacity-80 hidden sm:inline">{{ summaryText }}</span>
+          <span class="text-xs op-90 dark:op-80 hidden sm:inline">{{ summaryText }}</span>
           <span
             class="i-carbon:chevron-down w-4 h-4 transition-transform duration-200"
             :class="{ 'rotate-180': isExpanded }"
diff --git a/app/components/Tag/Static.vue b/app/components/Tag/Static.vue
@@ -13,8 +13,8 @@ const props = withDefaults(
 <template>
   <component
     :is="as"
-    class="bg-bg-muted text-fg-muted inline-flex gap-x-1 items-center justify-center font-mono border border-transparent rounded-md text-xs px-2 py-0.5"
-    :class="{ 'opacity-40': variant === 'ghost' }"
+    class="bg-bg-muted text-fg-muted inline-flex gap-x-1 items-center justify-center font-mono border border-gray-400 dark:border-gray-500 rounded-md text-xs px-2 py-0.5"
+    :class="{ 'opacity-80 border-dashed': variant === 'ghost' }"
   >
     <span v-if="classicon" class="size-[1em]" :class="classicon" aria-hidden="true" />
     <slot />
diff --git a/app/pages/index.vue b/app/pages/index.vue
@@ -71,7 +71,6 @@ defineOgImageComponent('Default', {
         >
           {{ $t('tagline') }}
         </p>
-
         <search
           class="w-full max-w-xl motion-safe:animate-slide-up motion-safe:animate-fill-both"
           style="animation-delay: 0.2s"
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
@@ -803,7 +803,7 @@ onKeyStroke(
 
         <div
           v-if="deprecationNotice"
-          class="border border-red-400 bg-red-400/10 rounded-lg px-3 py-2 text-base text-red-400"
+          class="border border-red-700 dark:border-red-400 bg-red-400/10 rounded-lg px-3 py-2 text-base text-red-700 dark:text-red-400"
         >
           <h2 class="font-medium mb-2">
             {{
@@ -954,7 +954,7 @@ onKeyStroke(
                 />
               </span>
               <span v-else-if="vulnTreeStatus === 'success'">
-                <span v-if="hasVulnerabilities" class="text-amber-500">
+                <span v-if="hasVulnerabilities" class="text-amber-700 dark:text-amber-500">
                   {{ numberFormatter.format(vulnCount) }}
                 </span>
                 <span v-else class="inline-flex items-center gap-1 text-fg-muted">
diff --git a/app/utils/npm/outdated-dependencies.ts b/app/utils/npm/outdated-dependencies.ts
@@ -71,12 +71,13 @@ export function getVersionClass(info: OutdatedDependencyInfo | undefined): strin
   if (!info) return 'text-fg-subtle'
   // Green for up-to-date (e.g. "latest" constraint)
   if (info.majorsBehind === 0 && info.minorsBehind === 0 && info.resolved === info.latest) {
-    return 'text-green-500 cursor-help'
+    return 'text-green-700 dark:text-green-500 cursor-help'
   }
   // Red for major versions behind
-  if (info.majorsBehind > 0) return 'text-red-500 cursor-help'
+  if (info.majorsBehind > 0) return 'text-red-700 dark:text-red-500 cursor-help'
+  // if (info.majorsBehind > 0) return 'text-#db0000 dark:text-red-500 cursor-help'
   // Orange for minor versions behind
-  if (info.minorsBehind > 0) return 'text-orange-500 cursor-help'
+  if (info.minorsBehind > 0) return 'text-orange-700 dark:text-orange-500 cursor-help'
   // Yellow for patch versions behind
-  return 'text-yellow-500 cursor-help'
+  return 'text-yellow-700 dark:text-yellow-500 cursor-help'
 }
diff --git a/server/utils/shiki.ts b/server/utils/shiki.ts
@@ -1,12 +1,36 @@
+import type { ThemeRegistration } from 'shiki'
 import { createHighlighterCore, type HighlighterCore } from 'shiki/core'
 import { createJavaScriptRegexEngine } from 'shiki/engine/javascript'
 
 let highlighter: HighlighterCore | null = null
 
+function replaceThemeColors(
+  theme: ThemeRegistration,
+  replacements: Record<string, string>,
+): ThemeRegistration {
+  let themeString = JSON.stringify(theme)
+  for (const [oldColor, newColor] of Object.entries(replacements)) {
+    themeString = themeString.replaceAll(oldColor, newColor)
+    themeString = themeString.replaceAll(oldColor.toLowerCase(), newColor)
+    themeString = themeString.replaceAll(oldColor.toUpperCase(), newColor)
+  }
+  return JSON.parse(themeString)
+}
+
 export async function getShikiHighlighter(): Promise<HighlighterCore> {
   if (!highlighter) {
     highlighter = await createHighlighterCore({
-      themes: [import('@shikijs/themes/github-dark'), import('@shikijs/themes/github-light')],
+      themes: [
+        import('@shikijs/themes/github-dark'),
+        import('@shikijs/themes/github-light').then(t =>
+          replaceThemeColors(t.default ?? t, {
+            '#22863A': '#227436', // green
+            '#E36209': '#BA4D02', // orange
+            '#D73A49': '#CD3443', // red
+            '#B31D28': '#AC222F', // red
+          }),
+        ),
+      ],
       langs: [
         // Core web languages
         import('@shikijs/langs/javascript'),
diff --git a/shared/utils/severity.ts b/shared/utils/severity.ts
@@ -7,21 +7,22 @@ import { SEVERITY_LEVELS } from '../types'
  * Color classes for severity levels (banner style)
  */
 export const SEVERITY_COLORS: Record<OsvSeverityLevel, string> = {
-  critical: 'text-red-500 bg-red-500/10 border-red-500/50',
-  high: 'text-red-400 bg-red-500/10 border-red-500/30',
-  moderate: 'text-orange-400 bg-orange-500/10 border-orange-500/30',
-  low: 'text-yellow-400 bg-yellow-500/10 border-yellow-500/30',
+  critical: 'text-red-700 dark:text-red-500 bg-red-800/10 dark:bg-red-500/10 border-red-500/50',
+  high: 'text-red-800 dark:text-red-400 bg-red-800/10 dark:bg-red-500/10 border-red-500/30',
+  moderate:
+    'text-orange-800 dark:text-orange-400 bg-orange-600/10 dark:bg-orange-500/10 border-orange-500/30',
+  low: 'text-yellow-700 dark:text-yellow-400 bg-yellow-500/10 border-yellow-500/30',
   unknown: 'text-fg-muted bg-bg-subtle border-border',
 }
 
 /**
  * Color classes for inline severity indicators
  */
 export const SEVERITY_TEXT_COLORS: Record<OsvSeverityLevel, string> = {
-  critical: 'text-red-500',
-  high: 'text-orange-500',
-  moderate: 'text-yellow-500',
-  low: 'text-blue-500',
+  critical: 'text-red-700 dark:text-red-500',
+  high: 'text-orange-700 dark:text-orange-500',
+  moderate: 'text-yellow-700 dark:text-yellow-500',
+  low: 'text-blue-700 dark:text-blue-500',
   unknown: 'text-fg-subtle',
 }
 
diff --git a/test/fixtures/npm-registry/packuments/nuxt.json b/test/fixtures/npm-registry/packuments/nuxt.json
diff --git a/test/nuxt/components/PackageVersions.spec.ts b/test/nuxt/components/PackageVersions.spec.ts

Original file line number	Diff line number	Diff line change
`@@ -25,7 +25,7 @@ const docUrl = computed(() => {`
`25`	`25`	`class="flex items-start gap-2 px-3 py-2 rounded-lg text-sm"`
`26`	`26`	`:class="`
`27`	`27`	`variant === 'nodep'`
`28`		`- ? 'bg-amber-500/10 border border-amber-600/30 text-amber-700 dark:text-amber-400'`
	`28`	`+ ? 'bg-amber-500/10 border border-amber-600/30 text-amber-800 dark:text-amber-400'`
`29`	`29`	`: 'bg-blue-500/10 border border-blue-600/30 text-blue-700 dark:text-blue-400'`
`30`	`30`	`"`
`31`	`31`	`>`
Original file line number	Diff line number	Diff line change
`@@ -68,7 +68,7 @@ function parsePackageString(pkg: string): { name: string; version: string } {`
`68`	`68`	`<!-- Path badge button -->`
`69`	`69`	`<button`
`70`	`70`	`type="button"`
`71`		`- class="path-badge font-mono text-3xs px-1.5 py-0.5 rounded bg-amber-500/10 border border-amber-500/30 text-amber-700 dark:text-amber-400 transition-all duration-200 ease-out whitespace-nowrap flex items-center gap-1 hover:bg-amber-500/20 hover:border-amber-500/50"`
	`71`	`+ class="path-badge font-mono text-3xs px-1.5 py-0.5 rounded bg-amber-500/10 border border-amber-500/30 text-amber-800 dark:text-amber-400 transition-all duration-200 ease-out whitespace-nowrap flex items-center gap-1 hover:bg-amber-500/20 hover:border-amber-500/50"`
`72`	`72`	`:aria-expanded="isOpen"`
`73`	`73`	`@click.stop="togglePopup"`
`74`	`74`	`>`
Original file line number	Diff line number	Diff line change
`@@ -117,7 +117,7 @@ const numberFormatter = useNumberFormatter()`
`117`	`117`	`<LinkBase`
`118`	`118`	`v-if="getDeprecatedDepInfo(dep)"`
`119`	`119`	`:to="packageRoute(dep, getDeprecatedDepInfo(dep)!.version)"`
`120`		`- class="shrink-0 text-purple-500"`
	`120`	`+ class="shrink-0 text-purple-700 dark:text-purple-500"`
`121`	`121`	`:title="getDeprecatedDepInfo(dep)!.message"`
`122`	`122`	`classicon="i-carbon:warning-hex"`
`123`	`123`	`>`
Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@ const docPath = computed(() => {`
`18`	`18`
`19`	`19`	`<template>`
`20`	`20`	`<div`
`21`		`- class="border border-amber-600/40 bg-amber-500/10 rounded-lg px-3 py-2 text-base text-amber-700 dark:text-amber-400"`
	`21`	`+ class="border border-amber-600/40 bg-amber-500/10 rounded-lg px-3 py-2 text-base text-amber-800 dark:text-amber-400"`
`22`	`22`	`>`
`23`	`23`	`<h2 class="font-medium mb-1 flex items-center gap-2">`
`24`	`24`	`<span class="i-carbon-idea w-4 h-4" aria-hidden="true" />`
Original file line number	Diff line number	Diff line change
`@@ -71,7 +71,6 @@ defineOgImageComponent('Default', {`
`71`	`71`	`>`
`72`	`72`	`{{ $t('tagline') }}`
`73`	`73`	`</p>`
`74`		`-`
`75`	`74`	`<search`
`76`	`75`	`class="w-full max-w-xl motion-safe:animate-slide-up motion-safe:animate-fill-both"`
`77`	`76`	`style="animation-delay: 0.2s"`