Skip to content

[Feature]: Add colorblind-friendly diff colors setting #1533

@TimCrooker

Description

@TimCrooker

Before submitting

  • I searched existing issues and did not find a duplicate.
  • I am describing a concrete problem or use case, not just a vague idea.

Area

apps/web

Problem or use case

I'm red-green colorblind, and the diff panel is basically unusable for me. The red/green coloring for additions and deletions blends together so I can't tell what was added vs removed without reading each line carefully.

Proposed solution

Add a "Colorblind-friendly diff colors" toggle in Settings > General that swaps the diff panel palette from red/green to blue/orange. Blue and orange are distinguishable across all common forms of color vision deficiency (deuteranopia, protanopia, tritanopia).

Why this matters

About 8% of males have some form of red-green color blindness. Anyone in that group currently can't use the diff panel effectively. A simple opt-in toggle fixes it with no impact on anyone else.

Smallest useful scope

A single boolean client setting that swaps the CSS color variables on the diff panel. Four files, ~60 lines.

Alternatives considered

Custom themes (#1279) would technically solve this too, but that's a much bigger scope. A focused toggle is simpler, ships faster, and directly targets the accessibility problem.

Risks or tradeoffs

None significant. It's opt-in (default off), client-side only, and uses hardcoded oklch values that don't depend on any theme variables.

Examples or references

VS Code, GitHub, and most modern diff tools offer a similar colorblind mode or high-contrast theme for diffs.

Contribution

  • I would be open to helping implement this.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions