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.

Sign up for GitHub

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

Jump to bottom
Draft
wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

Change open colors to blue for tritanopia and colorblind #1235

wants to merge 4 commits into from
+242 −257

Conversation

lukasoppermann
Copy link
Contributor

@lukasoppermann lukasoppermann commented Jul 7, 2025 •
edited
Loading

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

@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Jul 7, 2025 •
edited
Loading

🦋 Changeset detected

Latest commit: edd3f75

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

@github-actions github-actions bot temporarily deployed to Preview (Storybook) July 7, 2025 11:06 Inactive
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jul 7, 2025 •
edited
Loading

Design Token Diff (CSS)

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

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jul 7, 2025 •
edited
Loading

Design Token Diff (StyleLint)

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

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jul 7, 2025 •
edited
Loading

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
Copilot
Copilot AI reviewed Jul 7, 2025
View reviewed changes
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 •
edited
Loading

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 •
edited
Loading

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 25, 2025 20:24 Inactive
@github-actions github-actions bot temporarily deployed to Preview (Storybook) July 25, 2025 20:26 Inactive
@github-actions github-actions bot temporarily deployed to Preview (Storybook) July 25, 2025 20:28 Inactive
@github-actions GitHub Actions
Copy link
Contributor

❌ dark_protanopia_deuteranopia: 2 checks failed

