Fix inconsistent HC transparent colors by langermank · Pull Request #1025 · primer/primitives

langermank · 2024-08-09T15:56:21Z

Fixing some missing alpha channels and removing duplicate code.

changeset-bot · 2024-08-09T15:56:24Z

🦋 Changeset detected

Latest commit: c782a90

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	Major

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 · 2024-08-09T15:57:10Z

Design Token Contrast Check

`light`: ✅ all checks passed

Show results table for theme: light

contrastPair	pass	contrastRatio	minimumContrastRatio
fgColor-default vs. bgColor-default	✅	15.79:1	4.5:1
fgColor-muted vs. bgColor-default	✅	6.11:1	4.5:1
fgColor-default vs. bgColor-muted	✅	14.83:1	4.5:1
fgColor-muted vs. bgColor-muted	✅	5.74:1	4.5:1
fgColor-default vs. bgColor-inset	✅	14.83:1	4.5:1
fgColor-muted vs. bgColor-inset	✅	5.74:1	4.5:1
control-fgColor-rest vs. bgColor-default	✅	14.63:1	4.5:1
control-fgColor-rest vs. bgColor-muted	✅	13.74:1	4.5:1
control-fgColor-rest vs. bgColor-inset	✅	13.74:1	4.5:1
control-fgColor-rest vs. control-bgColor-rest	✅	13.74:1	4.5:1
control-fgColor-placeholder vs. bgColor-default	✅	6.11:1	4.5:1
control-fgColor-rest vs. control-bgColor-active	✅	12.1:1	4.5:1
control-fgColor-rest vs. control-bgColor-hover	✅	13.02:1	4.5:1
control-fgColor-rest vs. control-bgColor-selected	✅	13.74:1	4.5:1
button-invisible-fgColor-rest vs. bgColor-muted	✅	5.74:1	4.5:1
button-invisible-fgColor-hover vs. button-invisible-bgColor-hover on bgColor-default	✅	5.5:1	4.5:1
button-invisible-fgColor-hover vs. button-invisible-bgColor-hover on bgColor-muted	✅	5.2:1	4.5:1
button-invisible-iconColor-rest vs. bgColor-muted	✅	5.74:1	4.5:1
button-invisible-iconColor-hover vs. button-invisible-bgColor-hover on bgColor-default	✅	5.5:1	4.5:1
button-invisible-iconColor-hover vs. button-invisible-bgColor-hover on bgColor-muted	✅	5.2:1	4.5:1
fgColor-default vs. bgColor-neutral-muted on bgColor-default	✅	13.42:1	4.5:1
fgColor-default vs. bgColor-neutral-muted on bgColor-muted	✅	13.18:1	4.5:1
fgColor-default vs. bgColor-accent-muted	✅	13.88:1	4.5:1
fgColor-default vs. bgColor-success-muted	✅	14.19:1	4.5:1
fgColor-default vs. bgColor-open-muted	✅	14.19:1	4.5:1
fgColor-default vs. bgColor-danger-muted	✅	13.77:1	4.5:1
fgColor-default vs. bgColor-closed-muted	✅	13.77:1	4.5:1
fgColor-default vs. bgColor-attention-muted	✅	14.65:1	4.5:1
fgColor-default vs. bgColor-severe-muted	✅	14.26:1	4.5:1
fgColor-default vs. bgColor-done-muted	✅	14.21:1	4.5:1
fgColor-default vs. bgColor-sponsors-muted	✅	14.24:1	4.5:1
fgColor-neutral vs. bgColor-default	✅	6.11:1	4.5:1
fgColor-neutral vs. bgColor-muted	✅	5.74:1	4.5:1
fgColor-neutral vs. bgColor-inset	✅	5.74:1	4.5:1
fgColor-accent vs. bgColor-default	✅	5.19:1	4.5:1
fgColor-accent vs. bgColor-muted	✅	4.87:1	4.5:1
fgColor-accent vs. bgColor-inset	✅	4.87:1	4.5:1
fgColor-success vs. bgColor-default	✅	5.07:1	4.5:1
fgColor-success vs. bgColor-muted	✅	4.77:1	4.5:1
fgColor-success vs. bgColor-inset	✅	4.77:1	4.5:1
fgColor-open vs. bgColor-default	✅	5.07:1	4.5:1
fgColor-open vs. bgColor-muted	✅	4.77:1	4.5:1
fgColor-open vs. bgColor-inset	✅	4.77:1	4.5:1
fgColor-danger vs. bgColor-default	✅	5.24:1	4.5:1
fgColor-danger vs. bgColor-muted	✅	4.92:1	4.5:1
fgColor-danger vs. bgColor-inset	✅	4.92:1	4.5:1
fgColor-closed vs. bgColor-default	✅	5.24:1	4.5:1
fgColor-closed vs. bgColor-muted	✅	4.92:1	4.5:1
fgColor-closed vs. bgColor-inset	✅	4.92:1	4.5:1
fgColor-attention vs. bgColor-default	✅	4.86:1	4.5:1
fgColor-attention vs. bgColor-muted	✅	4.57:1	4.5:1
fgColor-attention vs. bgColor-inset	✅	4.57:1	4.5:1
fgColor-severe vs. bgColor-default	✅	5.03:1	4.5:1
fgColor-severe vs. bgColor-muted	✅	4.72:1	4.5:1
fgColor-severe vs. bgColor-inset	✅	4.72:1	4.5:1
fgColor-done vs. bgColor-default	✅	5.04:1	4.5:1
fgColor-done vs. bgColor-muted	✅	4.73:1	4.5:1
fgColor-done vs. bgColor-inset	✅	4.73:1	4.5:1
fgColor-upsell vs. bgColor-default	✅	5.04:1	4.5:1
fgColor-upsell vs. bgColor-muted	✅	4.73:1	4.5:1
fgColor-upsell vs. bgColor-inset	✅	4.73:1	4.5:1
fgColor-sponsors vs. bgColor-default	✅	5.04:1	4.5:1
fgColor-sponsors vs. bgColor-muted	✅	4.73:1	4.5:1
fgColor-sponsors vs. bgColor-inset	✅	4.73:1	4.5:1
fgColor-neutral vs. bgColor-neutral-muted on bgColor-default	✅	5.19:1	4.5:1
fgColor-neutral vs. bgColor-neutral-muted on bgColor-muted	✅	5.1:1	4.5:1
fgColor-accent vs. bgColor-accent-muted	✅	4.56:1	4.5:1
fgColor-success vs. bgColor-success-muted	✅	4.56:1	4.5:1
fgColor-open vs. bgColor-open-muted	✅	4.56:1	4.5:1
fgColor-danger vs. bgColor-danger-muted	✅	4.57:1	4.5:1
fgColor-closed vs. bgColor-closed-muted	✅	4.57:1	4.5:1
fgColor-attention vs. bgColor-attention-muted	✅	4.51:1	4.5:1
fgColor-severe vs. bgColor-severe-muted	✅	4.54:1	4.5:1
fgColor-done vs. bgColor-done-muted	✅	4.53:1	4.5:1
fgColor-upsell vs. bgColor-upsell-muted	✅	4.53:1	4.5:1
fgColor-sponsors vs. bgColor-sponsors-muted	✅	4.55:1	4.5:1
fgColor-onEmphasis vs. bgColor-neutral-emphasis	✅	6.11:1	4.5:1
fgColor-onEmphasis vs. bgColor-accent-emphasis	✅	5.19:1	4.5:1
fgColor-onEmphasis vs. bgColor-success-emphasis	✅	4.51:1	4.5:1
fgColor-onEmphasis vs. bgColor-open-emphasis	✅	4.51:1	4.5:1
fgColor-onEmphasis vs. bgColor-danger-emphasis	✅	5.35:1	4.5:1
fgColor-onEmphasis vs. bgColor-closed-emphasis	✅	5.35:1	4.5:1
fgColor-onEmphasis vs. bgColor-attention-emphasis	✅	4.86:1	4.5:1
fgColor-onEmphasis vs. bgColor-severe-emphasis	✅	5.03:1	4.5:1
fgColor-onEmphasis vs. bgColor-done-emphasis	✅	5.04:1	4.5:1
fgColor-onEmphasis vs. bgColor-upsell-emphasis	✅	5.04:1	4.5:1
fgColor-onEmphasis vs. bgColor-sponsors-emphasis	✅	5.04:1	4.5:1
control-borderColor-emphasis vs. bgColor-default	✅	3.45:1	3:1
control-borderColor-emphasis vs. bgColor-muted	✅	3.24:1	3:1
display-gray-fgColor vs. display-gray-bgColor-muted	✅	4.98:1	4.5:1
display-indigo-fgColor vs. display-indigo-bgColor-muted	✅	5.06:1	4.5:1
display-blue-fgColor vs. display-blue-bgColor-muted	✅	5.02:1	4.5:1
display-cyan-fgColor vs. display-cyan-bgColor-muted	✅	5.2:1	4.5:1
display-teal-fgColor vs. display-teal-bgColor-muted	✅	5.05:1	4.5:1
display-pine-fgColor vs. display-pine-bgColor-muted	✅	5.18:1	4.5:1
display-green-fgColor vs. display-green-bgColor-muted	✅	5.18:1	4.5:1
display-lime-fgColor vs. display-lime-bgColor-muted	✅	5.12:1	4.5:1
display-olive-fgColor vs. display-olive-bgColor-muted	✅	5.2:1	4.5:1
display-lemon-fgColor vs. display-lemon-bgColor-muted	✅	5.09:1	4.5:1
display-yellow-fgColor vs. display-yellow-bgColor-muted	✅	5.3:1	4.5:1
display-orange-fgColor vs. display-orange-bgColor-muted	✅	5.14:1	4.5:1
display-red-fgColor vs. display-red-bgColor-muted	✅	4.96:1	4.5:1
display-coral-fgColor vs. display-coral-bgColor-muted	✅	5.01:1	4.5:1
display-pink-fgColor vs. display-pink-bgColor-muted	✅	4.99:1	4.5:1
display-plum-fgColor vs. display-plum-bgColor-muted	✅	5.01:1	4.5:1
display-purple-fgColor vs. display-purple-bgColor-muted	✅	4.93:1	4.5:1
display-brown-fgColor vs. display-brown-bgColor-muted	✅	5.03:1	4.5:1
display-auburn-fgColor vs. display-auburn-bgColor-muted	✅	5.03:1	4.5:1
fgColor-onEmphasis vs. display-gray-bgColor-emphasis	✅	4.96:1	4.5:1
fgColor-onEmphasis vs. display-indigo-bgColor-emphasis	✅	4.88:1	4.5:1
fgColor-onEmphasis vs. display-blue-bgColor-emphasis	✅	4.93:1	4.5:1
fgColor-onEmphasis vs. display-cyan-bgColor-emphasis	✅	4.92:1	4.5:1
fgColor-onEmphasis vs. display-teal-bgColor-emphasis	✅	4.85:1	4.5:1
fgColor-onEmphasis vs. display-pine-bgColor-emphasis	✅	5.06:1	4.5:1
fgColor-onEmphasis vs. display-green-bgColor-emphasis	✅	4.85:1	4.5:1
fgColor-onEmphasis vs. display-lime-bgColor-emphasis	✅	5.03:1	4.5:1
fgColor-onEmphasis vs. display-olive-bgColor-emphasis	✅	5.03:1	4.5:1
fgColor-onEmphasis vs. display-lemon-bgColor-emphasis	✅	4.94:1	4.5:1
fgColor-onEmphasis vs. display-yellow-bgColor-emphasis	✅	4.86:1	4.5:1
fgColor-onEmphasis vs. display-orange-bgColor-emphasis	✅	5:1	4.5:1
fgColor-onEmphasis vs. display-red-bgColor-emphasis	✅	4.98:1	4.5:1
fgColor-onEmphasis vs. display-coral-bgColor-emphasis	✅	4.86:1	4.5:1
fgColor-onEmphasis vs. display-pink-bgColor-emphasis	✅	4.85:1	4.5:1
fgColor-onEmphasis vs. display-plum-bgColor-emphasis	✅	4.93:1	4.5:1
fgColor-onEmphasis vs. display-purple-bgColor-emphasis	✅	4.88:1	4.5:1
fgColor-onEmphasis vs. display-brown-bgColor-emphasis	✅	4.89:1	4.5:1
fgColor-onEmphasis vs. display-auburn-bgColor-emphasis	✅	4.88:1	4.5:1
bgColor-default vs. display-gray-borderColor-emphasis	✅	4.96:1	3:1
bgColor-default vs. display-indigo-borderColor-emphasis	✅	4.88:1	3:1
bgColor-default vs. display-blue-borderColor-emphasis	✅	4.93:1	3:1
bgColor-default vs. display-cyan-borderColor-emphasis	✅	4.92:1	3:1
bgColor-default vs. display-teal-borderColor-emphasis	✅	4.85:1	3:1
bgColor-default vs. display-pine-borderColor-emphasis	✅	5.06:1	3:1
bgColor-default vs. display-green-borderColor-emphasis	✅	4.85:1	3:1
bgColor-default vs. display-lime-borderColor-emphasis	✅	5.03:1	3:1
bgColor-default vs. display-olive-borderColor-emphasis	✅	5.03:1	3:1
bgColor-default vs. display-lemon-borderColor-emphasis	✅	4.94:1	3:1
bgColor-default vs. display-yellow-borderColor-emphasis	✅	4.86:1	3:1
bgColor-default vs. display-orange-borderColor-emphasis	✅	5:1	3:1
bgColor-default vs. display-red-borderColor-emphasis	✅	4.98:1	3:1
bgColor-default vs. display-coral-borderColor-emphasis	✅	4.86:1	3:1
bgColor-default vs. display-pink-borderColor-emphasis	✅	4.85:1	3:1
bgColor-default vs. display-plum-borderColor-emphasis	✅	4.93:1	3:1
bgColor-default vs. display-purple-borderColor-emphasis	✅	4.88:1	3:1
bgColor-default vs. display-brown-borderColor-emphasis	✅	4.89:1	3:1
bgColor-default vs. display-auburn-borderColor-emphasis	✅	4.88:1	3:1
bgColor-muted vs. display-gray-borderColor-emphasis	✅	4.66:1	3:1
bgColor-muted vs. display-indigo-borderColor-emphasis	✅	4.58:1	3:1
bgColor-muted vs. display-blue-borderColor-emphasis	✅	4.63:1	3:1
bgColor-muted vs. display-cyan-borderColor-emphasis	✅	4.62:1	3:1
bgColor-muted vs. display-teal-borderColor-emphasis	✅	4.55:1	3:1
bgColor-muted vs. display-pine-borderColor-emphasis	✅	4.76:1	3:1
bgColor-muted vs. display-green-borderColor-emphasis	✅	4.56:1	3:1
bgColor-muted vs. display-lime-borderColor-emphasis	✅	4.72:1	3:1
bgColor-muted vs. display-olive-borderColor-emphasis	✅	4.72:1	3:1
bgColor-muted vs. display-lemon-borderColor-emphasis	✅	4.64:1	3:1
bgColor-muted vs. display-yellow-borderColor-emphasis	✅	4.56:1	3:1
bgColor-muted vs. display-orange-borderColor-emphasis	✅	4.7:1	3:1
bgColor-muted vs. display-red-borderColor-emphasis	✅	4.67:1	3:1
bgColor-muted vs. display-coral-borderColor-emphasis	✅	4.56:1	3:1
bgColor-muted vs. display-pink-borderColor-emphasis	✅	4.56:1	3:1
bgColor-muted vs. display-plum-borderColor-emphasis	✅	4.63:1	3:1
bgColor-muted vs. display-purple-borderColor-emphasis	✅	4.59:1	3:1
bgColor-muted vs. display-brown-borderColor-emphasis	✅	4.59:1	3:1
bgColor-muted vs. display-auburn-borderColor-emphasis	✅	4.58:1	3:1
display-gray-borderColor-emphasis vs. display-gray-bgColor-muted	✅	4.19:1	3:1
display-indigo-borderColor-emphasis vs. display-indigo-bgColor-muted	✅	4.05:1	3:1
display-blue-borderColor-emphasis vs. display-blue-bgColor-muted	✅	4.14:1	3:1
display-cyan-borderColor-emphasis vs. display-cyan-bgColor-muted	✅	4.11:1	3:1
display-teal-borderColor-emphasis vs. display-teal-bgColor-muted	✅	4.09:1	3:1
display-pine-borderColor-emphasis vs. display-pine-bgColor-muted	✅	4.26:1	3:1
display-green-borderColor-emphasis vs. display-green-bgColor-muted	✅	4.08:1	3:1
display-lime-borderColor-emphasis vs. display-lime-bgColor-muted	✅	4.22:1	3:1
display-olive-borderColor-emphasis vs. display-olive-bgColor-muted	✅	4.26:1	3:1
display-lemon-borderColor-emphasis vs. display-lemon-bgColor-muted	✅	4.16:1	3:1
display-yellow-borderColor-emphasis vs. display-yellow-bgColor-muted	✅	4.1:1	3:1
display-orange-borderColor-emphasis vs. display-orange-bgColor-muted	✅	4.19:1	3:1
display-red-borderColor-emphasis vs. display-red-bgColor-muted	✅	4.08:1	3:1
display-coral-borderColor-emphasis vs. display-coral-bgColor-muted	✅	4.04:1	3:1
display-pink-borderColor-emphasis vs. display-pink-bgColor-muted	✅	4.1:1	3:1
display-plum-borderColor-emphasis vs. display-plum-bgColor-muted	✅	4.14:1	3:1
display-purple-borderColor-emphasis vs. display-purple-bgColor-muted	✅	4.04:1	3:1
display-brown-borderColor-emphasis vs. display-brown-bgColor-muted	✅	4.08:1	3:1
display-auburn-borderColor-emphasis vs. display-auburn-bgColor-muted	✅	4.09:1	3:1

