Summary
In dark mode, JSON code blocks on blog posts have inaccessible foreground colors for property keys and boolean/null literals. Both fail WCAG AA (minimum 4.5:1 contrast ratio). Python code blocks on the same page are unaffected.
Steps to reproduce
- Navigate to any blog post containing a JSON code block (e.g.,
/blog/default-model-aliases-stable-names-for-a-dynamic-cluster)
- Enable dark mode
- Observe the JSON code block
Expected behavior
All token colors meet WCAG AA contrast ratio (≥ 4.5:1) against the dark code block background (#1e1e2e).
Actual behavior
- JSON property keys (e.g.,
"id", "model") render in dark navy — the GitHub light theme's .nt color (#005cc5) against #1e1e2e, ~1.8:1 contrast ratio
- JSON literals
true, false, null render similarly — the GitHub light theme's .kc color, same failure
Before (dark mode — inaccessible):
After fix (dark mode — WCAG AA/AAA):
Root cause
post.html loads the Pygments GitHub light theme from CDN and overrides specific token classes for dark mode. The overrides cover Python token classes (.k, .n, .nf, etc.) but miss two classes Pygments uses exclusively for JSON:
.nt (Name.Tag) — JSON property keys
.kc (Keyword.Constant) — true, false, null
Environment
- URL:
/blog/default-model-aliases-stable-names-for-a-dynamic-cluster
- Template:
backend/app/dashboard/templates/blog/post.html
- Affects: all blog posts with JSON code blocks in dark mode
Summary
In dark mode, JSON code blocks on blog posts have inaccessible foreground colors for property keys and boolean/null literals. Both fail WCAG AA (minimum 4.5:1 contrast ratio). Python code blocks on the same page are unaffected.
Steps to reproduce
/blog/default-model-aliases-stable-names-for-a-dynamic-cluster)Expected behavior
All token colors meet WCAG AA contrast ratio (≥ 4.5:1) against the dark code block background (
#1e1e2e).Actual behavior
"id","model") render in dark navy — the GitHub light theme's.ntcolor (#005cc5) against#1e1e2e, ~1.8:1 contrast ratiotrue,false,nullrender similarly — the GitHub light theme's.kccolor, same failureBefore (dark mode — inaccessible):
After fix (dark mode — WCAG AA/AAA):
Root cause
post.htmlloads the Pygments GitHub light theme from CDN and overrides specific token classes for dark mode. The overrides cover Python token classes (.k,.n,.nf, etc.) but miss two classes Pygments uses exclusively for JSON:.nt(Name.Tag) — JSON property keys.kc(Keyword.Constant) —true,false,nullEnvironment
/blog/default-model-aliases-stable-names-for-a-dynamic-clusterbackend/app/dashboard/templates/blog/post.html