contrastPair pass contrastRatio minimumContrastRatio
fgColor-default vs. bgColor-default ✅ 17.38:1 4.5:1
fgColor-muted vs. bgColor-default ✅ 6.49:1 4.5:1
fgColor-default vs. bgColor-muted ✅ 15.9:1 4.5:1
fgColor-muted vs. bgColor-muted ✅ 5.94:1 4.5:1
fgColor-default vs. bgColor-inset ✅ 18.86:1 4.5:1
fgColor-muted vs. bgColor-inset ✅ 7.05:1 4.5:1
control-fgColor-rest vs. bgColor-default ✅ 17.38:1 4.5:1
control-fgColor-rest vs. bgColor-muted ✅ 15.9:1 4.5:1
control-fgColor-rest vs. bgColor-inset ✅ 18.86:1 4.5:1
control-fgColor-rest vs. control-bgColor-rest ✅ 13.67:1 4.5:1
control-fgColor-placeholder vs. bgColor-default ✅ 6.49:1 4.5:1
control-fgColor-rest vs. control-bgColor-active ✅ 12.03:1 4.5:1
control-fgColor-rest vs. control-bgColor-hover ✅ 12.89:1 4.5:1
control-fgColor-rest vs. control-bgColor-selected ✅ 13.67:1 4.5:1
button-invisible-fgColor-rest vs. bgColor-muted ✅ 15.9:1 4.5:1
button-invisible-fgColor-hover vs. button-invisible-bgColor-hover on bgColor-default ✅ 14.48:1 4.5:1
button-invisible-fgColor-hover vs. button-invisible-bgColor-hover on bgColor-muted ✅ 13.09:1 4.5:1
button-invisible-iconColor-rest vs. bgColor-muted ✅ 5.94:1 4.5:1
button-invisible-iconColor-hover vs. button-invisible-bgColor-hover on bgColor-default ✅ 5.41:1 4.5:1
button-invisible-iconColor-hover vs. button-invisible-bgColor-hover on bgColor-muted ✅ 4.89:1 4.5:1
button-danger-fgColor-rest (#f85149) vs. button-danger-bgColor-rest (#212830) ❌ 4.44:1 4.5:1
button-danger-fgColor-hover vs. button-danger-bgColor-hover ✅ 6.59:1 4.5:1
button-danger-fgColor-active vs. button-danger-bgColor-active ✅ 4.6:1 4.5:1
button-danger-iconColor-rest (#f85149) vs. button-danger-bgColor-rest (#212830) ❌ 4.44:1 4.5:1
button-danger-iconColor-hover vs. button-danger-bgColor-hover ✅ 6.59:1 4.5:1
button-primary-fgColor-rest vs. button-primary-bgColor-rest ✅ 4.63:1 4.5:1
fgColor-default vs. bgColor-neutral-muted on bgColor-default ✅ 14.48:1 4.5:1
fgColor-default vs. bgColor-neutral-muted on bgColor-muted ✅ 13.09:1 4.5:1
fgColor-default vs. bgColor-accent-muted on bgColor-default ✅ 15.57:1 4.5:1
fgColor-default vs. bgColor-accent-muted on bgColor-muted ✅ 14:1 4.5:1
fgColor-default vs. bgColor-success-muted on bgColor-default ✅ 15.57:1 4.5:1
fgColor-default vs. bgColor-success-muted on bgColor-muted ✅ 14:1 4.5:1
fgColor-default vs. bgColor-open-muted on bgColor-default ✅ 15.57:1 4.5:1
fgColor-default vs. bgColor-open-muted on bgColor-muted ✅ 14:1 4.5:1
fgColor-default vs. bgColor-danger-muted on bgColor-default ✅ 15.73:1 4.5:1
fgColor-default vs. bgColor-danger-muted on bgColor-muted ✅ 14.24:1 4.5:1
fgColor-default vs. bgColor-closed-muted on bgColor-default ✅ 15.73:1 4.5:1
fgColor-default vs. bgColor-closed-muted on bgColor-muted ✅ 14.24:1 4.5:1
fgColor-default vs. bgColor-attention-muted on bgColor-default ✅ 14.55:1 4.5:1
fgColor-default vs. bgColor-attention-muted on bgColor-muted ✅ 13.15:1 4.5:1
fgColor-default vs. bgColor-severe-muted on bgColor-default ✅ 15.68:1 4.5:1
fgColor-default vs. bgColor-severe-muted on bgColor-muted ✅ 14.18:1 4.5:1
fgColor-default vs. bgColor-done-muted on bgColor-default ✅ 14.48:1 4.5:1
fgColor-default vs. bgColor-done-muted on bgColor-muted ✅ 13.09:1 4.5:1
fgColor-default vs. bgColor-sponsors-muted on bgColor-default ✅ 15.63:1 4.5:1
fgColor-default vs. bgColor-sponsors-muted on bgColor-muted ✅ 14.12:1 4.5:1
fgColor-neutral vs. bgColor-default ✅ 6.49:1 4.5:1
fgColor-neutral vs. bgColor-muted ✅ 5.94:1 4.5:1
fgColor-neutral vs. bgColor-inset ✅ 7.05:1 4.5:1
fgColor-accent vs. bgColor-default ✅ 6.1:1 4.5:1
fgColor-accent vs. bgColor-muted ✅ 5.58:1 4.5:1
fgColor-accent vs. bgColor-inset ✅ 6.62:1 4.5:1
fgColor-success vs. bgColor-default ✅ 7.49:1 4.5:1
fgColor-success vs. bgColor-muted ✅ 6.85:1 4.5:1
fgColor-success vs. bgColor-inset ✅ 8.12:1 4.5:1
fgColor-open vs. bgColor-default ✅ 7.49:1 4.5:1
fgColor-open vs. bgColor-muted ✅ 6.85:1 4.5:1
fgColor-open vs. bgColor-inset ✅ 8.12:1 4.5:1
fgColor-danger vs. bgColor-default ✅ 5.64:1 4.5:1
fgColor-danger vs. bgColor-muted ✅ 5.16:1 4.5:1
fgColor-danger vs. bgColor-inset ✅ 6.12:1 4.5:1
fgColor-closed vs. bgColor-default ✅ 5.64:1 4.5:1
fgColor-closed vs. bgColor-muted ✅ 5.16:1 4.5:1
fgColor-closed vs. bgColor-inset ✅ 6.12:1 4.5:1
fgColor-attention vs. bgColor-default ✅ 7.49:1 4.5:1
fgColor-attention vs. bgColor-muted ✅ 6.85:1 4.5:1
fgColor-attention vs. bgColor-inset ✅ 8.13:1 4.5:1
fgColor-severe vs. bgColor-default ✅ 5.61:1 4.5:1
fgColor-severe vs. bgColor-muted ✅ 5.13:1 4.5:1
fgColor-severe vs. bgColor-inset ✅ 6.09:1 4.5:1
fgColor-done vs. bgColor-default ✅ 6.49:1 4.5:1
fgColor-done vs. bgColor-muted ✅ 5.94:1 4.5:1
fgColor-done vs. bgColor-inset ✅ 7.05:1 4.5:1
fgColor-upsell vs. bgColor-default ✅ 6.49:1 4.5:1
fgColor-upsell vs. bgColor-muted ✅ 5.94:1 4.5:1
fgColor-upsell vs. bgColor-inset ✅ 7.05:1 4.5:1
fgColor-sponsors vs. bgColor-default ✅ 5.62:1 4.5:1
fgColor-sponsors vs. bgColor-muted ✅ 5.14:1 4.5:1
fgColor-sponsors vs. bgColor-inset ✅ 6.1:1 4.5:1
fgColor-neutral vs. bgColor-neutral-muted on bgColor-default ✅ 5.41:1 4.5:1
fgColor-neutral vs. bgColor-neutral-muted on bgColor-muted ✅ 4.89:1 4.5:1
fgColor-accent vs. bgColor-accent-muted on bgColor-default ✅ 5.46:1 4.5:1
fgColor-accent vs. bgColor-accent-muted on bgColor-muted ✅ 4.91:1 4.5:1
fgColor-success vs. bgColor-success-muted on bgColor-default ✅ 6.7:1 4.5:1
fgColor-success vs. bgColor-success-muted on bgColor-muted ✅ 6.03:1 4.5:1
fgColor-open vs. bgColor-open-muted on bgColor-default ✅ 6.7:1 4.5:1
fgColor-open vs. bgColor-open-muted on bgColor-muted ✅ 6.03:1 4.5:1
fgColor-danger vs. bgColor-danger-muted on bgColor-default ✅ 5.1:1 4.5:1
fgColor-danger vs. bgColor-danger-muted on bgColor-muted ✅ 4.62:1 4.5:1
fgColor-closed vs. bgColor-closed-muted on bgColor-default ✅ 5.1:1 4.5:1
fgColor-closed vs. bgColor-closed-muted on bgColor-muted ✅ 4.62:1 4.5:1
fgColor-attention vs. bgColor-attention-muted on bgColor-default ✅ 6.27:1 4.5:1
fgColor-attention vs. bgColor-attention-muted on bgColor-muted ✅ 5.67:1 4.5:1
fgColor-severe vs. bgColor-severe-muted on bgColor-default ✅ 5.06:1 4.5:1
fgColor-severe vs. bgColor-severe-muted on bgColor-muted ✅ 4.58:1 4.5:1
fgColor-done vs. bgColor-done-muted on bgColor-default ✅ 5.41:1 4.5:1
fgColor-done vs. bgColor-done-muted on bgColor-muted ✅ 4.89:1 4.5:1
fgColor-upsell vs. bgColor-upsell-muted ✅ 5.62:1 4.5:1
fgColor-sponsors vs. bgColor-sponsors-muted on bgColor-default ✅ 5.06:1 4.5:1
fgColor-sponsors vs. bgColor-sponsors-muted on bgColor-muted ✅ 4.57:1 4.5:1
fgColor-onEmphasis vs. bgColor-neutral-emphasis ✅ 5.3:1 4.5:1
fgColor-onEmphasis vs. bgColor-accent-emphasis ✅ 4.63:1 4.5:1
fgColor-onEmphasis vs. bgColor-success-emphasis ✅ 4.63:1 4.5:1
fgColor-onEmphasis vs. bgColor-open-emphasis ✅ 4.63:1 4.5:1
fgColor-onEmphasis vs. bgColor-danger-emphasis ✅ 4.6:1 4.5:1
fgColor-onEmphasis vs. bgColor-closed-emphasis ✅ 4.6:1 4.5:1
fgColor-onEmphasis vs. bgColor-attention-emphasis ✅ 4.64:1 4.5:1
fgColor-onEmphasis vs. bgColor-severe-emphasis ✅ 4.65:1 4.5:1
fgColor-onEmphasis vs. bgColor-done-emphasis ✅ 5.3:1 4.5:1
fgColor-onEmphasis vs. bgColor-upsell-emphasis ✅ 4.6:1 4.5:1
fgColor-onEmphasis vs. bgColor-sponsors-emphasis ✅ 4.57:1 4.5:1
control-borderColor-emphasis vs. bgColor-default ✅ 3.56:1 3:1
control-borderColor-emphasis vs. bgColor-muted ✅ 3.26:1 3:1
display-gray-fgColor vs. display-gray-bgColor-muted ✅ 6.48:1 4.5:1
display-indigo-fgColor vs. display-indigo-bgColor-muted ✅ 6.48:1 4.5:1
display-blue-fgColor vs. display-blue-bgColor-muted ✅ 6.28:1 4.5:1
display-cyan-fgColor vs. display-cyan-bgColor-muted ✅ 6.53:1 4.5:1
display-teal-fgColor vs. display-teal-bgColor-muted ✅ 6.39:1 4.5:1
display-pine-fgColor vs. display-pine-bgColor-muted ✅ 6.42:1 4.5:1
display-green-fgColor vs. display-green-bgColor-muted ✅ 6.24:1 4.5:1
display-lime-fgColor vs. display-lime-bgColor-muted ✅ 6.47:1 4.5:1
display-olive-fgColor vs. display-olive-bgColor-muted ✅ 6.53:1 4.5:1
display-lemon-fgColor vs. display-lemon-bgColor-muted ✅ 6.12:1 4.5:1
display-yellow-fgColor vs. display-yellow-bgColor-muted ✅ 6.19:1 4.5:1
display-orange-fgColor vs. display-orange-bgColor-muted ✅ 6.26:1 4.5:1
display-red-fgColor vs. display-red-bgColor-muted ✅ 6.54:1 4.5:1
display-coral-fgColor vs. display-coral-bgColor-muted ✅ 6.54:1 4.5:1
display-pink-fgColor vs. display-pink-bgColor-muted ✅ 6.27:1 4.5:1
display-plum-fgColor vs. display-plum-bgColor-muted ✅ 6.49:1 4.5:1
display-purple-fgColor vs. display-purple-bgColor-muted ✅ 6.34:1 4.5:1
display-brown-fgColor vs. display-brown-bgColor-muted ✅ 6.25:1 4.5:1
display-auburn-fgColor vs. display-auburn-bgColor-muted ✅ 6.45:1 4.5:1
fgColor-onEmphasis vs. display-gray-bgColor-emphasis ✅ 6.2:1 4.5:1
fgColor-onEmphasis vs. display-indigo-bgColor-emphasis ✅ 6.19:1 4.5:1
fgColor-onEmphasis vs. display-blue-bgColor-emphasis ✅ 6.14:1 4.5:1
fgColor-onEmphasis vs. display-cyan-bgColor-emphasis ✅ 6.09:1 4.5:1
fgColor-onEmphasis vs. display-teal-bgColor-emphasis ✅ 6.17:1 4.5:1
fgColor-onEmphasis vs. display-pine-bgColor-emphasis ✅ 6:1 4.5:1
fgColor-onEmphasis vs. display-green-bgColor-emphasis ✅ 6.08:1 4.5:1
fgColor-onEmphasis vs. display-lime-bgColor-emphasis ✅ 6.07:1 4.5:1
fgColor-onEmphasis vs. display-olive-bgColor-emphasis ✅ 6.04:1 4.5:1
fgColor-onEmphasis vs. display-lemon-bgColor-emphasis ✅ 6.04:1 4.5:1
fgColor-onEmphasis vs. display-yellow-bgColor-emphasis ✅ 6:1 4.5:1
fgColor-onEmphasis vs. display-orange-bgColor-emphasis ✅ 6.27:1 4.5:1
fgColor-onEmphasis vs. display-red-bgColor-emphasis ✅ 6.09:1 4.5:1
fgColor-onEmphasis vs. display-coral-bgColor-emphasis ✅ 6.09:1 4.5:1
fgColor-onEmphasis vs. display-pink-bgColor-emphasis ✅ 6.15:1 4.5:1
fgColor-onEmphasis vs. display-plum-bgColor-emphasis ✅ 6.17:1 4.5:1
fgColor-onEmphasis vs. display-purple-bgColor-emphasis ✅ 6.22:1 4.5:1
fgColor-onEmphasis vs. display-brown-bgColor-emphasis ✅ 6.12:1 4.5:1
fgColor-onEmphasis vs. display-auburn-bgColor-emphasis ✅ 6.21:1 4.5:1
bgColor-default vs. display-gray-borderColor-emphasis ✅ 4.63:1 3:1
bgColor-default vs. display-indigo-borderColor-emphasis ✅ 4.59:1 3:1
bgColor-default vs. display-blue-borderColor-emphasis ✅ 4.54:1 3:1
bgColor-default vs. display-cyan-borderColor-emphasis ✅ 4.61:1 3:1
bgColor-default vs. display-teal-borderColor-emphasis ✅ 4.53:1 3:1
bgColor-default vs. display-pine-borderColor-emphasis ✅ 4.73:1 3:1
bgColor-default vs. display-green-borderColor-emphasis ✅ 4.65:1 3:1
bgColor-default vs. display-lime-borderColor-emphasis ✅ 4.6:1 3:1
bgColor-default vs. display-olive-borderColor-emphasis ✅ 4.59:1 3:1
bgColor-default vs. display-lemon-borderColor-emphasis ✅ 4.64:1 3:1
bgColor-default vs. display-yellow-borderColor-emphasis ✅ 4.57:1 3:1
bgColor-default vs. display-orange-borderColor-emphasis ✅ 4.59:1 3:1
bgColor-default vs. display-red-borderColor-emphasis ✅ 4.58:1 3:1
bgColor-default vs. display-coral-borderColor-emphasis ✅ 4.58:1 3:1
bgColor-default vs. display-pink-borderColor-emphasis ✅ 4.53:1 3:1
bgColor-default vs. display-plum-borderColor-emphasis ✅ 4.54:1 3:1
bgColor-default vs. display-purple-borderColor-emphasis ✅ 4.58:1 3:1
bgColor-default vs. display-brown-borderColor-emphasis ✅ 4.5:1 3:1
bgColor-default vs. display-auburn-borderColor-emphasis ✅ 4.64:1 3:1
bgColor-muted vs. display-gray-borderColor-emphasis ✅ 4.23:1 3:1
bgColor-muted vs. display-indigo-borderColor-emphasis ✅ 4.19:1 3:1
bgColor-muted vs. display-blue-borderColor-emphasis ✅ 4.15:1 3:1
bgColor-muted vs. display-cyan-borderColor-emphasis ✅ 4.22:1 3:1
bgColor-muted vs. display-teal-borderColor-emphasis ✅ 4.15:1 3:1
bgColor-muted vs. display-pine-borderColor-emphasis ✅ 4.32:1 3:1
bgColor-muted vs. display-green-borderColor-emphasis ✅ 4.26:1 3:1
bgColor-muted vs. display-lime-borderColor-emphasis ✅ 4.2:1 3:1
bgColor-muted vs. display-olive-borderColor-emphasis ✅ 4.2:1 3:1
bgColor-muted vs. display-lemon-borderColor-emphasis ✅ 4.24:1 3:1
bgColor-muted vs. display-yellow-borderColor-emphasis ✅ 4.18:1 3:1
bgColor-muted vs. display-orange-borderColor-emphasis ✅ 4.2:1 3:1
bgColor-muted vs. display-red-borderColor-emphasis ✅ 4.19:1 3:1
bgColor-muted vs. display-coral-borderColor-emphasis ✅ 4.19:1 3:1
bgColor-muted vs. display-pink-borderColor-emphasis ✅ 4.14:1 3:1
bgColor-muted vs. display-plum-borderColor-emphasis ✅ 4.15:1 3:1
bgColor-muted vs. display-purple-borderColor-emphasis ✅ 4.19:1 3:1
bgColor-muted vs. display-brown-borderColor-emphasis ✅ 4.12:1 3:1
bgColor-muted vs. display-auburn-borderColor-emphasis ✅ 4.24:1 3:1
display-gray-borderColor-emphasis vs. display-gray-bgColor-muted ✅ 4.17:1 3:1
display-indigo-borderColor-emphasis vs. display-indigo-bgColor-muted ✅ 4.07:1 3:1
display-blue-borderColor-emphasis vs. display-blue-bgColor-muted ✅ 4.07:1 3:1
display-cyan-borderColor-emphasis vs. display-cyan-bgColor-muted ✅ 4.17:1 3:1
display-teal-borderColor-emphasis vs. display-teal-bgColor-muted ✅ 4.1:1 3:1
display-pine-borderColor-emphasis vs. display-pine-bgColor-muted ✅ 4.22:1 3:1
display-green-borderColor-emphasis vs. display-green-bgColor-muted ✅ 4.11:1 3:1
display-lime-borderColor-emphasis vs. display-lime-bgColor-muted ✅ 4.14:1 3:1
display-olive-borderColor-emphasis vs. display-olive-bgColor-muted ✅ 4.15:1 3:1
display-lemon-borderColor-emphasis vs. display-lemon-bgColor-muted ✅ 4.05:1 3:1
display-yellow-borderColor-emphasis vs. display-yellow-bgColor-muted ✅ 4.01:1 3:1
display-orange-borderColor-emphasis vs. display-orange-bgColor-muted ✅ 4.06:1 3:1
display-red-borderColor-emphasis vs. display-red-bgColor-muted ✅ 4.13:1 3:1
display-coral-borderColor-emphasis vs. display-coral-bgColor-muted ✅ 4.13:1 3:1
display-pink-borderColor-emphasis vs. display-pink-bgColor-muted ✅ 4.04:1 3:1
display-plum-borderColor-emphasis vs. display-plum-bgColor-muted ✅ 4.08:1 3:1
display-purple-borderColor-emphasis vs. display-purple-bgColor-muted ✅ 4.13:1 3:1
display-brown-borderColor-emphasis vs. display-brown-bgColor-muted ✅ 3.99:1 3:1
display-auburn-borderColor-emphasis vs. display-auburn-bgColor-muted ✅ 4.19:1 3:1

→ Details

@github-actions GitHub Actions
Copy link
Contributor

❌ dark_protanopia_deuteranopia_high_contrast: 2 checks failed

contrastPair pass contrastRatio minimumContrastRatio
fgColor-default vs. bgColor-default ✅ 20.53:1 7:1
fgColor-muted vs. bgColor-default ✅ 10.88:1 7:1
fgColor-default vs. bgColor-muted ✅ 17.31:1 7:1
fgColor-muted vs. bgColor-muted ✅ 9.17:1 7:1
fgColor-default vs. bgColor-inset ✅ 20.53:1 7:1
fgColor-muted vs. bgColor-inset ✅ 10.88:1 7:1
control-fgColor-rest vs. bgColor-default ✅ 20.53:1 7:1
control-fgColor-rest vs. bgColor-muted ✅ 17.31:1 7:1
control-fgColor-rest vs. bgColor-inset ✅ 20.53:1 7:1
control-fgColor-rest vs. control-bgColor-rest ✅ 14.03:1 7:1
control-fgColor-placeholder vs. bgColor-default ✅ 10.88:1 7:1
control-fgColor-rest vs. control-bgColor-active ✅ 12.02:1 7:1
control-fgColor-rest vs. control-bgColor-hover ✅ 13.1:1 7:1
control-fgColor-rest vs. control-bgColor-selected ✅ 14.03:1 7:1
button-invisible-fgColor-rest vs. bgColor-muted ✅ 17.31:1 7:1
button-invisible-fgColor-hover vs. button-invisible-bgColor-hover ✅ 17.31:1 7:1
button-invisible-iconColor-rest vs. bgColor-muted ✅ 11.96:1 7:1
button-invisible-iconColor-hover vs. button-invisible-bgColor-hover ✅ 11.96:1 7:1
button-danger-fgColor-rest vs. button-danger-bgColor-rest ✅ 8.13:1 7:1
button-danger-fgColor-hover vs. button-danger-bgColor-hover ✅ 7.46:1 7:1
button-danger-fgColor-active vs. button-danger-bgColor-active ✅ 7.51:1 7:1
button-danger-iconColor-rest vs. button-danger-bgColor-rest ✅ 8.13:1 7:1
button-danger-iconColor-hover vs. button-danger-bgColor-hover ✅ 7.46:1 7:1
button-primary-fgColor-rest vs. button-primary-bgColor-rest ✅ 7.51:1 7:1
fgColor-default vs. bgColor-neutral-muted ✅ 14.88:1 7:1
fgColor-default vs. bgColor-accent-muted on bgColor-default ✅ 18.36:1 7:1
fgColor-default vs. bgColor-accent-muted on bgColor-muted ✅ 14.58:1 7:1
fgColor-default vs. bgColor-success-muted on bgColor-default ✅ 18.36:1 7:1
fgColor-default vs. bgColor-success-muted on bgColor-muted ✅ 14.58:1 7:1
fgColor-default vs. bgColor-open-muted on bgColor-default ✅ 18.36:1 7:1
fgColor-default vs. bgColor-open-muted on bgColor-muted ✅ 14.58:1 7:1
fgColor-default vs. bgColor-danger-muted on bgColor-default ✅ 18.45:1 7:1
fgColor-default vs. bgColor-danger-muted on bgColor-muted ✅ 14.86:1 7:1
fgColor-default vs. bgColor-closed-muted on bgColor-default ✅ 18.45:1 7:1
fgColor-default vs. bgColor-closed-muted on bgColor-muted ✅ 14.86:1 7:1
fgColor-default vs. bgColor-attention-muted on bgColor-default ✅ 16.71:1 7:1
fgColor-default vs. bgColor-attention-muted on bgColor-muted ✅ 13.12:1 7:1
fgColor-default vs. bgColor-severe-muted on bgColor-default ✅ 18.48:1 7:1
fgColor-default vs. bgColor-severe-muted on bgColor-muted ✅ 14.9:1 7:1
fgColor-default vs. bgColor-done-muted ✅ 14.88:1 7:1
fgColor-default vs. bgColor-sponsors-muted on bgColor-default ✅ 18.52:1 7:1
fgColor-default vs. bgColor-sponsors-muted on bgColor-muted ✅ 14.79:1 7:1
fgColor-neutral vs. bgColor-default ✅ 14.18:1 7:1
fgColor-neutral vs. bgColor-muted ✅ 11.96:1 7:1
fgColor-neutral vs. bgColor-inset ✅ 14.18:1 7:1
fgColor-accent vs. bgColor-default ✅ 9.9:1 7:1
fgColor-accent vs. bgColor-muted ✅ 8.34:1 7:1
fgColor-accent vs. bgColor-inset ✅ 9.9:1 7:1
fgColor-success vs. bgColor-default ✅ 14.13:1 7:1
fgColor-success vs. bgColor-muted ✅ 11.92:1 7:1
fgColor-success vs. bgColor-inset ✅ 14.13:1 7:1
fgColor-open vs. bgColor-default ✅ 14.13:1 7:1
fgColor-open vs. bgColor-muted ✅ 11.92:1 7:1
fgColor-open vs. bgColor-inset ✅ 14.13:1 7:1
fgColor-danger vs. bgColor-default ✅ 9.68:1 7:1
fgColor-danger vs. bgColor-muted ✅ 8.16:1 7:1
fgColor-danger vs. bgColor-inset ✅ 9.68:1 7:1
fgColor-closed vs. bgColor-default ✅ 9.68:1 7:1
fgColor-closed vs. bgColor-muted ✅ 8.16:1 7:1
fgColor-closed vs. bgColor-inset ✅ 9.68:1 7:1
fgColor-attention vs. bgColor-default ✅ 11.26:1 7:1
fgColor-attention vs. bgColor-muted ✅ 9.49:1 7:1
fgColor-attention vs. bgColor-inset ✅ 11.26:1 7:1
fgColor-severe vs. bgColor-default ✅ 9.65:1 7:1
fgColor-severe vs. bgColor-muted ✅ 8.14:1 7:1
fgColor-severe vs. bgColor-inset ✅ 9.65:1 7:1
fgColor-done vs. bgColor-default ✅ 14.18:1 7:1
fgColor-done vs. bgColor-muted ✅ 11.96:1 7:1
fgColor-done vs. bgColor-inset ✅ 14.18:1 7:1
fgColor-upsell vs. bgColor-default ✅ 14.18:1 7:1
fgColor-upsell vs. bgColor-muted ✅ 11.96:1 7:1
fgColor-upsell vs. bgColor-inset ✅ 14.18:1 7:1
fgColor-sponsors vs. bgColor-default ✅ 9.85:1 7:1
fgColor-sponsors vs. bgColor-muted ✅ 8.3:1 7:1
fgColor-sponsors vs. bgColor-inset ✅ 9.85:1 7:1
fgColor-neutral vs. bgColor-neutral-muted ✅ 10.28:1 7:1
fgColor-accent vs. bgColor-accent-muted on bgColor-default ✅ 8.85:1 7:1
fgColor-accent vs. bgColor-accent-muted on bgColor-muted ✅ 7.03:1 7:1
fgColor-success vs. bgColor-success-muted on bgColor-default ✅ 12.64:1 7:1
fgColor-success vs. bgColor-success-muted on bgColor-muted ✅ 10.04:1 7:1
fgColor-open vs. bgColor-open-muted on bgColor-default ✅ 12.64:1 7:1
fgColor-open vs. bgColor-open-muted on bgColor-muted ✅ 10.04:1 7:1
fgColor-danger vs. bgColor-danger-muted on bgColor-default ✅ 8.7:1 7:1
fgColor-danger vs. bgColor-danger-muted on bgColor-muted ✅ 7.01:1 7:1
fgColor-closed vs. bgColor-closed-muted on bgColor-default ✅ 8.7:1 7:1
fgColor-closed vs. bgColor-closed-muted on bgColor-muted ✅ 7.01:1 7:1
fgColor-attention vs. bgColor-attention-muted on bgColor-default ✅ 9.16:1 7:1
fgColor-attention vs. bgColor-attention-muted on bgColor-muted ✅ 7.2:1 7:1
fgColor-severe vs. bgColor-severe-muted on bgColor-default ✅ 8.69:1 7:1
fgColor-severe vs. bgColor-severe-muted on bgColor-muted ✅ 7:1 7:1
fgColor-done vs. bgColor-done-muted ✅ 10.28:1 7:1
fgColor-upsell (#d1d7e0) vs. bgColor-upsell-muted (#6921d7) ❌ 5.18:1 7:1
fgColor-sponsors vs. bgColor-sponsors-muted on bgColor-default ✅ 8.88:1 7:1
fgColor-sponsors vs. bgColor-sponsors-muted on bgColor-muted ✅ 7.09:1 7:1
fgColor-onEmphasis vs. bgColor-neutral-emphasis ✅ 9.84:1 7:1
fgColor-onEmphasis vs. bgColor-accent-emphasis ✅ 7.51:1 7:1
fgColor-onEmphasis vs. bgColor-success-emphasis ✅ 7.51:1 7:1
fgColor-onEmphasis vs. bgColor-open-emphasis ✅ 7.51:1 7:1
fgColor-onEmphasis vs. bgColor-danger-emphasis ✅ 7.51:1 7:1
fgColor-onEmphasis vs. bgColor-closed-emphasis ✅ 7.51:1 7:1
fgColor-onEmphasis vs. bgColor-attention-emphasis ✅ 7.51:1 7:1
fgColor-onEmphasis vs. bgColor-severe-emphasis ✅ 7.46:1 7:1
fgColor-onEmphasis vs. bgColor-done-emphasis ✅ 9.84:1 7:1
fgColor-onEmphasis (#ffffff) vs. bgColor-upsell-emphasis (#b87fff) ❌ 2.79:1 7:1
fgColor-onEmphasis vs. bgColor-sponsors-emphasis ✅ 7.5:1 7:1
control-borderColor-emphasis vs. bgColor-default ✅ 10.88:1 4.5:1
control-borderColor-emphasis vs. bgColor-muted ✅ 9.17:1 4.5:1
display-gray-fgColor vs. display-gray-bgColor-muted ✅ 9.23:1 7:1
display-indigo-fgColor vs. display-indigo-bgColor-muted ✅ 9.1:1 7:1
display-blue-fgColor vs. display-blue-bgColor-muted ✅ 9:1 7:1
display-cyan-fgColor vs. display-cyan-bgColor-muted ✅ 9.07:1 7:1
display-teal-fgColor vs. display-teal-bgColor-muted ✅ 9.35:1 7:1
display-pine-fgColor vs. display-pine-bgColor-muted ✅ 9.17:1 7:1
display-green-fgColor vs. display-green-bgColor-muted ✅ 9:1 7:1
display-lime-fgColor vs. display-lime-bgColor-muted ✅ 9.07:1 7:1
display-olive-fgColor vs. display-olive-bgColor-muted ✅ 9.05:1 7:1
display-lemon-fgColor vs. display-lemon-bgColor-muted ✅ 8.74:1 7:1
display-yellow-fgColor vs. display-yellow-bgColor-muted ✅ 8.84:1 7:1
display-orange-fgColor vs. display-orange-bgColor-muted ✅ 9.02:1 7:1
display-red-fgColor vs. display-red-bgColor-muted ✅ 9.37:1 7:1
display-coral-fgColor vs. display-coral-bgColor-muted ✅ 9.17:1 7:1
display-pink-fgColor vs. display-pink-bgColor-muted ✅ 9.16:1 7:1
display-plum-fgColor vs. display-plum-bgColor-muted ✅ 9:1 7:1
display-purple-fgColor vs. display-purple-bgColor-muted ✅ 9.18:1 7:1
display-brown-fgColor vs. display-brown-bgColor-muted ✅ 8.91:1 7:1
display-auburn-fgColor vs. display-auburn-bgColor-muted ✅ 9.14:1 7:1
fgColor-onEmphasis vs. display-gray-bgColor-emphasis ✅ 8.41:1 7:1
fgColor-onEmphasis vs. display-indigo-bgColor-emphasis ✅ 8.59:1 7:1
fgColor-onEmphasis vs. display-blue-bgColor-emphasis ✅ 8.6:1 7:1
fgColor-onEmphasis vs. display-cyan-bgColor-emphasis ✅ 8.5:1 7:1
fgColor-onEmphasis vs. display-teal-bgColor-emphasis ✅ 8.52:1 7:1
fgColor-onEmphasis vs. display-pine-bgColor-emphasis ✅ 8.21:1 7:1
fgColor-onEmphasis vs. display-green-bgColor-emphasis ✅ 8.3:1 7:1
fgColor-onEmphasis vs. display-lime-bgColor-emphasis ✅ 8.56:1 7:1
fgColor-onEmphasis vs. display-olive-bgColor-emphasis ✅ 8.41:1 7:1
fgColor-onEmphasis vs. display-lemon-bgColor-emphasis ✅ 8.25:1 7:1
fgColor-onEmphasis vs. display-yellow-bgColor-emphasis ✅ 8.47:1 7:1
fgColor-onEmphasis vs. display-orange-bgColor-emphasis ✅ 8.41:1 7:1
fgColor-onEmphasis vs. display-red-bgColor-emphasis ✅ 8.57:1 7:1
fgColor-onEmphasis vs. display-coral-bgColor-emphasis ✅ 8.32:1 7:1
fgColor-onEmphasis vs. display-pink-bgColor-emphasis ✅ 8.5:1 7:1
fgColor-onEmphasis vs. display-plum-bgColor-emphasis ✅ 8.51:1 7:1
fgColor-onEmphasis vs. display-purple-bgColor-emphasis ✅ 8.52:1 7:1
fgColor-onEmphasis vs. display-brown-bgColor-emphasis ✅ 8.43:1 7:1
fgColor-onEmphasis vs. display-auburn-bgColor-emphasis ✅ 8.3:1 7:1
bgColor-default vs. display-gray-borderColor-emphasis ✅ 7.81:1 4.5:1
bgColor-default vs. display-indigo-borderColor-emphasis ✅ 7.92:1 4.5:1
bgColor-default vs. display-blue-borderColor-emphasis ✅ 7.61:1 4.5:1
bgColor-default vs. display-cyan-borderColor-emphasis ✅ 7.85:1 4.5:1
bgColor-default vs. display-teal-borderColor-emphasis ✅ 7.67:1 4.5:1
bgColor-default vs. display-pine-borderColor-emphasis ✅ 7.8:1 4.5:1
bgColor-default vs. display-green-borderColor-emphasis ✅ 7.66:1 4.5:1
bgColor-default vs. display-lime-borderColor-emphasis ✅ 7.8:1 4.5:1
bgColor-default vs. display-olive-borderColor-emphasis ✅ 7.84:1 4.5:1
bgColor-default vs. display-lemon-borderColor-emphasis ✅ 7.61:1 4.5:1
bgColor-default vs. display-yellow-borderColor-emphasis ✅ 7.65:1 4.5:1
bgColor-default vs. display-orange-borderColor-emphasis ✅ 7.7:1 4.5:1
bgColor-default vs. display-red-borderColor-emphasis ✅ 7.85:1 4.5:1
bgColor-default vs. display-coral-borderColor-emphasis ✅ 7.61:1 4.5:1
bgColor-default vs. display-pink-borderColor-emphasis ✅ 7.63:1 4.5:1
bgColor-default vs. display-plum-borderColor-emphasis ✅ 7.83:1 4.5:1
bgColor-default vs. display-purple-borderColor-emphasis ✅ 7.62:1 4.5:1
bgColor-default vs. display-brown-borderColor-emphasis ✅ 7.65:1 4.5:1
bgColor-default vs. display-auburn-borderColor-emphasis ✅ 7.75:1 4.5:1
bgColor-muted vs. display-gray-borderColor-emphasis ✅ 6.58:1 4.5:1
bgColor-muted vs. display-indigo-borderColor-emphasis ✅ 6.68:1 4.5:1
bgColor-muted vs. display-blue-borderColor-emphasis ✅ 6.42:1 4.5:1
bgColor-muted vs. display-cyan-borderColor-emphasis ✅ 6.62:1 4.5:1
bgColor-muted vs. display-teal-borderColor-emphasis ✅ 6.46:1 4.5:1
bgColor-muted vs. display-pine-borderColor-emphasis ✅ 6.58:1 4.5:1
bgColor-muted vs. display-green-borderColor-emphasis ✅ 6.46:1 4.5:1
bgColor-muted vs. display-lime-borderColor-emphasis ✅ 6.58:1 4.5:1
bgColor-muted vs. display-olive-borderColor-emphasis ✅ 6.61:1 4.5:1
bgColor-muted vs. display-lemon-borderColor-emphasis ✅ 6.41:1 4.5:1
bgColor-muted vs. display-yellow-borderColor-emphasis ✅ 6.45:1 4.5:1
bgColor-muted vs. display-orange-borderColor-emphasis ✅ 6.49:1 4.5:1
bgColor-muted vs. display-red-borderColor-emphasis ✅ 6.62:1 4.5:1
bgColor-muted vs. display-coral-borderColor-emphasis ✅ 6.42:1 4.5:1
bgColor-muted vs. display-pink-borderColor-emphasis ✅ 6.43:1 4.5:1
bgColor-muted vs. display-plum-borderColor-emphasis ✅ 6.6:1 4.5:1
bgColor-muted vs. display-purple-borderColor-emphasis ✅ 6.42:1 4.5:1
bgColor-muted vs. display-brown-borderColor-emphasis ✅ 6.45:1 4.5:1
bgColor-muted vs. display-auburn-borderColor-emphasis ✅ 6.53:1 4.5:1
display-gray-borderColor-emphasis vs. display-gray-bgColor-muted ✅ 6.48:1 4.5:1
display-indigo-borderColor-emphasis vs. display-indigo-bgColor-muted ✅ 6.48:1 4.5:1
display-blue-borderColor-emphasis vs. display-blue-bgColor-muted ✅ 6.28:1 4.5:1
display-cyan-borderColor-emphasis vs. display-cyan-bgColor-muted ✅ 6.53:1 4.5:1
display-teal-borderColor-emphasis vs. display-teal-bgColor-muted ✅ 6.39:1 4.5:1
display-pine-borderColor-emphasis vs. display-pine-bgColor-muted ✅ 6.42:1 4.5:1
display-green-borderColor-emphasis vs. display-green-bgColor-muted ✅ 6.24:1 4.5:1
display-lime-borderColor-emphasis vs. display-lime-bgColor-muted ✅ 6.47:1 4.5:1
display-olive-borderColor-emphasis vs. display-olive-bgColor-muted ✅ 6.53:1 4.5:1
display-lemon-borderColor-emphasis vs. display-lemon-bgColor-muted ✅ 6.12:1 4.5:1
display-yellow-borderColor-emphasis vs. display-yellow-bgColor-muted ✅ 6.19:1 4.5:1
display-orange-borderColor-emphasis vs. display-orange-bgColor-muted ✅ 6.26:1 4.5:1
display-red-borderColor-emphasis vs. display-red-bgColor-muted ✅ 6.54:1 4.5:1
display-coral-borderColor-emphasis vs. display-coral-bgColor-muted ✅ 6.34:1 4.5:1
display-pink-borderColor-emphasis vs. display-pink-bgColor-muted ✅ 6.27:1 4.5:1
display-plum-borderColor-emphasis vs. display-plum-bgColor-muted ✅ 6.49:1 4.5:1
display-purple-borderColor-emphasis vs. display-purple-bgColor-muted ✅ 6.34:1 4.5:1
display-brown-borderColor-emphasis vs. display-brown-bgColor-muted ✅ 6.25:1 4.5:1
display-auburn-borderColor-emphasis vs. display-auburn-bgColor-muted ✅ 6.45:1 4.5:1

→ Details

@github-actions GitHub Actions
Copy link
Contributor

❌ dark_tritanopia_high_contrast: 2 checks failed

contrastPair pass contrastRatio minimumContrastRatio
fgColor-default vs. bgColor-default ✅ 20.53:1 7:1
fgColor-muted vs. bgColor-default ✅ 10.88:1 7:1
fgColor-default vs. bgColor-muted ✅ 17.31:1 7:1
fgColor-muted vs. bgColor-muted ✅ 9.17:1 7:1
fgColor-default vs. bgColor-inset ✅ 20.53:1 7:1
fgColor-muted vs. bgColor-inset ✅ 10.88:1 7:1
control-fgColor-rest vs. bgColor-default ✅ 20.53:1 7:1
control-fgColor-rest vs. bgColor-muted ✅ 17.31:1 7:1
control-fgColor-rest vs. bgColor-inset ✅ 20.53:1 7:1
control-fgColor-rest vs. control-bgColor-rest ✅ 14.03:1 7:1
control-fgColor-placeholder vs. bgColor-default ✅ 10.88:1 7:1
control-fgColor-rest vs. control-bgColor-active ✅ 12.02:1 7:1
control-fgColor-rest vs. control-bgColor-hover ✅ 13.1:1 7:1
control-fgColor-rest vs. control-bgColor-selected ✅ 14.03:1 7:1
button-invisible-fgColor-rest vs. bgColor-muted ✅ 17.31:1 7:1
button-invisible-fgColor-hover vs. button-invisible-bgColor-hover ✅ 17.31:1 7:1
button-invisible-iconColor-rest vs. bgColor-muted ✅ 11.96:1 7:1
button-invisible-iconColor-hover vs. button-invisible-bgColor-hover ✅ 11.96:1 7:1
button-danger-fgColor-rest vs. button-danger-bgColor-rest ✅ 8.12:1 7:1
button-danger-fgColor-hover vs. button-danger-bgColor-hover ✅ 7.51:1 7:1
button-danger-fgColor-active vs. button-danger-bgColor-active ✅ 7.51:1 7:1
button-danger-iconColor-rest vs. button-danger-bgColor-rest ✅ 8.12:1 7:1
button-danger-iconColor-hover vs. button-danger-bgColor-hover ✅ 7.51:1 7:1
button-primary-fgColor-rest vs. button-primary-bgColor-rest ✅ 7.51:1 7:1
fgColor-default vs. bgColor-neutral-muted ✅ 14.88:1 7:1
fgColor-default vs. bgColor-accent-muted on bgColor-default ✅ 18.36:1 7:1
fgColor-default vs. bgColor-accent-muted on bgColor-muted ✅ 14.58:1 7:1
fgColor-default vs. bgColor-success-muted on bgColor-default ✅ 18.36:1 7:1
fgColor-default vs. bgColor-success-muted on bgColor-muted ✅ 14.58:1 7:1
fgColor-default vs. bgColor-open-muted on bgColor-default ✅ 18.36:1 7:1
fgColor-default vs. bgColor-open-muted on bgColor-muted ✅ 14.58:1 7:1
fgColor-default vs. bgColor-danger-muted on bgColor-default ✅ 18.45:1 7:1
fgColor-default vs. bgColor-danger-muted on bgColor-muted ✅ 14.86:1 7:1
fgColor-default vs. bgColor-closed-muted on bgColor-default ✅ 18.45:1 7:1
fgColor-default vs. bgColor-closed-muted on bgColor-muted ✅ 14.86:1 7:1
fgColor-default vs. bgColor-attention-muted on bgColor-default ✅ 16.71:1 7:1
fgColor-default vs. bgColor-attention-muted on bgColor-muted ✅ 13.12:1 7:1
fgColor-default vs. bgColor-severe-muted on bgColor-default ✅ 18.48:1 7:1
fgColor-default vs. bgColor-severe-muted on bgColor-muted ✅ 14.9:1 7:1
fgColor-default vs. bgColor-done-muted ✅ 14.88:1 7:1
fgColor-default vs. bgColor-sponsors-muted on bgColor-default ✅ 18.52:1 7:1
fgColor-default vs. bgColor-sponsors-muted on bgColor-muted ✅ 14.79:1 7:1
fgColor-neutral vs. bgColor-default ✅ 14.18:1 7:1
fgColor-neutral vs. bgColor-muted ✅ 11.96:1 7:1
fgColor-neutral vs. bgColor-inset ✅ 14.18:1 7:1
fgColor-accent vs. bgColor-default ✅ 9.9:1 7:1
fgColor-accent vs. bgColor-muted ✅ 8.34:1 7:1
fgColor-accent vs. bgColor-inset ✅ 9.9:1 7:1
fgColor-success vs. bgColor-default ✅ 11.92:1 7:1
fgColor-success vs. bgColor-muted ✅ 10.05:1 7:1
fgColor-success vs. bgColor-inset ✅ 11.92:1 7:1
fgColor-open vs. bgColor-default ✅ 11.92:1 7:1
fgColor-open vs. bgColor-muted ✅ 10.05:1 7:1
fgColor-open vs. bgColor-inset ✅ 11.92:1 7:1
fgColor-danger vs. bgColor-default ✅ 9.68:1 7:1
fgColor-danger vs. bgColor-muted ✅ 8.16:1 7:1
fgColor-danger vs. bgColor-inset ✅ 9.68:1 7:1
fgColor-closed vs. bgColor-default ✅ 9.68:1 7:1
fgColor-closed vs. bgColor-muted ✅ 8.16:1 7:1
fgColor-closed vs. bgColor-inset ✅ 9.68:1 7:1
fgColor-attention vs. bgColor-default ✅ 11.26:1 7:1
fgColor-attention vs. bgColor-muted ✅ 9.49:1 7:1
fgColor-attention vs. bgColor-inset ✅ 11.26:1 7:1
fgColor-severe vs. bgColor-default ✅ 9.68:1 7:1
fgColor-severe vs. bgColor-muted ✅ 8.16:1 7:1
fgColor-severe vs. bgColor-inset ✅ 9.68:1 7:1
fgColor-done vs. bgColor-default ✅ 14.18:1 7:1
fgColor-done vs. bgColor-muted ✅ 11.96:1 7:1
fgColor-done vs. bgColor-inset ✅ 14.18:1 7:1
fgColor-upsell vs. bgColor-default ✅ 14.18:1 7:1
fgColor-upsell vs. bgColor-muted ✅ 11.96:1 7:1
fgColor-upsell vs. bgColor-inset ✅ 14.18:1 7:1
fgColor-sponsors vs. bgColor-default ✅ 9.85:1 7:1
fgColor-sponsors vs. bgColor-muted ✅ 8.3:1 7:1
fgColor-sponsors vs. bgColor-inset ✅ 9.85:1 7:1
fgColor-neutral vs. bgColor-neutral-muted ✅ 10.28:1 7:1
fgColor-accent vs. bgColor-accent-muted on bgColor-default ✅ 8.85:1 7:1
fgColor-accent vs. bgColor-accent-muted on bgColor-muted ✅ 7.03:1 7:1
fgColor-success vs. bgColor-success-muted on bgColor-default ✅ 10.66:1 7:1
fgColor-success vs. bgColor-success-muted on bgColor-muted ✅ 8.46:1 7:1
fgColor-open vs. bgColor-open-muted on bgColor-default ✅ 10.66:1 7:1
fgColor-open vs. bgColor-open-muted on bgColor-muted ✅ 8.46:1 7:1
fgColor-danger vs. bgColor-danger-muted on bgColor-default ✅ 8.7:1 7:1
fgColor-danger vs. bgColor-danger-muted on bgColor-muted ✅ 7.01:1 7:1
fgColor-closed vs. bgColor-closed-muted on bgColor-default ✅ 8.7:1 7:1
fgColor-closed vs. bgColor-closed-muted on bgColor-muted ✅ 7.01:1 7:1
fgColor-attention vs. bgColor-attention-muted on bgColor-default ✅ 9.16:1 7:1
fgColor-attention vs. bgColor-attention-muted on bgColor-muted ✅ 7.2:1 7:1
fgColor-severe vs. bgColor-severe-muted on bgColor-default ✅ 8.71:1 7:1
fgColor-severe vs. bgColor-severe-muted on bgColor-muted ✅ 7.03:1 7:1
fgColor-done vs. bgColor-done-muted ✅ 10.28:1 7:1
fgColor-upsell (#d1d7e0) vs. bgColor-upsell-muted (#6921d7) ❌ 5.18:1 7:1
fgColor-sponsors vs. bgColor-sponsors-muted on bgColor-default ✅ 8.88:1 7:1
fgColor-sponsors vs. bgColor-sponsors-muted on bgColor-muted ✅ 7.09:1 7:1
fgColor-onEmphasis vs. bgColor-neutral-emphasis ✅ 9.84:1 7:1
fgColor-onEmphasis vs. bgColor-accent-emphasis ✅ 7.51:1 7:1
fgColor-onEmphasis vs. bgColor-success-emphasis ✅ 7.51:1 7:1
fgColor-onEmphasis vs. bgColor-open-emphasis ✅ 7.51:1 7:1
fgColor-onEmphasis vs. bgColor-danger-emphasis ✅ 7.51:1 7:1
fgColor-onEmphasis vs. bgColor-closed-emphasis ✅ 7.51:1 7:1
fgColor-onEmphasis vs. bgColor-attention-emphasis ✅ 7.51:1 7:1
fgColor-onEmphasis vs. bgColor-severe-emphasis ✅ 7.51:1 7:1
fgColor-onEmphasis vs. bgColor-done-emphasis ✅ 9.84:1 7:1
fgColor-onEmphasis (#ffffff) vs. bgColor-upsell-emphasis (#b87fff) ❌ 2.79:1 7:1
fgColor-onEmphasis vs. bgColor-sponsors-emphasis ✅ 7.5:1 7:1
control-borderColor-emphasis vs. bgColor-default ✅ 10.88:1 4.5:1
control-borderColor-emphasis vs. bgColor-muted ✅ 9.17:1 4.5:1
display-gray-fgColor vs. display-gray-bgColor-muted ✅ 9.23:1 7:1
display-indigo-fgColor vs. display-indigo-bgColor-muted ✅ 9.1:1 7:1
display-blue-fgColor vs. display-blue-bgColor-muted ✅ 9:1 7:1
display-cyan-fgColor vs. display-cyan-bgColor-muted ✅ 9.07:1 7:1
display-teal-fgColor vs. display-teal-bgColor-muted ✅ 9.35:1 7:1
display-pine-fgColor vs. display-pine-bgColor-muted ✅ 9.17:1 7:1
display-green-fgColor vs. display-green-bgColor-muted ✅ 9:1 7:1
display-lime-fgColor vs. display-lime-bgColor-muted ✅ 9.07:1 7:1
display-olive-fgColor vs. display-olive-bgColor-muted ✅ 9.05:1 7:1
display-lemon-fgColor vs. display-lemon-bgColor-muted ✅ 8.74:1 7:1
display-yellow-fgColor vs. display-yellow-bgColor-muted ✅ 8.84:1 7:1
display-orange-fgColor vs. display-orange-bgColor-muted ✅ 9.02:1 7:1
display-red-fgColor vs. display-red-bgColor-muted ✅ 9.37:1 7:1
display-coral-fgColor vs. display-coral-bgColor-muted ✅ 9.17:1 7:1
display-pink-fgColor vs. display-pink-bgColor-muted ✅ 9.16:1 7:1
display-plum-fgColor vs. display-plum-bgColor-muted ✅ 9:1 7:1
display-purple-fgColor vs. display-purple-bgColor-muted ✅ 9.18:1 7:1
display-brown-fgColor vs. display-brown-bgColor-muted ✅ 8.91:1 7:1
display-auburn-fgColor vs. display-auburn-bgColor-muted ✅ 9.14:1 7:1
fgColor-onEmphasis vs. display-gray-bgColor-emphasis ✅ 8.41:1 7:1
fgColor-onEmphasis vs. display-indigo-bgColor-emphasis ✅ 8.59:1 7:1
fgColor-onEmphasis vs. display-blue-bgColor-emphasis ✅ 8.6:1 7:1
fgColor-onEmphasis vs. display-cyan-bgColor-emphasis ✅ 8.5:1 7:1
fgColor-onEmphasis vs. display-teal-bgColor-emphasis ✅ 8.52:1 7:1
fgColor-onEmphasis vs. display-pine-bgColor-emphasis ✅ 8.21:1 7:1
fgColor-onEmphasis vs. display-green-bgColor-emphasis ✅ 8.3:1 7:1
fgColor-onEmphasis vs. display-lime-bgColor-emphasis ✅ 8.56:1 7:1
fgColor-onEmphasis vs. display-olive-bgColor-emphasis ✅ 8.41:1 7:1
fgColor-onEmphasis vs. display-lemon-bgColor-emphasis ✅ 8.25:1 7:1
fgColor-onEmphasis vs. display-yellow-bgColor-emphasis ✅ 8.47:1 7:1
fgColor-onEmphasis vs. display-orange-bgColor-emphasis ✅ 8.41:1 7:1
fgColor-onEmphasis vs. display-red-bgColor-emphasis ✅ 8.57:1 7:1
fgColor-onEmphasis vs. display-coral-bgColor-emphasis ✅ 8.32:1 7:1
fgColor-onEmphasis vs. display-pink-bgColor-emphasis ✅ 8.5:1 7:1
fgColor-onEmphasis vs. display-plum-bgColor-emphasis ✅ 8.51:1 7:1
fgColor-onEmphasis vs. display-purple-bgColor-emphasis ✅ 8.52:1 7:1
fgColor-onEmphasis vs. display-brown-bgColor-emphasis ✅ 8.43:1 7:1
fgColor-onEmphasis vs. display-auburn-bgColor-emphasis ✅ 8.3:1 7:1
bgColor-default vs. display-gray-borderColor-emphasis ✅ 7.81:1 4.5:1
bgColor-default vs. display-indigo-borderColor-emphasis ✅ 7.92:1 4.5:1
bgColor-default vs. display-blue-borderColor-emphasis ✅ 7.61:1 4.5:1
bgColor-default vs. display-cyan-borderColor-emphasis ✅ 7.85:1 4.5:1
bgColor-default vs. display-teal-borderColor-emphasis ✅ 7.67:1 4.5:1
bgColor-default vs. display-pine-borderColor-emphasis ✅ 7.8:1 4.5:1
bgColor-default vs. display-green-borderColor-emphasis ✅ 7.66:1 4.5:1
bgColor-default vs. display-lime-borderColor-emphasis ✅ 7.8:1 4.5:1
bgColor-default vs. display-olive-borderColor-emphasis ✅ 7.84:1 4.5:1
bgColor-default vs. display-lemon-borderColor-emphasis ✅ 7.61:1 4.5:1
bgColor-default vs. display-yellow-borderColor-emphasis ✅ 7.65:1 4.5:1
bgColor-default vs. display-orange-borderColor-emphasis ✅ 7.7:1 4.5:1
bgColor-default vs. display-red-borderColor-emphasis ✅ 7.85:1 4.5:1
bgColor-default vs. display-coral-borderColor-emphasis ✅ 7.61:1 4.5:1
bgColor-default vs. display-pink-borderColor-emphasis ✅ 7.63:1 4.5:1
bgColor-default vs. display-plum-borderColor-emphasis ✅ 7.83:1 4.5:1
bgColor-default vs. display-purple-borderColor-emphasis ✅ 7.62:1 4.5:1
bgColor-default vs. display-brown-borderColor-emphasis ✅ 7.65:1 4.5:1
bgColor-default vs. display-auburn-borderColor-emphasis ✅ 7.75:1 4.5:1
bgColor-muted vs. display-gray-borderColor-emphasis ✅ 6.58:1 4.5:1
bgColor-muted vs. display-indigo-borderColor-emphasis ✅ 6.68:1 4.5:1
bgColor-muted vs. display-blue-borderColor-emphasis ✅ 6.42:1 4.5:1
bgColor-muted vs. display-cyan-borderColor-emphasis ✅ 6.62:1 4.5:1
bgColor-muted vs. display-teal-borderColor-emphasis ✅ 6.46:1 4.5:1
bgColor-muted vs. display-pine-borderColor-emphasis ✅ 6.58:1 4.5:1
bgColor-muted vs. display-green-borderColor-emphasis ✅ 6.46:1 4.5:1
bgColor-muted vs. display-lime-borderColor-emphasis ✅ 6.58:1 4.5:1
bgColor-muted vs. display-olive-borderColor-emphasis ✅ 6.61:1 4.5:1
bgColor-muted vs. display-lemon-borderColor-emphasis ✅ 6.41:1 4.5:1
bgColor-muted vs. display-yellow-borderColor-emphasis ✅ 6.45:1 4.5:1
bgColor-muted vs. display-orange-borderColor-emphasis ✅ 6.49:1 4.5:1
bgColor-muted vs. display-red-borderColor-emphasis ✅ 6.62:1 4.5:1
bgColor-muted vs. display-coral-borderColor-emphasis ✅ 6.42:1 4.5:1
bgColor-muted vs. display-pink-borderColor-emphasis ✅ 6.43:1 4.5:1
bgColor-muted vs. display-plum-borderColor-emphasis ✅ 6.6:1 4.5:1
bgColor-muted vs. display-purple-borderColor-emphasis ✅ 6.42:1 4.5:1
bgColor-muted vs. display-brown-borderColor-emphasis ✅ 6.45:1 4.5:1
bgColor-muted vs. display-auburn-borderColor-emphasis ✅ 6.53:1 4.5:1
display-gray-borderColor-emphasis vs. display-gray-bgColor-muted ✅ 6.48:1 4.5:1
display-indigo-borderColor-emphasis vs. display-indigo-bgColor-muted ✅ 6.48:1 4.5:1
display-blue-borderColor-emphasis vs. display-blue-bgColor-muted ✅ 6.28:1 4.5:1
display-cyan-borderColor-emphasis vs. display-cyan-bgColor-muted ✅ 6.53:1 4.5:1
display-teal-borderColor-emphasis vs. display-teal-bgColor-muted ✅ 6.39:1 4.5:1
display-pine-borderColor-emphasis vs. display-pine-bgColor-muted ✅ 6.42:1 4.5:1
display-green-borderColor-emphasis vs. display-green-bgColor-muted ✅ 6.24:1 4.5:1
display-lime-borderColor-emphasis vs. display-lime-bgColor-muted ✅ 6.47:1 4.5:1
display-olive-borderColor-emphasis vs. display-olive-bgColor-muted ✅ 6.53:1 4.5:1
display-lemon-borderColor-emphasis vs. display-lemon-bgColor-muted ✅ 6.12:1 4.5:1
display-yellow-borderColor-emphasis vs. display-yellow-bgColor-muted ✅ 6.19:1 4.5:1
display-orange-borderColor-emphasis vs. display-orange-bgColor-muted ✅ 6.26:1 4.5:1
display-red-borderColor-emphasis vs. display-red-bgColor-muted ✅ 6.54:1 4.5:1
display-coral-borderColor-emphasis vs. display-coral-bgColor-muted ✅ 6.34:1 4.5:1
display-pink-borderColor-emphasis vs. display-pink-bgColor-muted ✅ 6.27:1 4.5:1
display-plum-borderColor-emphasis vs. display-plum-bgColor-muted ✅ 6.49:1 4.5:1
display-purple-borderColor-emphasis vs. display-purple-bgColor-muted ✅ 6.34:1 4.5:1
display-brown-borderColor-emphasis vs. display-brown-bgColor-muted ✅ 6.25:1 4.5:1
display-auburn-borderColor-emphasis vs. display-auburn-bgColor-muted ✅ 6.45:1 4.5:1

→ Details

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

Copilot code review Copilot Copilot left review comments

@jonrohan jonrohan Awaiting requested review from jonrohan jonrohan is a code owner automatically assigned from primer/css-reviewers

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@lukasoppermann