[BUG] Dark mode — file/markdown preview text contrast fails WCAG AA (links & syntax tokens unreadable)
Preflight Checklist
- [x] I have searched existing issues and this hasn't been reported yet
- [x] This is a single bug report (please file separate reports for different bugs)
- [x] I am using the latest version of Claude Code
What's Wrong?
Dark mode — file/markdown preview text contrast fails WCAG AA (links & syntax tokens unreadable)
Product: Claude Code — desktop app (macOS)
App version: 1.12603.1 (3df4fd)
OS: macOS 26.6 (25G5028f)
Theme: Dark mode
Severity: High — accessibility/readability; content is effectively illegible
Summary
In dark mode, the in-app file/document preview panel renders source content with
foreground colors far below a usable contrast ratio against the near-black
background. HTML/template content is effectively unreadable.
Steps to reproduce
- Run Claude Code desktop in dark mode.
- Open a file containing HTML anchors and/or templating tags (e.g. a Django
template such as _nav.html) in the right-hand preview panel.
- Observe the rendered text.
Expected
All text meets WCAG 2.1 AA contrast: >= 4.5:1 for normal text, >= 3:1 for large
text and UI components. Links and syntax/markup tokens stay clearly legible on
the dark background.
Actual
- Hyperlink text and highlighted template spans: dark blue on near-black —
estimated contrast ~2:1 (fails AA).
- Template tags {% ... %} and surrounding markup: dark gray on near-black —
estimated contrast ~1.5-2:1 (fails AA).
- Net effect: the content cannot be read without leaving dark mode.
(Ratios estimated from a screenshot; exact values to be confirmed against the
actual palette.)
Scope
Appears systemic to the dark theme, not a single widget — the same low-contrast
problem shows up in other dark-mode UI chrome (e.g. navy text on black).
Suggested fix
- Raise foreground luminance in the dark theme: links -> light blue/cyan;
syntax/markup tokens -> lighter token colors tuned for dark backgrounds.
- Validate the dark palette against WCAG AA across all token types in the
preview/markdown renderer (automated contrast check in CI would prevent
regressions).
<img width="2000" height="1782" alt="Image" src="https://github.com/user-attachments/assets/cad26382-f376-4d18-9cdf-24e5ac02e072" />
Attachment: screenshot of the dark-mode preview rendering _nav.html (attached).
As a result Information is not human readable.
What Should Happen?
Fix the design glitch, please.
Error Messages/Logs
Steps to Reproduce
Run Claude.app, wait for dark mode...
Claude Model
None
Is this a regression?
I don't know
Last Working Version
_No response_
Claude Code Version
1.12603.1 (3df4fd)
Platform
Anthropic API
Operating System
macOS
Terminal/Shell
Terminal.app (macOS)
Additional Information
_No response_