question

[Uptonr3421]

Select Topic Area

Question

GitHub Feature Area

Actions

Body

We were just on today actually pushing a commit. For our latest web update. And. Fixing up. The Aria tags. Proud to say we're. Triple A compliant. But honestly. I've never seen anything like your. Color blinds. Switcher. Currently we have a light dark Switcher. So I imagine it could plug into my site really well. Would love to get it. I'm sure there's instructions here s....t find them in the time I have anyone able to help this dummy :-P

_ Alignment-ai.io

[fkerimk]

The color data itself is open source, so I guess you could just pull the specific accessibility palettes (Protanopia, Tritanopia, etc.) via NPM and plug them into your existing setup.

npm install @primer/primitives

Once installed, you should find the raw JSON files for each colorblind mode in the dist folder, node_modules/@primer/primitives/dist/json/colors/

I guess you could likely just import these JSON files and map the values (e.g., fgColor-accent) to your CSS variables whenever a user selects a specific mode. 🤔

[queenofcorgis]

Welcome @Uptonr3421 to the community - great question!

Please note: we currently do not allow self-promotion or advertising on the Community Discussions so I've removed the image for your project. We want to make sure there is space for users to ask questions without overwhelming them with other conversations. Thank you for helping us maintain a productive and tidy community for all our members.

[Thiago-code-lab]

Hi @Alignment-ai.io,

To add to @fkerimk's point: currently, there isn't a pre-built "drop-in widget" script for the switcher itself. The "GitHub Switcher" you see is a UI built specifically for GitHub.com that swaps out the underlying Primer Design System tokens.

Since you already have a Light/Dark switcher, you are halfway there!

How to implement the "GitHub style" colorblind modes:

Get the Colors: As mentioned, npm install @primer/primitives gives you the source. Specifically, look for the themes named light_protanopia, dark_tritanopia, etc.

The Logic: GitHub doesn't use a filter (overlay); it redefines the semantic colors.

Normal: Success = Green, Error = Red.

Protanopia: Success = Blue-ish, Error = Orange-ish (distinguishable for red-green blindness).

Integration: You need to map these specific palettes to your site's existing CSS variables.

Quick "Cheat Sheet" approach:
If you don't want to install the full package, you can grab the specific hex codes for the accessible themes directly from the Primer Primitives repository and add them to your CSS as a new class/data-attribute:

CSS
/* Example: Overriding your variables for Protanopia users /
[data-color-mode="protanopia"] {
--color-success: #1f883d; / Adjusted accessible color /
--color-danger: #cf222e; / Adjusted accessible color /
/ ... repeat for other status colors */
}
Then, just update your existing JS switcher to toggle this data-color-mode attribute on your tag.

Good luck with the Triple-A compliance!