`dark`: ✅ all checks passed

Show results table for theme: dark

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	✅	5.94:1	4.5:1
button-invisible-fgColor-hover vs. button-invisible-bgColor-hover on bgColor-default	✅	5.41:1	4.5:1
button-invisible-fgColor-hover vs. button-invisible-bgColor-hover on bgColor-muted	✅	4.89: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
fgColor-default vs. bgColor-neutral-muted on bgColor-default	✅	12.94:1	4.5:1
fgColor-default vs. bgColor-neutral-muted on bgColor-muted	✅	12.43: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	✅	14.59:1	4.5:1
fgColor-default vs. bgColor-success-muted on bgColor-muted	✅	13.04:1	4.5:1
fgColor-default vs. bgColor-open-muted on bgColor-default	✅	14.59:1	4.5:1
fgColor-default vs. bgColor-open-muted on bgColor-muted	✅	13.04: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.23:1	4.5:1
fgColor-default vs. bgColor-done-muted on bgColor-muted	✅	12.73: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.44:1	4.5:1
fgColor-success vs. bgColor-muted	✅	6.81:1	4.5:1
fgColor-success vs. bgColor-inset	✅	8.08:1	4.5:1
fgColor-open vs. bgColor-default	✅	7.44:1	4.5:1
fgColor-open vs. bgColor-muted	✅	6.81:1	4.5:1
fgColor-open vs. bgColor-inset	✅	8.08: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.32:1	4.5:1
fgColor-done vs. bgColor-muted	✅	5.78:1	4.5:1
fgColor-done vs. bgColor-inset	✅	6.86:1	4.5:1
fgColor-upsell vs. bgColor-default	✅	6.32:1	4.5:1
fgColor-upsell vs. bgColor-muted	✅	5.78:1	4.5:1
fgColor-upsell vs. bgColor-inset	✅	6.86: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	✅	4.83:1	4.5:1
fgColor-neutral vs. bgColor-neutral-muted on bgColor-muted	✅	4.64: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.25:1	4.5:1
fgColor-success vs. bgColor-success-muted on bgColor-muted	✅	5.59:1	4.5:1
fgColor-open vs. bgColor-open-muted on bgColor-default	✅	6.25:1	4.5:1
fgColor-open vs. bgColor-open-muted on bgColor-muted	✅	5.59: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.18:1	4.5:1
fgColor-done vs. bgColor-done-muted on bgColor-muted	✅	4.63:1	4.5:1
fgColor-upsell vs. bgColor-upsell-muted on bgColor-default	✅	5.18:1	4.5:1
fgColor-upsell vs. bgColor-upsell-muted on bgColor-muted	✅	4.63: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	✅	4.6: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

`light_high_contrast`: ❌ 3 checks failed

Show results table for theme: light_high_contrast

contrastPair	pass	contrastRatio	minimumContrastRatio
fgColor-default vs. bgColor-default	✅	20.53:1	7:1
fgColor-muted vs. bgColor-default	✅	8.69:1	7:1
fgColor-default vs. bgColor-muted	✅	16.99:1	7:1
fgColor-muted vs. bgColor-muted	✅	7.19:1	7:1
fgColor-default vs. bgColor-inset	✅	18.27:1	7:1
fgColor-muted vs. bgColor-inset	✅	7.73:1	7:1
control-fgColor-rest vs. bgColor-default	✅	14.63:1	7:1
control-fgColor-rest vs. bgColor-muted	✅	12.1:1	7:1
control-fgColor-rest vs. bgColor-inset	✅	13.02:1	7:1
control-fgColor-rest vs. control-bgColor-rest	✅	11.62:1	7:1
control-fgColor-placeholder vs. bgColor-default	✅	8.69:1	7:1
control-fgColor-rest vs. control-bgColor-active	✅	10.25:1	7:1
control-fgColor-rest vs. control-bgColor-hover	✅	11:1	7:1
control-fgColor-rest vs. control-bgColor-selected	✅	11.62:1	7:1
button-invisible-fgColor-rest vs. bgColor-muted	✅	7.19:1	7:1
button-invisible-fgColor-hover vs. button-invisible-bgColor-hover	❌	6.54:1	7:1
button-invisible-iconColor-rest vs. bgColor-muted	✅	7.19:1	7:1
button-invisible-iconColor-hover vs. button-invisible-bgColor-hover	❌	6.54:1	7:1
fgColor-default vs. bgColor-neutral-muted on bgColor-default	✅	17.45:1	7:1
fgColor-default vs. bgColor-neutral-muted on bgColor-muted	✅	16.5:1	7:1
fgColor-default vs. bgColor-accent-muted	✅	18.46:1	7:1
fgColor-default vs. bgColor-success-muted	✅	18.52:1	7:1
fgColor-default vs. bgColor-open-muted	✅	18.52:1	7:1
fgColor-default vs. bgColor-danger-muted	✅	18.53:1	7:1
fgColor-default vs. bgColor-closed-muted	✅	18.53:1	7:1
fgColor-default vs. bgColor-attention-muted	✅	18.76:1	7:1
fgColor-default vs. bgColor-severe-muted	✅	18.49:1	7:1
fgColor-default vs. bgColor-done-muted	✅	18.54:1	7:1
fgColor-default vs. bgColor-sponsors-muted	✅	18.48:1	7:1
fgColor-neutral vs. bgColor-default	✅	8.69:1	7:1
fgColor-neutral vs. bgColor-muted	✅	7.19:1	7:1
fgColor-neutral vs. bgColor-inset	✅	7.73:1	7:1
fgColor-accent vs. bgColor-default	✅	10.18:1	7:1
fgColor-accent vs. bgColor-muted	✅	8.42:1	7:1
fgColor-accent vs. bgColor-inset	✅	9.06:1	7:1
fgColor-success vs. bgColor-default	✅	10.23:1	7:1
fgColor-success vs. bgColor-muted	✅	8.47:1	7:1
fgColor-success vs. bgColor-inset	✅	9.11:1	7:1
fgColor-open vs. bgColor-default	✅	10.23:1	7:1
fgColor-open vs. bgColor-muted	✅	8.47:1	7:1
fgColor-open vs. bgColor-inset	✅	9.11:1	7:1
fgColor-danger vs. bgColor-default	✅	9.86:1	7:1
fgColor-danger vs. bgColor-muted	✅	8.16:1	7:1
fgColor-danger vs. bgColor-inset	✅	8.77:1	7:1
fgColor-closed vs. bgColor-default	✅	9.86:1	7:1
fgColor-closed vs. bgColor-muted	✅	8.16:1	7:1
fgColor-closed vs. bgColor-inset	✅	8.77:1	7:1
fgColor-attention vs. bgColor-default	✅	10.27:1	7:1
fgColor-attention vs. bgColor-muted	✅	8.5:1	7:1
fgColor-attention vs. bgColor-inset	✅	9.14:1	7:1
fgColor-severe vs. bgColor-default	✅	10.24:1	7:1
fgColor-severe vs. bgColor-muted	✅	8.48:1	7:1
fgColor-severe vs. bgColor-inset	✅	9.12:1	7:1
fgColor-done vs. bgColor-default	✅	10.15:1	7:1
fgColor-done vs. bgColor-muted	✅	8.4:1	7:1
fgColor-done vs. bgColor-inset	✅	9.03:1	7:1
fgColor-upsell vs. bgColor-default	✅	10.15:1	7:1
fgColor-upsell vs. bgColor-muted	✅	8.4:1	7:1
fgColor-upsell vs. bgColor-inset	✅	9.03:1	7:1
fgColor-sponsors vs. bgColor-default	✅	10.18:1	7:1
fgColor-sponsors vs. bgColor-muted	✅	8.42:1	7:1
fgColor-sponsors vs. bgColor-inset	✅	9.06:1	7:1
fgColor-neutral vs. bgColor-neutral-muted on bgColor-default	✅	7.39:1	7:1
fgColor-neutral vs. bgColor-neutral-muted on bgColor-muted	❌	6.98:1	7:1
fgColor-accent vs. bgColor-accent-muted	✅	9.15:1	7:1
fgColor-success vs. bgColor-success-muted	✅	9.23:1	7:1
fgColor-open vs. bgColor-open-muted	✅	9.23:1	7:1
fgColor-danger vs. bgColor-danger-muted	✅	8.89:1	7:1
fgColor-closed vs. bgColor-closed-muted	✅	8.89:1	7:1
fgColor-attention vs. bgColor-attention-muted	✅	9.38:1	7:1
fgColor-severe vs. bgColor-severe-muted	✅	9.22:1	7:1
fgColor-done vs. bgColor-done-muted	✅	9.16:1	7:1
fgColor-upsell vs. bgColor-upsell-muted	✅	9.16:1	7:1
fgColor-sponsors vs. bgColor-sponsors-muted	✅	9.16:1	7:1
fgColor-onEmphasis vs. bgColor-neutral-emphasis	✅	8.69:1	7:1
fgColor-onEmphasis vs. bgColor-accent-emphasis	✅	8.02:1	7:1
fgColor-onEmphasis vs. bgColor-success-emphasis	✅	8.09:1	7:1
fgColor-onEmphasis vs. bgColor-open-emphasis	✅	8.09:1	7:1
fgColor-onEmphasis vs. bgColor-danger-emphasis	✅	8.09:1	7:1
fgColor-onEmphasis vs. bgColor-closed-emphasis	✅	8.09:1	7:1
fgColor-onEmphasis vs. bgColor-attention-emphasis	✅	8.09:1	7:1
fgColor-onEmphasis vs. bgColor-severe-emphasis	✅	8.08:1	7:1
fgColor-onEmphasis vs. bgColor-done-emphasis	✅	8.05:1	7:1
fgColor-onEmphasis vs. bgColor-upsell-emphasis	✅	8.05:1	7:1
fgColor-onEmphasis vs. bgColor-sponsors-emphasis	✅	8.04:1	7:1
control-borderColor-emphasis vs. bgColor-default	✅	8.69:1	4.5:1
control-borderColor-emphasis vs. bgColor-muted	✅	7.19:1	4.5:1
display-gray-fgColor vs. display-gray-bgColor-muted	✅	8.22:1	7:1
display-indigo-fgColor vs. display-indigo-bgColor-muted	✅	8.12:1	7:1
display-blue-fgColor vs. display-blue-bgColor-muted	✅	8.28:1	7:1
display-cyan-fgColor vs. display-cyan-bgColor-muted	✅	8.49:1	7:1
display-teal-fgColor vs. display-teal-bgColor-muted	✅	8.6:1	7:1
display-pine-fgColor vs. display-pine-bgColor-muted	✅	8.47:1	7:1
display-green-fgColor vs. display-green-bgColor-muted	✅	8.27:1	7:1
display-lime-fgColor vs. display-lime-bgColor-muted	✅	8.3:1	7:1
display-olive-fgColor vs. display-olive-bgColor-muted	✅	8.19:1	7:1
display-lemon-fgColor vs. display-lemon-bgColor-muted	✅	8.55:1	7:1
display-yellow-fgColor vs. display-yellow-bgColor-muted	✅	8.35:1	7:1
display-orange-fgColor vs. display-orange-bgColor-muted	✅	8.3:1	7:1
display-red-fgColor vs. display-red-bgColor-muted	✅	8.08:1	7:1
display-coral-fgColor vs. display-coral-bgColor-muted	✅	8.31:1	7:1
display-pink-fgColor vs. display-pink-bgColor-muted	✅	8.31:1	7:1
display-plum-fgColor vs. display-plum-bgColor-muted	✅	8.13:1	7:1
display-purple-fgColor vs. display-purple-bgColor-muted	✅	8.13:1	7:1
display-brown-fgColor vs. display-brown-bgColor-muted	✅	8.15:1	7:1
display-auburn-fgColor vs. display-auburn-bgColor-muted	✅	8.36:1	7:1
fgColor-onEmphasis vs. display-gray-bgColor-emphasis	✅	7.75:1	7:1
fgColor-onEmphasis vs. display-indigo-bgColor-emphasis	✅	7.55:1	7:1
fgColor-onEmphasis vs. display-blue-bgColor-emphasis	✅	7.74:1	7:1
fgColor-onEmphasis vs. display-cyan-bgColor-emphasis	✅	7.95:1	7:1
fgColor-onEmphasis vs. display-teal-bgColor-emphasis	✅	7.79:1	7:1
fgColor-onEmphasis vs. display-pine-bgColor-emphasis	✅	7.86:1	7:1
fgColor-onEmphasis vs. display-green-bgColor-emphasis	✅	7.82:1	7:1
fgColor-onEmphasis vs. display-lime-bgColor-emphasis	✅	7.76:1	7:1
fgColor-onEmphasis vs. display-olive-bgColor-emphasis	✅	7.55:1	7:1
fgColor-onEmphasis vs. display-lemon-bgColor-emphasis	✅	7.85:1	7:1
fgColor-onEmphasis vs. display-yellow-bgColor-emphasis	✅	7.63:1	7:1
fgColor-onEmphasis vs. display-orange-bgColor-emphasis	✅	7.53:1	7:1
fgColor-onEmphasis vs. display-red-bgColor-emphasis	✅	7.76:1	7:1
fgColor-onEmphasis vs. display-coral-bgColor-emphasis	✅	7.79:1	7:1
fgColor-onEmphasis vs. display-pink-bgColor-emphasis	✅	7.68:1	7:1
fgColor-onEmphasis vs. display-plum-bgColor-emphasis	✅	7.63:1	7:1
fgColor-onEmphasis vs. display-purple-bgColor-emphasis	✅	7.66:1	7:1
fgColor-onEmphasis vs. display-brown-bgColor-emphasis	✅	7.55:1	7:1
fgColor-onEmphasis vs. display-auburn-bgColor-emphasis	✅	7.69:1	7:1
bgColor-default vs. display-gray-borderColor-emphasis	✅	5.91:1	4.5:1
bgColor-default vs. display-indigo-borderColor-emphasis	✅	6.1:1	4.5:1
bgColor-default vs. display-blue-borderColor-emphasis	✅	5.98:1	4.5:1
bgColor-default vs. display-cyan-borderColor-emphasis	✅	6.22:1	4.5:1
bgColor-default vs. display-teal-borderColor-emphasis	✅	5.98:1	4.5:1
bgColor-default vs. display-pine-borderColor-emphasis	✅	6.16:1	4.5:1
bgColor-default vs. display-green-borderColor-emphasis	✅	6.16:1	4.5:1
bgColor-default vs. display-lime-borderColor-emphasis	✅	6.09:1	4.5:1
bgColor-default vs. display-olive-borderColor-emphasis	✅	6.15:1	4.5:1
bgColor-default vs. display-lemon-borderColor-emphasis	✅	6.04:1	4.5:1
bgColor-default vs. display-yellow-borderColor-emphasis	✅	6.27:1	4.5:1
bgColor-default vs. display-orange-borderColor-emphasis	✅	6.14:1	4.5:1
bgColor-default vs. display-red-borderColor-emphasis	✅	6.06:1	4.5:1
bgColor-default vs. display-coral-borderColor-emphasis	✅	6.02:1	4.5:1
bgColor-default vs. display-pink-borderColor-emphasis	✅	5.91:1	4.5:1
bgColor-default vs. display-plum-borderColor-emphasis	✅	5.97:1	4.5:1
bgColor-default vs. display-purple-borderColor-emphasis	✅	5.95:1	4.5:1
bgColor-default vs. display-brown-borderColor-emphasis	✅	6.04:1	4.5:1
bgColor-default vs. display-auburn-borderColor-emphasis	✅	6:1	4.5:1
bgColor-muted vs. display-gray-borderColor-emphasis	✅	4.89:1	4.5:1
bgColor-muted vs. display-indigo-borderColor-emphasis	✅	5.05:1	4.5:1
bgColor-muted vs. display-blue-borderColor-emphasis	✅	4.95:1	4.5:1
bgColor-muted vs. display-cyan-borderColor-emphasis	✅	5.15:1	4.5:1
bgColor-muted vs. display-teal-borderColor-emphasis	✅	4.95:1	4.5:1
bgColor-muted vs. display-pine-borderColor-emphasis	✅	5.1:1	4.5:1
bgColor-muted vs. display-green-borderColor-emphasis	✅	5.1:1	4.5:1
bgColor-muted vs. display-lime-borderColor-emphasis	✅	5.04:1	4.5:1
bgColor-muted vs. display-olive-borderColor-emphasis	✅	5.09:1	4.5:1
bgColor-muted vs. display-lemon-borderColor-emphasis	✅	5:1	4.5:1
bgColor-muted vs. display-yellow-borderColor-emphasis	✅	5.19:1	4.5:1
bgColor-muted vs. display-orange-borderColor-emphasis	✅	5.08:1	4.5:1
bgColor-muted vs. display-red-borderColor-emphasis	✅	5.01:1	4.5:1
bgColor-muted vs. display-coral-borderColor-emphasis	✅	4.98:1	4.5:1
bgColor-muted vs. display-pink-borderColor-emphasis	✅	4.89:1	4.5:1
bgColor-muted vs. display-plum-borderColor-emphasis	✅	4.94:1	4.5:1
bgColor-muted vs. display-purple-borderColor-emphasis	✅	4.93:1	4.5:1
bgColor-muted vs. display-brown-borderColor-emphasis	✅	5:1	4.5:1
bgColor-muted vs. display-auburn-borderColor-emphasis	✅	4.96:1	4.5:1
display-gray-borderColor-emphasis vs. display-gray-bgColor-muted	✅	4.98:1	4.5:1
display-indigo-borderColor-emphasis vs. display-indigo-bgColor-muted	✅	5.06:1	4.5:1
display-blue-borderColor-emphasis vs. display-blue-bgColor-muted	✅	5.02:1	4.5:1
display-cyan-borderColor-emphasis vs. display-cyan-bgColor-muted	✅	5.2:1	4.5:1
display-teal-borderColor-emphasis vs. display-teal-bgColor-muted	✅	5.05:1	4.5:1
display-pine-borderColor-emphasis vs. display-pine-bgColor-muted	✅	5.18:1	4.5:1
display-green-borderColor-emphasis vs. display-green-bgColor-muted	✅	5.18:1	4.5:1
display-lime-borderColor-emphasis vs. display-lime-bgColor-muted	✅	5.12:1	4.5:1
display-olive-borderColor-emphasis vs. display-olive-bgColor-muted	✅	5.2:1	4.5:1
display-lemon-borderColor-emphasis vs. display-lemon-bgColor-muted	✅	5.09:1	4.5:1
display-yellow-borderColor-emphasis vs. display-yellow-bgColor-muted	✅	5.3:1	4.5:1
display-orange-borderColor-emphasis vs. display-orange-bgColor-muted	✅	5.14:1	4.5:1
display-red-borderColor-emphasis vs. display-red-bgColor-muted	✅	4.96:1	4.5:1
display-coral-borderColor-emphasis vs. display-coral-bgColor-muted	✅	5.01:1	4.5:1
display-pink-borderColor-emphasis vs. display-pink-bgColor-muted	✅	4.99:1	4.5:1
display-plum-borderColor-emphasis vs. display-plum-bgColor-muted	✅	5.01:1	4.5:1
display-purple-borderColor-emphasis vs. display-purple-bgColor-muted	✅	4.93:1	4.5:1
display-brown-borderColor-emphasis vs. display-brown-bgColor-muted	✅	5.03:1	4.5:1
display-auburn-borderColor-emphasis vs. display-auburn-bgColor-muted	✅	5.03:1	4.5:1

`dark_high_contrast`: ❌ 6 checks failed

Show results table for theme: dark_high_contrast

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	✅	9.17:1	7:1
button-invisible-fgColor-hover vs. button-invisible-bgColor-hover	✅	9.17: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
fgColor-default vs. bgColor-neutral-muted on bgColor-default	✅	14.86:1	7:1
fgColor-default vs. bgColor-neutral-muted on bgColor-muted	✅	13.53: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	✅	17.09:1	7:1
fgColor-default vs. bgColor-success-muted on bgColor-muted	✅	13.4:1	7:1
fgColor-default vs. bgColor-open-muted on bgColor-default	✅	17.09:1	7:1
fgColor-default vs. bgColor-open-muted on bgColor-muted	✅	13.4: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 on bgColor-default	✅	17.06:1	7:1
fgColor-default vs. bgColor-done-muted on bgColor-muted	✅	13.46: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	✅	10.88:1	7:1
fgColor-neutral vs. bgColor-muted	✅	9.17:1	7:1
fgColor-neutral vs. bgColor-inset	✅	10.88:1	7:1
fgColor-accent vs. bgColor-default	✅	9.8:1	7:1
fgColor-accent vs. bgColor-muted	✅	8.26:1	7:1
fgColor-accent vs. bgColor-inset	✅	9.8:1	7:1
fgColor-success vs. bgColor-default	✅	10.68:1	7:1
fgColor-success vs. bgColor-muted	✅	9.01:1	7:1
fgColor-success vs. bgColor-inset	✅	10.68:1	7:1
fgColor-open vs. bgColor-default	✅	10.68:1	7:1
fgColor-open vs. bgColor-muted	✅	9.01:1	7:1
fgColor-open vs. bgColor-inset	✅	10.68: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	✅	9.65:1	7:1
fgColor-done vs. bgColor-muted	✅	8.14:1	7:1
fgColor-done vs. bgColor-inset	✅	9.65:1	7:1
fgColor-upsell vs. bgColor-default	✅	9.65:1	7:1
fgColor-upsell vs. bgColor-muted	✅	8.14:1	7:1
fgColor-upsell vs. bgColor-inset	✅	9.65:1	7:1
fgColor-sponsors vs. bgColor-default	✅	9.66:1	7:1
fgColor-sponsors vs. bgColor-muted	✅	8.15:1	7:1
fgColor-sponsors vs. bgColor-inset	✅	9.66:1	7:1
fgColor-neutral vs. bgColor-neutral-muted on bgColor-default	✅	7.87:1	7:1
fgColor-neutral vs. bgColor-neutral-muted on bgColor-muted	✅	7.16:1	7:1
fgColor-accent vs. bgColor-accent-muted on bgColor-default	✅	8.77:1	7:1
fgColor-accent vs. bgColor-accent-muted on bgColor-muted	❌	6.96:1	7:1
fgColor-success vs. bgColor-success-muted on bgColor-default	✅	8.89:1	7:1
fgColor-success vs. bgColor-success-muted on bgColor-muted	❌	6.97:1	7:1
fgColor-open vs. bgColor-open-muted on bgColor-default	✅	8.89:1	7:1
fgColor-open vs. bgColor-open-muted on bgColor-muted	❌	6.97: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 on bgColor-default	✅	8.02:1	7:1
fgColor-done vs. bgColor-done-muted on bgColor-muted	❌	6.32:1	7:1
fgColor-upsell vs. bgColor-upsell-muted on bgColor-default	✅	8.02:1	7:1
fgColor-upsell vs. bgColor-upsell-muted on bgColor-muted	❌	6.32:1	7:1
fgColor-sponsors vs. bgColor-sponsors-muted on bgColor-default	✅	8.71:1	7:1
fgColor-sponsors vs. bgColor-sponsors-muted on bgColor-muted	❌	6.96: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.58:1	7:1
fgColor-onEmphasis vs. bgColor-open-emphasis	✅	7.58: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	✅	7.5:1	7:1
fgColor-onEmphasis vs. bgColor-upsell-emphasis	✅	7.5: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

