primitives
primitives copied to clipboard
Support updated high contrast themes
- Minor changes to prepare for adding more borders to high contrast themes
- Adds
tooltippattern to allow for an inverse style in dark high contrast
🦋 Changeset detected
Latest commit: 087bd58bc83f955c28a6dc14f2a6d33b9b2f79e6
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
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 | ✅ | 5.33:1 | 4.5:1 |
| fgColor-default vs. bgColor-muted | ✅ | 14.83:1 | 4.5:1 |
| fgColor-muted vs. bgColor-muted | ✅ | 5.01:1 | 4.5:1 |
| fgColor-default vs. bgColor-inset | ✅ | 14.83:1 | 4.5:1 |
| fgColor-muted vs. bgColor-inset | ✅ | 5.01:1 | 4.5:1 |
| control-fgColor-rest vs. bgColor-default | ✅ | 14.65:1 | 4.5:1 |
| control-fgColor-rest vs. bgColor-muted | ✅ | 13.76:1 | 4.5:1 |
| control-fgColor-rest vs. bgColor-inset | ✅ | 13.76:1 | 4.5:1 |
| control-fgColor-rest vs. control-bgColor-rest | ✅ | 13.76:1 | 4.5:1 |
| control-fgColor-placeholder vs. control-bgColor-rest | ✅ | 4.58:1 | 4.5:1 |
| control-fgColor-rest vs. control-bgColor-active | ✅ | 12.22:1 | 4.5:1 |
| control-fgColor-rest vs. control-bgColor-hover | ✅ | 12.92:1 | 4.5:1 |
| control-fgColor-rest vs. control-bgColor-selected | ✅ | 13.76:1 | 4.5:1 |
| fgColor-default vs. bgColor-neutral-muted on bgColor-default | ✅ | 13.95:1 | 4.5:1 |
| fgColor-default vs. bgColor-neutral-muted on bgColor-muted | ✅ | 13.21: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.38:1 | 4.5:1 |
| fgColor-neutral vs. bgColor-muted | ✅ | 6:1 | 4.5:1 |
| fgColor-neutral vs. bgColor-inset | ✅ | 6: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.64:1 | 4.5:1 |
| fgColor-neutral vs. bgColor-neutral-muted on bgColor-muted | ✅ | 5.34: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 | ✅ | 4.54: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.27:1 | 3:1 |
| control-borderColor-emphasis vs. bgColor-muted | ✅ | 3.08: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 | ✅ | 16.01:1 | 4.5:1 |
| fgColor-muted vs. bgColor-default | ✅ | 6.31:1 | 4.5:1 |
| fgColor-default vs. bgColor-muted | ✅ | 14.63:1 | 4.5:1 |
| fgColor-muted vs. bgColor-muted | ✅ | 5.76:1 | 4.5:1 |
| fgColor-default vs. bgColor-inset | ✅ | 17.37:1 | 4.5:1 |
| fgColor-muted vs. bgColor-inset | ✅ | 6.84:1 | 4.5:1 |
| control-fgColor-rest vs. bgColor-default | ✅ | 12.26:1 | 4.5:1 |
| control-fgColor-rest vs. bgColor-muted | ✅ | 11.2:1 | 4.5:1 |
| control-fgColor-rest vs. bgColor-inset | ✅ | 13.3:1 | 4.5:1 |
| control-fgColor-rest vs. control-bgColor-rest | ✅ | 9.86:1 | 4.5:1 |
| control-fgColor-placeholder vs. control-bgColor-rest | ✅ | 4.58:1 | 4.5:1 |
| control-fgColor-rest vs. control-bgColor-active | ✅ | 7.87:1 | 4.5:1 |
| control-fgColor-rest vs. control-bgColor-hover | ✅ | 8.84:1 | 4.5:1 |
| control-fgColor-rest vs. control-bgColor-selected | ✅ | 11.2:1 | 4.5:1 |
| fgColor-default vs. bgColor-neutral-muted on bgColor-default | ✅ | 9.83:1 | 4.5:1 |
| fgColor-default vs. bgColor-neutral-muted on bgColor-muted | ✅ | 8.98:1 | 4.5:1 |
| fgColor-default vs. bgColor-accent-muted on bgColor-default | ✅ | 14.34:1 | 4.5:1 |
| fgColor-default vs. bgColor-accent-muted on bgColor-muted | ✅ | 12.91:1 | 4.5:1 |
| fgColor-default vs. bgColor-success-muted on bgColor-default | ✅ | 13.44:1 | 4.5:1 |
| fgColor-default vs. bgColor-success-muted on bgColor-muted | ✅ | 12:1 | 4.5:1 |
| fgColor-default vs. bgColor-open-muted on bgColor-default | ✅ | 13.44:1 | 4.5:1 |
| fgColor-default vs. bgColor-open-muted on bgColor-muted | ✅ | 12:1 | 4.5:1 |
| fgColor-default vs. bgColor-danger-muted on bgColor-default | ✅ | 14.49:1 | 4.5:1 |
| fgColor-default vs. bgColor-danger-muted on bgColor-muted | ✅ | 13.09:1 | 4.5:1 |
| fgColor-default vs. bgColor-closed-muted on bgColor-default | ✅ | 14.49:1 | 4.5:1 |
| fgColor-default vs. bgColor-closed-muted on bgColor-muted | ✅ | 13.09:1 | 4.5:1 |
| fgColor-default vs. bgColor-attention-muted on bgColor-default | ✅ | 13.4:1 | 4.5:1 |
| fgColor-default vs. bgColor-attention-muted on bgColor-muted | ✅ | 12.08:1 | 4.5:1 |
| fgColor-default vs. bgColor-severe-muted on bgColor-default | ✅ | 14.45:1 | 4.5:1 |
| fgColor-default vs. bgColor-severe-muted on bgColor-muted | ✅ | 13.03:1 | 4.5:1 |
| fgColor-default vs. bgColor-done-muted on bgColor-default | ✅ | 13.11:1 | 4.5:1 |
| fgColor-default vs. bgColor-done-muted on bgColor-muted | ✅ | 11.71:1 | 4.5:1 |
| fgColor-default vs. bgColor-sponsors-muted on bgColor-default | ✅ | 14.4:1 | 4.5:1 |
| fgColor-default vs. bgColor-sponsors-muted on bgColor-muted | ✅ | 12.98:1 | 4.5:1 |
| fgColor-neutral vs. bgColor-default | ✅ | 9.63:1 | 4.5:1 |
| fgColor-neutral vs. bgColor-muted | ✅ | 8.8:1 | 4.5:1 |
| fgColor-neutral vs. bgColor-inset | ✅ | 10.45: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.8: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.8: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 | ✅ | 5.91:1 | 4.5:1 |
| fgColor-neutral vs. bgColor-neutral-muted on bgColor-muted | ✅ | 5.4: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.92: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.58: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.58: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.61: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.61: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.65: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.57: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.62: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.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.56:1 | 4.5:1 |
| fgColor-onEmphasis vs. bgColor-neutral-emphasis | ✅ | 4.59: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.66:1 | 3:1 |
| control-borderColor-emphasis vs. bgColor-muted | ✅ | 3.35: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.21:1 | 3:1 |
| bgColor-muted vs. display-teal-borderColor-emphasis | ✅ | 4.14:1 | 3:1 |
| bgColor-muted vs. display-pine-borderColor-emphasis | ✅ | 4.32:1 | 3:1 |
| bgColor-muted vs. display-green-borderColor-emphasis | ✅ | 4.25:1 | 3:1 |
| bgColor-muted vs. display-lime-borderColor-emphasis | ✅ | 4.2:1 | 3:1 |
| bgColor-muted vs. display-olive-borderColor-emphasis | ✅ | 4.19: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.18:1 | 3:1 |
| bgColor-muted vs. display-coral-borderColor-emphasis | ✅ | 4.18: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.18: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: ✅ all checks passed
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 | ✅ | 18.91:1 | 7:1 |
| fgColor-default vs. bgColor-muted | ✅ | 17.26:1 | 7:1 |
| fgColor-muted vs. bgColor-muted | ✅ | 15.89:1 | 7:1 |
| fgColor-default vs. bgColor-inset | ✅ | 20.53:1 | 7:1 |
| fgColor-muted vs. bgColor-inset | ✅ | 18.91:1 | 7:1 |
| control-fgColor-rest vs. bgColor-default | ✅ | 18.91:1 | 7:1 |
| control-fgColor-rest vs. bgColor-muted | ✅ | 15.89:1 | 7:1 |
| control-fgColor-rest vs. bgColor-inset | ✅ | 18.91:1 | 7:1 |
| control-fgColor-rest vs. control-bgColor-rest | ✅ | 15.89:1 | 7:1 |
| control-fgColor-placeholder vs. control-bgColor-rest | ✅ | 7.08:1 | 7:1 |
| control-fgColor-rest vs. control-bgColor-active | ✅ | 12.89:1 | 7:1 |
| control-fgColor-rest vs. control-bgColor-hover | ✅ | 14.34:1 | 7:1 |
| control-fgColor-rest vs. control-bgColor-selected | ✅ | 9.19:1 | 7:1 |
| fgColor-default vs. bgColor-neutral-muted | ✅ | 17.26: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 | ✅ | 11.33:1 | 7:1 |
| fgColor-neutral vs. bgColor-muted | ✅ | 9.52:1 | 7:1 |
| fgColor-neutral vs. bgColor-inset | ✅ | 11.33:1 | 7:1 |
| fgColor-accent vs. bgColor-default | ✅ | 10.18:1 | 7:1 |
| fgColor-accent vs. bgColor-muted | ✅ | 8.56:1 | 7:1 |
| fgColor-accent vs. bgColor-inset | ✅ | 10.18:1 | 7:1 |
| fgColor-success vs. bgColor-default | ✅ | 10.23:1 | 7:1 |
| fgColor-success vs. bgColor-muted | ✅ | 8.6:1 | 7:1 |
| fgColor-success vs. bgColor-inset | ✅ | 10.23:1 | 7:1 |
| fgColor-open vs. bgColor-default | ✅ | 10.23:1 | 7:1 |
| fgColor-open vs. bgColor-muted | ✅ | 8.6:1 | 7:1 |
| fgColor-open vs. bgColor-inset | ✅ | 10.23:1 | 7:1 |
| fgColor-danger vs. bgColor-default | ✅ | 9.86:1 | 7:1 |
| fgColor-danger vs. bgColor-muted | ✅ | 8.28:1 | 7:1 |
| fgColor-danger vs. bgColor-inset | ✅ | 9.86:1 | 7:1 |
| fgColor-closed vs. bgColor-default | ✅ | 9.86:1 | 7:1 |
| fgColor-closed vs. bgColor-muted | ✅ | 8.28:1 | 7:1 |
| fgColor-closed vs. bgColor-inset | ✅ | 9.86:1 | 7:1 |
| fgColor-attention vs. bgColor-default | ✅ | 10.27:1 | 7:1 |
| fgColor-attention vs. bgColor-muted | ✅ | 8.63:1 | 7:1 |
| fgColor-attention vs. bgColor-inset | ✅ | 10.27:1 | 7:1 |
| fgColor-severe vs. bgColor-default | ✅ | 10.24:1 | 7:1 |
| fgColor-severe vs. bgColor-muted | ✅ | 8.61:1 | 7:1 |
| fgColor-severe vs. bgColor-inset | ✅ | 10.24:1 | 7:1 |
| fgColor-done vs. bgColor-default | ✅ | 10.15:1 | 7:1 |
| fgColor-done vs. bgColor-muted | ✅ | 8.53:1 | 7:1 |
| fgColor-done vs. bgColor-inset | ✅ | 10.15:1 | 7:1 |
| fgColor-upsell vs. bgColor-default | ✅ | 10.15:1 | 7:1 |
| fgColor-upsell vs. bgColor-muted | ✅ | 8.53:1 | 7:1 |
| fgColor-upsell vs. bgColor-inset | ✅ | 10.15:1 | 7:1 |
| fgColor-sponsors vs. bgColor-default | ✅ | 10.18:1 | 7:1 |
| fgColor-sponsors vs. bgColor-muted | ✅ | 8.56:1 | 7:1 |
| fgColor-sponsors vs. bgColor-inset | ✅ | 10.18:1 | 7:1 |
| fgColor-neutral vs. bgColor-neutral-muted | ✅ | 9.52: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 | ✅ | 7.79: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 | ✅ | 15.41:1 | 4.5:1 |
| control-borderColor-emphasis vs. bgColor-muted | ✅ | 12.95: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.97:1 | 4.5:1 |
| bgColor-muted vs. display-indigo-borderColor-emphasis | ✅ | 5.13:1 | 4.5:1 |
| bgColor-muted vs. display-blue-borderColor-emphasis | ✅ | 5.03:1 | 4.5:1 |
| bgColor-muted vs. display-cyan-borderColor-emphasis | ✅ | 5.23:1 | 4.5:1 |
| bgColor-muted vs. display-teal-borderColor-emphasis | ✅ | 5.03:1 | 4.5:1 |
| bgColor-muted vs. display-pine-borderColor-emphasis | ✅ | 5.18:1 | 4.5:1 |
| bgColor-muted vs. display-green-borderColor-emphasis | ✅ | 5.18:1 | 4.5:1 |
| bgColor-muted vs. display-lime-borderColor-emphasis | ✅ | 5.12:1 | 4.5:1 |
| bgColor-muted vs. display-olive-borderColor-emphasis | ✅ | 5.17:1 | 4.5:1 |
| bgColor-muted vs. display-lemon-borderColor-emphasis | ✅ | 5.08:1 | 4.5:1 |
| bgColor-muted vs. display-yellow-borderColor-emphasis | ✅ | 5.27:1 | 4.5:1 |
| bgColor-muted vs. display-orange-borderColor-emphasis | ✅ | 5.16:1 | 4.5:1 |
| bgColor-muted vs. display-red-borderColor-emphasis | ✅ | 5.09:1 | 4.5:1 |
| bgColor-muted vs. display-coral-borderColor-emphasis | ✅ | 5.06:1 | 4.5:1 |
| bgColor-muted vs. display-pink-borderColor-emphasis | ✅ | 4.97:1 | 4.5:1 |
| bgColor-muted vs. display-plum-borderColor-emphasis | ✅ | 5.02:1 | 4.5:1 |
| bgColor-muted vs. display-purple-borderColor-emphasis | ✅ | 5:1 | 4.5:1 |
| bgColor-muted vs. display-brown-borderColor-emphasis | ✅ | 5.08:1 | 4.5:1 |
| bgColor-muted vs. display-auburn-borderColor-emphasis | ✅ | 5.04: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: ✅ all checks passed
Show results table for theme: dark_high_contrast
| contrastPair | pass | contrastRatio | minimumContrastRatio |
|---|---|---|---|
| fgColor-default vs. bgColor-default | ✅ | 19.05:1 | 7:1 |
| fgColor-muted vs. bgColor-default | ✅ | 17.57:1 | 7:1 |
| fgColor-default vs. bgColor-muted | ✅ | 16.61:1 | 7:1 |
| fgColor-muted vs. bgColor-muted | ✅ | 15.32:1 | 7:1 |
| fgColor-default vs. bgColor-inset | ✅ | 19.99:1 | 7:1 |
| fgColor-muted vs. bgColor-inset | ✅ | 18.43:1 | 7:1 |
| control-fgColor-rest vs. bgColor-default | ✅ | 17.57:1 | 7:1 |
| control-fgColor-rest vs. bgColor-muted | ✅ | 15.32:1 | 7:1 |
| control-fgColor-rest vs. bgColor-inset | ✅ | 18.43:1 | 7:1 |
| control-fgColor-rest vs. control-bgColor-rest | ✅ | 9.04:1 | 7:1 |
| control-fgColor-placeholder vs. control-bgColor-rest | ✅ | 8.23:1 | 7:1 |
| control-fgColor-rest vs. control-bgColor-active | ✅ | 9.74:1 | 7:1 |
| control-fgColor-rest vs. control-bgColor-hover | ✅ | 7.39:1 | 7:1 |
| control-fgColor-rest vs. control-bgColor-selected | ✅ | 12.74:1 | 7:1 |
| fgColor-default vs. bgColor-neutral-muted on bgColor-default | ✅ | 17.32:1 | 7:1 |
| fgColor-default vs. bgColor-neutral-muted on bgColor-muted | ✅ | 14.74:1 | 7:1 |
| fgColor-default vs. bgColor-accent-muted on bgColor-default | ✅ | 16.9:1 | 7:1 |
| fgColor-default vs. bgColor-accent-muted on bgColor-muted | ✅ | 14.31:1 | 7:1 |
| fgColor-default vs. bgColor-success-muted on bgColor-default | ✅ | 15.69:1 | 7:1 |
| fgColor-default vs. bgColor-success-muted on bgColor-muted | ✅ | 13.14:1 | 7:1 |
| fgColor-default vs. bgColor-open-muted on bgColor-default | ✅ | 15.69:1 | 7:1 |
| fgColor-default vs. bgColor-open-muted on bgColor-muted | ✅ | 13.14:1 | 7:1 |
| fgColor-default vs. bgColor-danger-muted on bgColor-default | ✅ | 17.16:1 | 7:1 |
| fgColor-default vs. bgColor-danger-muted on bgColor-muted | ✅ | 14.45:1 | 7:1 |
| fgColor-default vs. bgColor-closed-muted on bgColor-default | ✅ | 17.16:1 | 7:1 |
| fgColor-default vs. bgColor-closed-muted on bgColor-muted | ✅ | 14.45:1 | 7:1 |
| fgColor-default vs. bgColor-attention-muted on bgColor-default | ✅ | 14.93:1 | 7:1 |
| fgColor-default vs. bgColor-attention-muted on bgColor-muted | ✅ | 12.48:1 | 7:1 |
| fgColor-default vs. bgColor-severe-muted on bgColor-default | ✅ | 17.23:1 | 7:1 |
| fgColor-default vs. bgColor-severe-muted on bgColor-muted | ✅ | 14.52:1 | 7:1 |
| fgColor-default vs. bgColor-done-muted on bgColor-default | ✅ | 17.22:1 | 7:1 |
| fgColor-default vs. bgColor-done-muted on bgColor-muted | ✅ | 14.55:1 | 7:1 |
| fgColor-default vs. bgColor-sponsors-muted on bgColor-default | ✅ | 17.24:1 | 7:1 |
| fgColor-default vs. bgColor-sponsors-muted on bgColor-muted | ✅ | 14.72:1 | 7:1 |
| fgColor-neutral vs. bgColor-default | ✅ | 11.12:1 | 7:1 |
| fgColor-neutral vs. bgColor-muted | ✅ | 9.69:1 | 7:1 |
| fgColor-neutral vs. bgColor-inset | ✅ | 11.66:1 | 7:1 |
| fgColor-accent vs. bgColor-default | ✅ | 9.34:1 | 7:1 |
| fgColor-accent vs. bgColor-muted | ✅ | 8.15:1 | 7:1 |
| fgColor-accent vs. bgColor-inset | ✅ | 9.8:1 | 7:1 |
| fgColor-success vs. bgColor-default | ✅ | 10.18:1 | 7:1 |
| fgColor-success vs. bgColor-muted | ✅ | 8.88:1 | 7:1 |
| fgColor-success vs. bgColor-inset | ✅ | 10.68:1 | 7:1 |
| fgColor-open vs. bgColor-default | ✅ | 10.18:1 | 7:1 |
| fgColor-open vs. bgColor-muted | ✅ | 8.88:1 | 7:1 |
| fgColor-open vs. bgColor-inset | ✅ | 10.68:1 | 7:1 |
| fgColor-danger vs. bgColor-default | ✅ | 9.22:1 | 7:1 |
| fgColor-danger vs. bgColor-muted | ✅ | 8.04:1 | 7:1 |
| fgColor-danger vs. bgColor-inset | ✅ | 9.68:1 | 7:1 |
| fgColor-closed vs. bgColor-default | ✅ | 9.22:1 | 7:1 |
| fgColor-closed vs. bgColor-muted | ✅ | 8.04:1 | 7:1 |
| fgColor-closed vs. bgColor-inset | ✅ | 9.68:1 | 7:1 |
| fgColor-attention vs. bgColor-default | ✅ | 10.73:1 | 7:1 |
| fgColor-attention vs. bgColor-muted | ✅ | 9.36:1 | 7:1 |
| fgColor-attention vs. bgColor-inset | ✅ | 11.26:1 | 7:1 |
| fgColor-severe vs. bgColor-default | ✅ | 9.2:1 | 7:1 |
| fgColor-severe vs. bgColor-muted | ✅ | 8.02:1 | 7:1 |
| fgColor-severe vs. bgColor-inset | ✅ | 9.65:1 | 7:1 |
| fgColor-done vs. bgColor-default | ✅ | 9.2:1 | 7:1 |
| fgColor-done vs. bgColor-muted | ✅ | 8.02:1 | 7:1 |
| fgColor-done vs. bgColor-inset | ✅ | 9.65:1 | 7:1 |
| fgColor-upsell vs. bgColor-default | ✅ | 9.2:1 | 7:1 |
| fgColor-upsell vs. bgColor-muted | ✅ | 8.02:1 | 7:1 |
| fgColor-upsell vs. bgColor-inset | ✅ | 9.65:1 | 7:1 |
| fgColor-sponsors vs. bgColor-default | ✅ | 9.21:1 | 7:1 |
| fgColor-sponsors vs. bgColor-muted | ✅ | 8.03:1 | 7:1 |
| fgColor-sponsors vs. bgColor-inset | ✅ | 9.66:1 | 7:1 |
| fgColor-neutral vs. bgColor-neutral-muted on bgColor-default | ✅ | 10.1:1 | 7:1 |
| fgColor-neutral vs. bgColor-neutral-muted on bgColor-muted | ✅ | 8.6:1 | 7:1 |
| fgColor-accent vs. bgColor-accent-muted on bgColor-default | ✅ | 8.29:1 | 7:1 |
| fgColor-accent vs. bgColor-accent-muted on bgColor-muted | ✅ | 7.02:1 | 7:1 |
| fgColor-success vs. bgColor-success-muted on bgColor-default | ✅ | 8.39:1 | 7:1 |
| fgColor-success vs. bgColor-success-muted on bgColor-muted | ✅ | 7.02:1 | 7:1 |
| fgColor-open vs. bgColor-open-muted on bgColor-default | ✅ | 8.39:1 | 7:1 |
| fgColor-open vs. bgColor-open-muted on bgColor-muted | ✅ | 7.02:1 | 7:1 |
| fgColor-danger vs. bgColor-danger-muted on bgColor-default | ✅ | 8.31:1 | 7:1 |
| fgColor-danger vs. bgColor-danger-muted on bgColor-muted | ✅ | 7:1 | 7:1 |
| fgColor-closed vs. bgColor-closed-muted on bgColor-default | ✅ | 8.31:1 | 7:1 |
| fgColor-closed vs. bgColor-closed-muted on bgColor-muted | ✅ | 7:1 | 7:1 |
| fgColor-attention vs. bgColor-attention-muted on bgColor-default | ✅ | 8.41:1 | 7:1 |
| fgColor-attention vs. bgColor-attention-muted on bgColor-muted | ✅ | 7.03:1 | 7:1 |
| fgColor-severe vs. bgColor-severe-muted on bgColor-default | ✅ | 8.32:1 | 7:1 |
| fgColor-severe vs. bgColor-severe-muted on bgColor-muted | ✅ | 7.01:1 | 7:1 |
| fgColor-done vs. bgColor-done-muted on bgColor-default | ✅ | 8.32:1 | 7:1 |
| fgColor-done vs. bgColor-done-muted on bgColor-muted | ✅ | 7.03:1 | 7:1 |
| fgColor-upsell vs. bgColor-upsell-muted on bgColor-default | ✅ | 8.32:1 | 7:1 |
| fgColor-upsell vs. bgColor-upsell-muted on bgColor-muted | ✅ | 7.03:1 | 7:1 |
| fgColor-sponsors vs. bgColor-sponsors-muted on bgColor-default | ✅ | 8.34:1 | 7:1 |
| fgColor-sponsors vs. bgColor-sponsors-muted on bgColor-muted | ✅ | 7.12:1 | 7:1 |
| fgColor-onEmphasis vs. bgColor-neutral-emphasis | ✅ | 8.04:1 | 7:1 |
| fgColor-onEmphasis vs. bgColor-accent-emphasis | ✅ | 8.2:1 | 7:1 |
| fgColor-onEmphasis vs. bgColor-success-emphasis | ✅ | 8.62:1 | 7:1 |
| fgColor-onEmphasis vs. bgColor-open-emphasis | ✅ | 8.62:1 | 7:1 |
| fgColor-onEmphasis vs. bgColor-danger-emphasis | ✅ | 8.06:1 | 7:1 |
| fgColor-onEmphasis vs. bgColor-closed-emphasis | ✅ | 8.06:1 | 7:1 |
| fgColor-onEmphasis vs. bgColor-attention-emphasis | ✅ | 9.67:1 | 7:1 |
| fgColor-onEmphasis vs. bgColor-severe-emphasis | ✅ | 7.98:1 | 7:1 |
| fgColor-onEmphasis vs. bgColor-done-emphasis | ✅ | 8:1 | 7:1 |
| fgColor-onEmphasis vs. bgColor-upsell-emphasis | ✅ | 8:1 | 7:1 |
| fgColor-onEmphasis vs. bgColor-sponsors-emphasis | ✅ | 8.02:1 | 7:1 |
| control-borderColor-emphasis vs. bgColor-default | ✅ | 8.04:1 | 4.5:1 |
| control-borderColor-emphasis vs. bgColor-muted | ✅ | 7.01: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 | ✅ | 7.44:1 | 7:1 |
| fgColor-onEmphasis vs. display-indigo-bgColor-emphasis | ✅ | 7.55:1 | 7:1 |
| fgColor-onEmphasis vs. display-blue-bgColor-emphasis | ✅ | 7.25:1 | 7:1 |
| fgColor-onEmphasis vs. display-cyan-bgColor-emphasis | ✅ | 7.48:1 | 7:1 |
| fgColor-onEmphasis vs. display-teal-bgColor-emphasis | ✅ | 7.31:1 | 7:1 |
| fgColor-onEmphasis vs. display-pine-bgColor-emphasis | ✅ | 7.44:1 | 7:1 |
| fgColor-onEmphasis vs. display-green-bgColor-emphasis | ✅ | 7.3:1 | 7:1 |
| fgColor-onEmphasis vs. display-lime-bgColor-emphasis | ✅ | 7.43:1 | 7:1 |
| fgColor-onEmphasis vs. display-olive-bgColor-emphasis | ✅ | 7.47:1 | 7:1 |
| fgColor-onEmphasis vs. display-lemon-bgColor-emphasis | ✅ | 7.25:1 | 7:1 |
| fgColor-onEmphasis vs. display-yellow-bgColor-emphasis | ✅ | 7.29:1 | 7:1 |
| fgColor-onEmphasis vs. display-orange-bgColor-emphasis | ✅ | 7.33:1 | 7:1 |
| fgColor-onEmphasis vs. display-red-bgColor-emphasis | ✅ | 7.49:1 | 7:1 |
| fgColor-onEmphasis vs. display-coral-bgColor-emphasis | ✅ | 7.26:1 | 7:1 |
| fgColor-onEmphasis vs. display-pink-bgColor-emphasis | ✅ | 7.27:1 | 7:1 |
| fgColor-onEmphasis vs. display-plum-bgColor-emphasis | ✅ | 7.46:1 | 7:1 |
| fgColor-onEmphasis vs. display-purple-bgColor-emphasis | ✅ | 7.26:1 | 7:1 |
| fgColor-onEmphasis vs. display-brown-bgColor-emphasis | ✅ | 7.29:1 | 7:1 |
| fgColor-onEmphasis vs. display-auburn-bgColor-emphasis | ✅ | 7.39:1 | 7:1 |
| bgColor-default vs. display-gray-borderColor-emphasis | ✅ | 7.44:1 | 4.5:1 |
| bgColor-default vs. display-indigo-borderColor-emphasis | ✅ | 7.55:1 | 4.5:1 |
| bgColor-default vs. display-blue-borderColor-emphasis | ✅ | 7.25:1 | 4.5:1 |
| bgColor-default vs. display-cyan-borderColor-emphasis | ✅ | 7.48:1 | 4.5:1 |
| bgColor-default vs. display-teal-borderColor-emphasis | ✅ | 7.31:1 | 4.5:1 |
| bgColor-default vs. display-pine-borderColor-emphasis | ✅ | 7.44:1 | 4.5:1 |
| bgColor-default vs. display-green-borderColor-emphasis | ✅ | 7.3:1 | 4.5:1 |
| bgColor-default vs. display-lime-borderColor-emphasis | ✅ | 7.43:1 | 4.5:1 |
| bgColor-default vs. display-olive-borderColor-emphasis | ✅ | 7.47:1 | 4.5:1 |
| bgColor-default vs. display-lemon-borderColor-emphasis | ✅ | 7.25:1 | 4.5:1 |
| bgColor-default vs. display-yellow-borderColor-emphasis | ✅ | 7.29:1 | 4.5:1 |
| bgColor-default vs. display-orange-borderColor-emphasis | ✅ | 7.33:1 | 4.5:1 |
| bgColor-default vs. display-red-borderColor-emphasis | ✅ | 7.49:1 | 4.5:1 |
| bgColor-default vs. display-coral-borderColor-emphasis | ✅ | 7.26:1 | 4.5:1 |
| bgColor-default vs. display-pink-borderColor-emphasis | ✅ | 7.27:1 | 4.5:1 |
| bgColor-default vs. display-plum-borderColor-emphasis | ✅ | 7.46:1 | 4.5:1 |
| bgColor-default vs. display-purple-borderColor-emphasis | ✅ | 7.26:1 | 4.5:1 |
| bgColor-default vs. display-brown-borderColor-emphasis | ✅ | 7.29:1 | 4.5:1 |
| bgColor-default vs. display-auburn-borderColor-emphasis | ✅ | 7.39:1 | 4.5:1 |
| bgColor-muted vs. display-gray-borderColor-emphasis | ✅ | 6.49:1 | 4.5:1 |
| bgColor-muted vs. display-indigo-borderColor-emphasis | ✅ | 6.58:1 | 4.5:1 |
| bgColor-muted vs. display-blue-borderColor-emphasis | ✅ | 6.32:1 | 4.5:1 |
| bgColor-muted vs. display-cyan-borderColor-emphasis | ✅ | 6.52:1 | 4.5:1 |
| bgColor-muted vs. display-teal-borderColor-emphasis | ✅ | 6.37:1 | 4.5:1 |
| bgColor-muted vs. display-pine-borderColor-emphasis | ✅ | 6.48:1 | 4.5:1 |
| bgColor-muted vs. display-green-borderColor-emphasis | ✅ | 6.37:1 | 4.5:1 |
| bgColor-muted vs. display-lime-borderColor-emphasis | ✅ | 6.48:1 | 4.5:1 |
| bgColor-muted vs. display-olive-borderColor-emphasis | ✅ | 6.51:1 | 4.5:1 |
| bgColor-muted vs. display-lemon-borderColor-emphasis | ✅ | 6.32:1 | 4.5:1 |
| bgColor-muted vs. display-yellow-borderColor-emphasis | ✅ | 6.35:1 | 4.5:1 |
| bgColor-muted vs. display-orange-borderColor-emphasis | ✅ | 6.39:1 | 4.5:1 |
| bgColor-muted vs. display-red-borderColor-emphasis | ✅ | 6.53:1 | 4.5:1 |
| bgColor-muted vs. display-coral-borderColor-emphasis | ✅ | 6.33:1 | 4.5:1 |
| bgColor-muted vs. display-pink-borderColor-emphasis | ✅ | 6.34:1 | 4.5:1 |
| bgColor-muted vs. display-plum-borderColor-emphasis | ✅ | 6.5:1 | 4.5:1 |
| bgColor-muted vs. display-purple-borderColor-emphasis | ✅ | 6.33:1 | 4.5:1 |
| bgColor-muted vs. display-brown-borderColor-emphasis | ✅ | 6.36:1 | 4.5:1 |
| bgColor-muted vs. display-auburn-borderColor-emphasis | ✅ | 6.44: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 |
Design Token Diff
/css/functional/themes/dark-colorblind.css
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-colorblind.css 2024-07-25 19:15:58.947564377 +0000
@@ -428,9 +428,12 @@
--label-coral-fgColor-rest: #f7794b;
--label-coral-fgColor-hover: #fa8c61;
--label-coral-fgColor-active: #fdaa86;
+ --tooltip-bgColor: #6e7681;
+ --tooltip-fgColor: #ffffff;
--fgColor-default: #e6edf3;
--fgColor-muted: #8d96a0;
--fgColor-onEmphasis: #ffffff;
+ --fgColor-onInverse: #010409;
--fgColor-white: #ffffff;
--fgColor-black: #010409;
--fgColor-disabled: #6e7681;
@@ -992,9 +995,12 @@
--label-coral-fgColor-rest: #f7794b;
--label-coral-fgColor-hover: #fa8c61;
--label-coral-fgColor-active: #fdaa86;
+ --tooltip-bgColor: #6e7681;
+ --tooltip-fgColor: #ffffff;
--fgColor-default: #e6edf3;
--fgColor-muted: #8d96a0;
--fgColor-onEmphasis: #ffffff;
+ --fgColor-onInverse: #010409;
--fgColor-white: #ffffff;
--fgColor-black: #010409;
--fgColor-disabled: #6e7681;
/css/functional/themes/dark-dimmed.css
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-dimmed.css 2024-07-25 19:15:57.611552204 +0000
@@ -428,9 +428,12 @@
--label-coral-fgColor-rest: #f7794b;
--label-coral-fgColor-hover: #fa8c61;
--label-coral-fgColor-active: #fdaa86;
+ --tooltip-bgColor: #636e7b;
+ --tooltip-fgColor: #cdd9e5;
--fgColor-default: #c5d1de;
--fgColor-muted: #778491;
--fgColor-onEmphasis: #cdd9e5;
+ --fgColor-onInverse: #1c2128;
--fgColor-white: #cdd9e5;
--fgColor-black: #1c2128;
--fgColor-disabled: #636e7b;
@@ -992,9 +995,12 @@
--label-coral-fgColor-rest: #f7794b;
--label-coral-fgColor-hover: #fa8c61;
--label-coral-fgColor-active: #fdaa86;
+ --tooltip-bgColor: #636e7b;
+ --tooltip-fgColor: #cdd9e5;
--fgColor-default: #c5d1de;
--fgColor-muted: #778491;
--fgColor-onEmphasis: #cdd9e5;
+ --fgColor-onInverse: #1c2128;
--fgColor-white: #cdd9e5;
--fgColor-black: #1c2128;
--fgColor-disabled: #636e7b;
/css/functional/themes/dark-high-contrast.css
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-high-contrast.css 2024-07-25 19:15:59.603570354 +0000
@@ -206,7 +206,7 @@
--controlTrack-bgColor-disabled: #9ea7b3;
--controlTrack-fgColor-rest: #fbfcfd;
--controlTrack-fgColor-disabled: #0a0c10;
- --controlTrack-borderColor-rest: #00000000;
+ --controlTrack-borderColor-rest: #9ea7b3;
--controlTrack-borderColor-disabled: #9ea7b3;
--controlKnob-bgColor-rest: #010409;
--controlKnob-bgColor-disabled: #3d424db3;
@@ -428,9 +428,12 @@
--label-coral-fgColor-rest: #f7794b;
--label-coral-fgColor-hover: #fa8c61;
--label-coral-fgColor-active: #fdaa86;
+ --tooltip-bgColor: #ffffff;
+ --tooltip-fgColor: #010409;
--fgColor-default: #fbfcfd;
--fgColor-muted: #f0f3f6;
--fgColor-onEmphasis: #0a0c10;
+ --fgColor-onInverse: #010409;
--fgColor-white: #ffffff;
--fgColor-black: #010409;
--fgColor-disabled: #9ea7b3;
@@ -770,7 +773,7 @@
--controlTrack-bgColor-disabled: #9ea7b3;
--controlTrack-fgColor-rest: #fbfcfd;
--controlTrack-fgColor-disabled: #0a0c10;
- --controlTrack-borderColor-rest: #00000000;
+ --controlTrack-borderColor-rest: #9ea7b3;
--controlTrack-borderColor-disabled: #9ea7b3;
--controlKnob-bgColor-rest: #010409;
--controlKnob-bgColor-disabled: #3d424db3;
@@ -992,9 +995,12 @@
--label-coral-fgColor-rest: #f7794b;
--label-coral-fgColor-hover: #fa8c61;
--label-coral-fgColor-active: #fdaa86;
+ --tooltip-bgColor: #ffffff;
+ --tooltip-fgColor: #010409;
--fgColor-default: #fbfcfd;
--fgColor-muted: #f0f3f6;
--fgColor-onEmphasis: #0a0c10;
+ --fgColor-onInverse: #010409;
--fgColor-white: #ffffff;
--fgColor-black: #010409;
--fgColor-disabled: #9ea7b3;
/css/functional/themes/dark-tritanopia.css
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-tritanopia.css 2024-07-25 19:15:58.275558255 +0000
@@ -428,9 +428,12 @@
--label-coral-fgColor-rest: #f7794b;
--label-coral-fgColor-hover: #fa8c61;
--label-coral-fgColor-active: #fdaa86;
+ --tooltip-bgColor: #6e7681;
+ --tooltip-fgColor: #ffffff;
--fgColor-default: #e6edf3;
--fgColor-muted: #8d96a0;
--fgColor-onEmphasis: #ffffff;
+ --fgColor-onInverse: #010409;
--fgColor-white: #ffffff;
--fgColor-black: #010409;
--fgColor-disabled: #6e7681;
@@ -992,9 +995,12 @@
--label-coral-fgColor-rest: #f7794b;
--label-coral-fgColor-hover: #fa8c61;
--label-coral-fgColor-active: #fdaa86;
+ --tooltip-bgColor: #6e7681;
+ --tooltip-fgColor: #ffffff;
--fgColor-default: #e6edf3;
--fgColor-muted: #8d96a0;
--fgColor-onEmphasis: #ffffff;
+ --fgColor-onInverse: #010409;
--fgColor-white: #ffffff;
--fgColor-black: #010409;
--fgColor-disabled: #6e7681;
/css/functional/themes/dark.css
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark.css 2024-07-25 19:15:56.919545912 +0000
@@ -428,9 +428,12 @@
--label-coral-fgColor-rest: #f7794b;
--label-coral-fgColor-hover: #fa8c61;
--label-coral-fgColor-active: #fdaa86;
+ --tooltip-bgColor: #6e7681;
+ --tooltip-fgColor: #ffffff;
--fgColor-default: #e6edf3;
--fgColor-muted: #8d96a0;
--fgColor-onEmphasis: #ffffff;
+ --fgColor-onInverse: #010409;
--fgColor-white: #ffffff;
--fgColor-black: #010409;
--fgColor-disabled: #6e7681;
@@ -992,9 +995,12 @@
--label-coral-fgColor-rest: #f7794b;
--label-coral-fgColor-hover: #fa8c61;
--label-coral-fgColor-active: #fdaa86;
+ --tooltip-bgColor: #6e7681;
+ --tooltip-fgColor: #ffffff;
--fgColor-default: #e6edf3;
--fgColor-muted: #8d96a0;
--fgColor-onEmphasis: #ffffff;
+ --fgColor-onInverse: #010409;
--fgColor-white: #ffffff;
--fgColor-black: #010409;
--fgColor-disabled: #6e7681;
/css/functional/themes/light-colorblind.css
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light-colorblind.css 2024-07-25 19:15:55.259530822 +0000
@@ -429,9 +429,12 @@
--label-coral-fgColor-rest: #ba2e12;
--label-coral-fgColor-hover: #9b2712;
--label-coral-fgColor-active: #7e2011;
+ --tooltip-bgColor: #24292f;
+ --tooltip-fgColor: #ffffff;
--fgColor-default: #1f2328;
--fgColor-muted: #636c76;
--fgColor-onEmphasis: #ffffff;
+ --fgColor-onInverse: #ffffff;
--fgColor-white: #ffffff;
--fgColor-black: #1f2328;
--fgColor-disabled: #8c959f;
@@ -993,9 +996,12 @@
--label-coral-fgColor-rest: #ba2e12;
--label-coral-fgColor-hover: #9b2712;
--label-coral-fgColor-active: #7e2011;
+ --tooltip-bgColor: #24292f;
+ --tooltip-fgColor: #ffffff;
--fgColor-default: #1f2328;
--fgColor-muted: #636c76;
--fgColor-onEmphasis: #ffffff;
+ --fgColor-onInverse: #ffffff;
--fgColor-white: #ffffff;
--fgColor-black: #1f2328;
--fgColor-disabled: #8c959f;
/css/functional/themes/light-high-contrast.css
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light-high-contrast.css 2024-07-25 19:15:56.063538131 +0000
@@ -206,7 +206,7 @@
--controlTrack-bgColor-disabled: #66707b;
--controlTrack-fgColor-rest: #010409;
--controlTrack-fgColor-disabled: #ffffff;
- --controlTrack-borderColor-rest: #ffffff00;
+ --controlTrack-borderColor-rest: #66707b;
--controlTrack-borderColor-disabled: #66707b;
--controlKnob-bgColor-rest: #ffffff;
--controlKnob-bgColor-disabled: #ced5dcb3;
@@ -429,9 +429,12 @@
--label-coral-fgColor-rest: #ba2e12;
--label-coral-fgColor-hover: #9b2712;
--label-coral-fgColor-active: #7e2011;
+ --tooltip-bgColor: #0e1116;
+ --tooltip-fgColor: #ffffff;
--fgColor-default: #010409;
--fgColor-muted: #0e1116;
--fgColor-onEmphasis: #ffffff;
+ --fgColor-onInverse: #ffffff;
--fgColor-white: #ffffff;
--fgColor-black: #010409;
--fgColor-disabled: #66707b;
@@ -770,7 +773,7 @@
--controlTrack-bgColor-disabled: #66707b;
--controlTrack-fgColor-rest: #010409;
--controlTrack-fgColor-disabled: #ffffff;
- --controlTrack-borderColor-rest: #ffffff00;
+ --controlTrack-borderColor-rest: #66707b;
--controlTrack-borderColor-disabled: #66707b;
--controlKnob-bgColor-rest: #ffffff;
--controlKnob-bgColor-disabled: #ced5dcb3;
@@ -993,9 +996,12 @@
--label-coral-fgColor-rest: #ba2e12;
--label-coral-fgColor-hover: #9b2712;
--label-coral-fgColor-active: #7e2011;
+ --tooltip-bgColor: #0e1116;
+ --tooltip-fgColor: #ffffff;
--fgColor-default: #010409;
--fgColor-muted: #0e1116;
--fgColor-onEmphasis: #ffffff;
+ --fgColor-onInverse: #ffffff;
--fgColor-white: #ffffff;
--fgColor-black: #010409;
--fgColor-disabled: #66707b;
/css/functional/themes/light-tritanopia.css
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light-tritanopia.css 2024-07-25 19:15:54.599524823 +0000
@@ -429,9 +429,12 @@
--label-coral-fgColor-rest: #ba2e12;
--label-coral-fgColor-hover: #9b2712;
--label-coral-fgColor-active: #7e2011;
+ --tooltip-bgColor: #24292f;
+ --tooltip-fgColor: #ffffff;
--fgColor-default: #1f2328;
--fgColor-muted: #636c76;
--fgColor-onEmphasis: #ffffff;
+ --fgColor-onInverse: #ffffff;
--fgColor-white: #ffffff;
--fgColor-black: #1f2328;
--fgColor-disabled: #8c959f;
@@ -993,9 +996,12 @@
--label-coral-fgColor-rest: #ba2e12;
--label-coral-fgColor-hover: #9b2712;
--label-coral-fgColor-active: #7e2011;
+ --tooltip-bgColor: #24292f;
+ --tooltip-fgColor: #ffffff;
--fgColor-default: #1f2328;
--fgColor-muted: #636c76;
--fgColor-onEmphasis: #ffffff;
+ --fgColor-onInverse: #ffffff;
--fgColor-white: #ffffff;
--fgColor-black: #1f2328;
--fgColor-disabled: #8c959f;
/css/functional/themes/light.css
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light.css 2024-07-25 19:15:53.683516497 +0000
@@ -429,9 +429,12 @@
--label-coral-fgColor-rest: #ba2e12;
--label-coral-fgColor-hover: #9b2712;
--label-coral-fgColor-active: #7e2011;
+ --tooltip-bgColor: #24292f;
+ --tooltip-fgColor: #ffffff;
--fgColor-default: #1f2328;
--fgColor-muted: #636c76;
--fgColor-onEmphasis: #ffffff;
+ --fgColor-onInverse: #ffffff;
--fgColor-white: #ffffff;
--fgColor-black: #1f2328;
--fgColor-disabled: #8c959f;
@@ -993,9 +996,12 @@
--label-coral-fgColor-rest: #ba2e12;
--label-coral-fgColor-hover: #9b2712;
--label-coral-fgColor-active: #7e2011;
+ --tooltip-bgColor: #24292f;
+ --tooltip-fgColor: #ffffff;
--fgColor-default: #1f2328;
--fgColor-muted: #636c76;
--fgColor-onEmphasis: #ffffff;
+ --fgColor-onInverse: #ffffff;
--fgColor-white: #ffffff;
--fgColor-black: #1f2328;
--fgColor-disabled: #8c959f;