Fix color contrast failures in default and colorblind/tritanopia themes#1405
Conversation
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
|
Design Token Diff (CSS)The message is too long to be displayed here. For more details, please check the job summary. |
Design Token Diff (StyleLint)The message is too long to be displayed here. For more details, please check the job summary. |
Design Token Diff (Figma)The message is too long to be displayed here. For more details, please check the job summary. |
| @@ -22,54 +22,31 @@ const Color = ({color: colorName, length = 12, border}: {color: string; length?: | |||
| export const AllScales = () => { | |||
| return ( | |||
| <div className="ColorScale--grid"> | |||
There was a problem hiding this comment.
@sneharao3 why did you delete the colors from the story here?
There was a problem hiding this comment.
I think it's showing because this branch is based on merge-34-56-test and is picking up some of those commits. I don't think this one is from my changes since my changes are only the token repoints in the color JSON files. How do you think I should handle this?
| 'org.primer.overrides': { | ||
| dark: { | ||
| '$value': '{fgColor.white}' | ||
| '$value': '{base.color.white}' |
There was a problem hiding this comment.
@sneharao3 why is this not using fgColor.white, does that make sense?
There was a problem hiding this comment.
Good catch! You're right, this should be fgColor.white. That was an unintended change
Use fgColor.white on line 247
Summary
Refs github/core-ux#2821
Fixes failing color-contrast checks across the default light/dark themes (now fully passing) and reduces failures in the colorblind/tritanopia themes. All changes are accessibility-only token repoints — no hue changes or brand-affecting shifts. Targets
merge-34-56-test, since the fixes depend on its neutral-scale refactor.List of notable changes
fgColor.onEmphasis(dark) to white — was a light gray on emphasis backgrounds, failing ~3.2–4.5:1fgColor.muted/fgColor.neutraltoneutral.9(the text step) — were onneutral.7, a background step; placeholder, closed, and invisible-icon tokens inherit thiscontrol.borderColor.emphasis(default themes) to the softest neutral step clearing the 3:1 border thresholdbutton.dangerandbutton.primarytext tokens to white to matchonEmphasisbgColor.neutral.emphasis(light) so white text passesContrast check results
Failing pairs per theme, before → after:
What should reviewers focus on?
neutral.9is the lightest/darkest step that clears 4.5:1 and is the designated text step.control-borderColor-emphasisrows each — those variants have their own border override the default-scoped fix didn't touch.