github-actions · 2024-08-09T15:57:28Z

Design Token Diff

/css/functional/themes/dark-high-contrast.css

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-high-contrast.css	2024-08-09 17:07:45.112619046 +0000
@@ -460,25 +460,25 @@
 --bgColor-transparent: #00000000;
 --bgColor-neutral-muted: #2f3742b3;
 --bgColor-neutral-emphasis: #3d444d;
-  --bgColor-accent-muted: #409eff1a;
+  --bgColor-accent-muted: #5cacff1a;
 --bgColor-accent-emphasis: #194fb1;
-  --bgColor-success-muted: #0ac74024;
+  --bgColor-success-muted: #0ac74026;
 --bgColor-success-emphasis: #006222;
-  --bgColor-open-muted: #0ac74024;
+  --bgColor-open-muted: #0ac74026;
 --bgColor-open-emphasis: #006222;
 --bgColor-attention-muted: #edaa2726;
 --bgColor-attention-emphasis: #7b4900;
-  --bgColor-severe-muted: #f48b2516;
+  --bgColor-severe-muted: #f48b251a;
 --bgColor-severe-emphasis: #8f3c00;
-  --bgColor-danger-muted: #ff808017;
+  --bgColor-danger-muted: #ff80801a;
 --bgColor-danger-emphasis: #ad0116;
