Skip to content

Change open colors to blue for tritanopia and colorblind #1235

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: main
Choose a base branch
from

Conversation

lukasoppermann
Copy link
Contributor

@lukasoppermann lukasoppermann commented Jul 7, 2025

This fixes https://github.com/github/primer/issues/4846 and https://github.com/github/primer/issues/4667

After change

Default
CleanShot 2025-07-07 at 12 59 15@2x

Tritanopia (simulation)
CleanShot 2025-07-07 at 13 03 25@2x

Protanopia (simulation)
CleanShot 2025-07-07 at 13 03 03@2x

Deuteranopia (simulation)
CleanShot 2025-07-07 at 13 03 48@2x

Before change (current)

Default
CleanShot 2025-07-07 at 13 15 12@2x

Tritanopia (simulation)
CleanShot 2025-07-07 at 13 17 16@2x

Protanopia (simulation)
CleanShot 2025-07-07 at 13 16 57@2x

Deuteranopia (simulation)
CleanShot 2025-07-07 at 13 16 39@2x

List of notable changes:

  • updated bgColor.open.[...], borderColor.open.[...] and fgColor.open to use blue instead of red / orange in tritanopia, deuteranopia and protanopia.

Next steps

  • run as feature flag internally for 2 weeks
  • if no comments or issues, run as GA feature flag for 2 weeks
  • if no comments or issues, merge and release

Copy link

changeset-bot bot commented Jul 7, 2025

🦋 Changeset detected

Latest commit: 4790c15

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/primitives Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link
Contributor

github-actions bot commented Jul 7, 2025

Design Token Diff (CSS)

The message is too long to be displayed here. For more details, please check the job summary.

Copy link
Contributor

github-actions bot commented Jul 7, 2025

Design Token Diff (StyleLint)

The message is too long to be displayed here. For more details, please check the job summary.

Copy link
Contributor

github-actions bot commented Jul 7, 2025

Design Token Diff (Figma)

The message is too long to be displayed here. For more details, please check the job summary.

@github-actions github-actions bot temporarily deployed to Preview (Storybook) July 7, 2025 11:16 Inactive
@lukasoppermann lukasoppermann added the update snapshots Update visual regression test snapshots label Jul 7, 2025
@github-actions github-actions bot removed the update snapshots Update visual regression test snapshots label Jul 7, 2025
@primer primer bot temporarily deployed to github-pages July 7, 2025 12:20 Inactive
@github-actions github-actions bot temporarily deployed to Preview (Storybook) July 7, 2025 12:20 Inactive
@lukasoppermann lukasoppermann marked this pull request as ready for review July 7, 2025 12:43
@Copilot Copilot AI review requested due to automatic review settings July 7, 2025 12:43
@lukasoppermann lukasoppermann requested review from a team as code owners July 7, 2025 12:43
@lukasoppermann lukasoppermann requested a review from jonrohan July 7, 2025 12:43
@lukasoppermann lukasoppermann marked this pull request as draft July 7, 2025 12:43
Copy link
Contributor

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR updates the “open” token colors (foreground, border, background) for colorblind and tritanopia simulations, switching from red/orange to blue shades.

  • Removed old orange/red overrides for colorblind themes in fgColor, borderColor, and bgColor.
  • Introduced (via placeholder) new blue-based overrides (to be implemented).
  • Added a changeset for the patch release.

Reviewed Changes

Copilot reviewed 4 out of 34 changed files in this pull request and generated 5 comments.

File Description
src/tokens/functional/color/fgColor.json5 Cleared old colorblind overrides for open fgColor tokens.
src/tokens/functional/color/borderColor.json5 Cleared old colorblind overrides for open borders.
src/tokens/functional/color/bgColor.json5 Cleared old colorblind overrides for open backgrounds.
.changeset/modern-items-notice.md Added patch release note about switching to blue overrides.
Comments suppressed due to low confidence (1)

src/tokens/functional/color/fgColor.json5:229

  • [nitpick] Consider adding automated or visual regression tests to verify the new blue overrides render correctly in tritanopia, protanopia, and deuteranopia simulations.
        'org.primer.overrides': {

@lukasoppermann
Copy link
Contributor Author

lukasoppermann commented Jul 14, 2025

From slack

:wave-dog: I noticed that the light colorblind theme changed where it isn't fully changing the color appearance it used to, i.e. Closed issues still show purple from the Light Default theme. Just wanted to see if anything changed?

Open issues used to also be orange and are now blue - just a tad difficult to discern blue/purple for an accessible theme

Result: We need to update closed to set it to gray.
After investigating I noticed that this is because the done token is used for closed issues. This means we need to adjust this token as well.

@lukasoppermann
Copy link
Contributor Author

lukasoppermann commented Jul 22, 2025

The above has an issue where closed and done don't contrast well enough.

A new approach here is the following:

This is the default light theme:
CleanShot 2025-07-22 at 10 03 06@2x

Tritanopia light theme:
CleanShot 2025-07-22 at 10 07 00@2x

Protanopia Deuteranopia light theme:
CleanShot 2025-07-22 at 10 07 42@2x

Alternative new approach:

Tritanopia light theme:
CleanShot 2025-07-22 at 10 13 08@2x

Protanopia Deuteranopia light theme:
CleanShot 2025-07-22 at 10 14 45@2x

@github-actions github-actions bot temporarily deployed to Preview (Storybook) July 29, 2025 07:16 Inactive
@lukasoppermann lukasoppermann added the update snapshots Update visual regression test snapshots label Jul 29, 2025
Copy link

@hectahertz hectahertz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants