Fix color-contrast accessibility violation - shiki syntax highlighting and fumadocs-ui muted text

[yamcodes]

Issue

Documentation pages accessibility tests are currently disabled for the color-contrast rule due to violations from syntax highlighting and muted text styling.

Problem

Two main sources of color contrast violations:

1. Shiki syntax highlighting: Code syntax highlighting spans with inline CSS variables (--shiki-light and --shiki-dark) may not always meet the WCAG 2 AA minimum contrast ratio of 4.5:1 in both light and dark themes.

2. Fumadocs-ui muted foreground: Fumadocs-ui uses muted foreground colors for secondary text (e.g., text-fd-muted-foreground, text-sm.text-fd-muted-foreground) that fall slightly below the 4.5:1 contrast threshold. This includes:

   • Code block captions (figcaption.flex-1.truncate)
   • Card descriptions (p.text-fd-muted-foreground)

Impact: SERIOUS accessibility violation

Location

Affects documentation pages:

• Quickstart page (/docs/quickstart)
• Main docs pages (/docs, /docs/examples, /docs/morphs)
• Integration pages (/docs/integrations/vscode, /docs/integrations/jetbrains)

Test files:

• tooling/playwright-www/tests/quickstart.test.ts:192
• tooling/playwright-www/tests/docs-navigation.test.ts:202, 233
• tooling/playwright-www/tests/accessibility.test.ts:208

Current Workaround

The rule is temporarily disabled in accessibility tests:

disableRules: ["color-contrast"]

Potential Solutions

1. Theme color adjustment: Update shiki theme colors to ensure 4.5:1 contrast in both light and dark modes
2. Fumadocs-ui styling override: Override fumadocs-ui muted foreground colors to meet contrast requirements
3. Custom syntax highlighting: Use a custom shiki configuration with higher-contrast color schemes
4. CSS custom properties: Adjust CSS variables for muted foreground colors to improve contrast while maintaining design intent

Related

This is tracked in accessibility tests with:

// TODO: Fix color-contrast - shiki syntax highlighting spans and fumadocs-ui muted foreground text
// Code syntax highlighting uses theme colors that may not always meet 4.5:1 contrast in both themes