-  --bgColor-closed-muted: #ff808017;
+  --bgColor-closed-muted: #ff80801a;
 --bgColor-closed-emphasis: #ad0116;
-  --bgColor-done-muted: #b87fff17;
+  --bgColor-done-muted: #bf8fff26;
 --bgColor-done-emphasis: #6921d7;
-  --bgColor-upsell-muted: #b87fff17;
+  --bgColor-upsell-muted: #bf8fff26;
 --bgColor-upsell-emphasis: #6921d7;
-  --bgColor-sponsors-muted: #ef6eb117;
+  --bgColor-sponsors-muted: #f87cbd1a;
 --bgColor-sponsors-emphasis: #9c1d6a;
 --borderColor-default: #b7bdc8;
 --borderColor-muted: #b7bdc8;
@@ -500,11 +500,11 @@
 --borderColor-severe-emphasis: #e7811d;
 --borderColor-danger-muted: #ff8080;
 --borderColor-danger-emphasis: #ff6a69;
-  --borderColor-closed-muted: #ff808066;
+  --borderColor-closed-muted: #ff8080;
 --borderColor-closed-emphasis: #ff6a69;
 --borderColor-done-muted: #bf8fff;
 --borderColor-done-emphasis: #b87fff;
-  --borderColor-upsell-muted: #bf8fff66;
+  --borderColor-upsell-muted: #bf8fff;
 --borderColor-upsell-emphasis: #b87fff;
 --borderColor-sponsors-muted: #f87cbd;
 --borderColor-sponsors-emphasis: #ef6eb1;
@@ -1027,25 +1027,25 @@
   --bgColor-transparent: #00000000;
   --bgColor-neutral-muted: #2f3742b3;
   --bgColor-neutral-emphasis: #3d444d;
-    --bgColor-accent-muted: #409eff1a;
+    --bgColor-accent-muted: #5cacff1a;
   --bgColor-accent-emphasis: #194fb1;
-    --bgColor-success-muted: #0ac74024;
+    --bgColor-success-muted: #0ac74026;
   --bgColor-success-emphasis: #006222;
-    --bgColor-open-muted: #0ac74024;
+    --bgColor-open-muted: #0ac74026;
   --bgColor-open-emphasis: #006222;
   --bgColor-attention-muted: #edaa2726;
   --bgColor-attention-emphasis: #7b4900;
-    --bgColor-severe-muted: #f48b2516;
+    --bgColor-severe-muted: #f48b251a;
   --bgColor-severe-emphasis: #8f3c00;
-    --bgColor-danger-muted: #ff808017;
+    --bgColor-danger-muted: #ff80801a;
   --bgColor-danger-emphasis: #ad0116;
-    --bgColor-closed-muted: #ff808017;
+    --bgColor-closed-muted: #ff80801a;
   --bgColor-closed-emphasis: #ad0116;
-    --bgColor-done-muted: #b87fff17;
+    --bgColor-done-muted: #bf8fff26;
   --bgColor-done-emphasis: #6921d7;
