fix: make status palette colour-blind-safe - #501
Open
QingqiShi wants to merge 2 commits into
Open
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
QingqiShi
force-pushed
the
fix/colorblind-status-palette
branch
from
August 15, 2026 12:23
a829e33 to
e0de4a0
Compare
Deepening danger to red-800 only bought marginal warning/danger separation while darkening the red for the red-blind viewers the change is meant to help (protanope-perceived lightness drops, and its distance from neutral dark text shrinks). red-700 is the brightest AA-safe red on the tint; warning-vs-danger is disambiguated by icons + text at the component layer, not by colour.
QingqiShi
force-pushed
the
fix/colorblind-status-palette
branch
from
August 20, 2026 08:14
e0de4a0 to
dd4c3c7
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why
The status colour tokens (info / success / warning / danger) paired a pure green for success against red for danger — the classic red-green colour-blindness trap that affects ~8% of men. Success and danger were only borderline distinguishable, and in dark mode they collapsed together for deuteranopes. This makes the status palette colour-blind-safe while keeping the conventional green / amber / red semantics everyone expects.
What changes
The fix follows established CVD guidance — never rely on red vs green alone; the reliable lever is to shift green toward a blue-green. Each status pair was then checked with a Machado-2009 CVD simulation, measuring perceptual distance (ΔE) under both deuteranopia and protanopia:
Warning-vs-danger is inherently a weak colour distinction (red and amber both collapse toward yellow under deuteranopia) and is not solved by colour alone — it belongs to icons + text at the component layer.
Result
The critical success-vs-danger pair is now clearly distinguishable under simulated deuteranopia and protanopia in both themes, and all foreground/background pairs still meet WCAG AA (≥4.5:1).
--destructiveis aliased to the danger foreground token, so all shadcn error surfaces stay consistent and above AA. Verified visually on the/brandguidelines page in both light and dark themes.Follow-up
Full CVD robustness needs status to never rely on colour alone — success/warning/danger alerts should carry distinct icons (✓ / ⚠ / ✕) and text. That is a component/usage change, out of scope for this token PR.