[BUG] Dark mode — file/markdown preview text contrast fails WCAG AA (links & syntax tokens unreadable)

Open 💬 0 comments Opened Jun 15, 2026 by isiteq

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

  1. Run Claude Code desktop in dark mode.
  2. 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.

  1. 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_

View original on GitHub ↗