fix(a11y): add wcag-aa color contrast

app/utils/npm/outdated-dependencies.ts

@@ -71,12 +71,12 @@ 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-#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-#bf7c01 dark:text-orange-500 cursor-help'
   // Yellow for patch versions behind
-  return 'text-yellow-500 cursor-help'
+  return 'text-#929220 dark:text-yellow-500 cursor-help'
 }

server/utils/shiki.ts

@@ -1,12 +1,34 @@
+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
+            '#B31D28': '#AC222F', // red
+          }),
+        ),
+      ],
       langs: [
         // Core web languages
         import('@shikijs/langs/javascript'),

shared/utils/severity.ts

@@ -7,20 +7,20 @@ 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',
+  critical: 'text-#db0000 dark:text-red-500 bg-red-500/10 border-red-500/50',
+  high: 'text-#ee0101 dark: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',
+  low: 'text-#929220 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',
+  critical: 'text-#db0000 dark:text-red-500',
+  high: 'text-#bf7c01 dark:text-orange-500',
+  moderate: 'text-#929220 dark:text-yellow-500',
   low: 'text-blue-500',
   unknown: 'text-fg-subtle',
 }