Bad text contrast in documentation makes content unreadable

[outslept]

Bug report

Several sections of the documentation in dark theme have text that is physically difficult to read, regardless of the contrast measurement standard used (WCAG 2.0 or APCA).

I understand that Radix Colors uses the APCA algorithm rather than WCAG 2.0 standards, and I'm not questioning the choice of the contrast measurement system. However, the current implementation creates a practical usability problem: text is difficult to read without highlighting it or moving closer to the screen, which is problematic for all users and especially challenging for those with any vision impairments.

I've reviewed previous discussions on this topic (radix-ui/colors#41 (comment) and radix-ui/themes#141 (comment)) and appreciate the thoughtful approach to using APCA. However, this particular case seems to fall outside what would be considered readable by any standard.

Current Behavior

Text in certain documentation sections is nearly invisible in dark mode, creating a genuine usability barrier regardless of which contrast algo is applied.

1. Screenshot from https://www.radix-ui.com/primitives/docs/components/scroll-area with Dark Theme applied (Tabs background is #FFF (white))

2. Screenshot from https://www.achecks.org/apca-accessible-colour-contrast-checker/

Expected behavior

Text should be clearly readable without requiring additional effort (like text highlighting or getting closer to the screen), regardless of the contrast measurement system used.

Reproducible example

1. Visit Radix UI website
2. Switch to dark theme
3. Navigate to ScrollArea component documentation
4. Try to read tag sections with class .styles_Tag__... while sitting at a normal distance from your monitor
5. Notice how you need to either highlight the text or move closer to properly read it (or dome some X effort in something, but this should not take effort to read this?)

Current CSS:

.styles_Tag__... {
    color: var(--mauve-12); // --mauve-12: #eeeef0;
    ...
}

Suggested solution

While respecting the APCA-based approach, adjust the color variables for dark theme to ensure better real-world readability. The need to highlight text or move closer to the screen indicates that the current implementation might need adjustment.

Additional context

If this is considered a significant issue, I can help identify other sections where text readability is compromised in practice, regardless of meeting specific contrast guidelines.

Your environment

Software	Name(s)	Version
Radix Package(s)	n/a (website issue)	n/a
React	n/a	n/a
Browser	Chrome	Latest
Assistive tech	n/a	n/a
Node	n/a	n/a
npm/yarn/pnpm	n/a	n/a
Operating System	Windows 10	22H2