-    --bgColor-upsell-muted: #b87fff17;
+    --bgColor-upsell-muted: #bf8fff26;
   --bgColor-upsell-emphasis: #6921d7;
-    --bgColor-sponsors-muted: #ef6eb117;
+    --bgColor-sponsors-muted: #f87cbd1a;
   --bgColor-sponsors-emphasis: #9c1d6a;
   --borderColor-default: #b7bdc8;
   --borderColor-muted: #b7bdc8;
@@ -1067,11 +1067,11 @@
   --borderColor-severe-emphasis: #e7811d;
   --borderColor-danger-muted: #ff8080;
   --borderColor-danger-emphasis: #ff6a69;
-    --borderColor-closed-muted: #ff808066;
+    --borderColor-closed-muted: #ff8080;
   --borderColor-closed-emphasis: #ff6a69;
   --borderColor-done-muted: #bf8fff;
   --borderColor-done-emphasis: #b87fff;
-    --borderColor-upsell-muted: #bf8fff66;
+    --borderColor-upsell-muted: #bf8fff;
   --borderColor-upsell-emphasis: #b87fff;
   --borderColor-sponsors-muted: #f87cbd;
   --borderColor-sponsors-emphasis: #ef6eb1;

/css/functional/themes/light-high-contrast.css

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light-high-contrast.css	2024-08-09 17:07:41.892603298 +0000
@@ -501,11 +501,11 @@
 --borderColor-severe-emphasis: #873800;
 --borderColor-danger-muted: #ee5a5d;
 --borderColor-danger-emphasis: #a0111f;
-  --borderColor-closed-muted: #ee5a5d66;
+  --borderColor-closed-muted: #ee5a5d;
 --borderColor-closed-emphasis: #a0111f;
 --borderColor-done-muted: #a371f7;
 --borderColor-done-emphasis: #622cbc;
-  --borderColor-upsell-muted: #a371f766;
+  --borderColor-upsell-muted: #a371f7;
 --borderColor-upsell-emphasis: #622cbc;
 --borderColor-sponsors-muted: #ed4baf;
 --borderColor-sponsors-emphasis: #971368;
@@ -1068,11 +1068,11 @@
   --borderColor-severe-emphasis: #873800;
   --borderColor-danger-muted: #ee5a5d;
   --borderColor-danger-emphasis: #a0111f;
-    --borderColor-closed-muted: #ee5a5d66;
+    --borderColor-closed-muted: #ee5a5d;
   --borderColor-closed-emphasis: #a0111f;
   --borderColor-done-muted: #a371f7;
   --borderColor-done-emphasis: #622cbc;
-    --borderColor-upsell-muted: #a371f766;
+    --borderColor-upsell-muted: #a371f7;
   --borderColor-upsell-emphasis: #622cbc;
   --borderColor-sponsors-muted: #ed4baf;
   --borderColor-sponsors-emphasis: #971368;

…/primitives into fix-hc-transparent-colors

fix inconsistent alpha

3b7ae01

Create dirty-foxes-cover.md

d58e823

langermank temporarily deployed to github-pages August 9, 2024 15:58 — with GitHub Actions Inactive

github-actions Bot temporarily deployed to Preview (Storybook) August 9, 2024 15:58 Inactive

langermank added 2 commits August 9, 2024 09:06

fix format

3b59837

Merge branch 'fix-hc-transparent-colors' of https://github.com/primer…

cdd256c

…/primitives into fix-hc-transparent-colors

langermank temporarily deployed to github-pages August 9, 2024 16:07 — with GitHub Actions Inactive

github-actions Bot temporarily deployed to Preview (Storybook) August 9, 2024 16:08 Inactive

langermank added the update snapshots Update visual regression test snapshots label Aug 9, 2024

github-actions[bot] Regenerated snapshots

c782a90

github-actions Bot removed the update snapshots Update visual regression test snapshots label Aug 9, 2024

primer Bot temporarily deployed to github-pages August 9, 2024 17:08 Inactive

github-actions Bot temporarily deployed to Preview (Storybook) August 9, 2024 17:08 Inactive

langermank marked this pull request as ready for review August 9, 2024 18:21

langermank requested review from a team as code owners August 9, 2024 18:21

langermank requested review from joshblack and lukasoppermann August 9, 2024 18:21

langermank merged commit 9ab8102 into main Aug 9, 2024

langermank deleted the fix-hc-transparent-colors branch August 9, 2024 18:21

primer Bot mentioned this pull request Aug 9, 2024

Release Tracking #1020

Merged

Navigation Menu

Repository navigation

Fix inconsistent HC transparent colors - #1025

Fix inconsistent HC transparent colors#1025
langermank merged 5 commits into
mainfrom
fix-hc-transparent-colors

langermank commented Aug 9, 2024

Uh oh!

changeset-bot Bot commented Aug 9, 2024 •

edited

Loading

Uh oh!

github-actions Bot commented Aug 9, 2024 •

edited

Loading

Uh oh!

github-actions Bot commented Aug 9, 2024 •

edited

Loading

/css/functional/themes/dark-high-contrast.css

/css/functional/themes/light-high-contrast.css

Uh oh!

This branch was previously deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

langermank commented Aug 9, 2024

Uh oh!

changeset-bot Bot commented Aug 9, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions Bot commented Aug 9, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Design Token Contrast Check

light: ✅ all checks passed

dark: ✅ all checks passed

light_high_contrast: ❌ 3 checks failed

dark_high_contrast: ❌ 6 checks failed

Uh oh!

github-actions Bot commented Aug 9, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Design Token Diff

/css/functional/themes/dark-high-contrast.css

/css/functional/themes/light-high-contrast.css

Uh oh!

This branch was previously deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

changeset-bot Bot commented Aug 9, 2024 •

edited

Loading

github-actions Bot commented Aug 9, 2024 •

edited

Loading

`light`: ✅ all checks passed

`dark`: ✅ all checks passed

`light_high_contrast`: ❌ 3 checks failed

`dark_high_contrast`: ❌ 6 checks failed

github-actions Bot commented Aug 9, 2024 •

edited

Loading