Skip to content

fix(a11y): JSON syntax highlighting fails contrast ratio in dark mode #1

@uidaho-nsummers

Description

@uidaho-nsummers

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

  1. Navigate to any blog post containing a JSON code block (e.g., /blog/default-model-aliases-stable-names-for-a-dynamic-cluster)
  2. Enable dark mode
  3. 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):

Image

After fix (dark mode — WCAG AA/AAA):

Image

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions