Gray-13 / text/text-secondary value

[dGoligorsky]

Placeholder text in e.g. input fields is text/text-secondary (gray-13). It's visually very close to text/text (gray-15)
The next step lighter on the semantic token scale would be text/text-disabled at gray-11 which doesn't hit WCAG AA 4.5:1.

Graphing the contrast ratios for the gray primatives, it feels like there's an opportunity to pull down the value for gray-13 so it's a lower contrast ratio to further distinguish it from text/text without taking it below the 4.5:1 contrast ratio.

A value like #686868 for gray-13 would land at a contrast ratio of 5.57:1.
It's currently #616161 with a contrast ratio of 6.19:1.

The other semantic tokens using gray-13 are not as sensitive to a11y— bg-fill-inverse-active, icon-secondary-hover, input-border-hover.

[heyjoethomas]

We should probably at least make sure text-secondary still passes contrast on more subdued backgrounds such as the app background and/or inset cards. Not sure if that is something you tested.

[dGoligorsky]

I checked the current text-secondary / gray-13 / #616161 against the proposed #686868 with all the gray backgrounds and fills.

Compared to the gray in production, the proposed #686868 fails WCAG AA for normal-sized text when it's on a background of gray-8, which is #e3e3e3 and used for:

• surface-tertiary-active
• surface-brand
• fill-secondary-active
• fill-tertiary

To get those scenarios to pass WCAG AA, the text color would need to be #656565 to get to a 4.54 : 1 contrast ratio.

The discussion basically becomes...

• should the token value change from #616161 to #686868/#656565
• or should there be an additional gray like gray-12.5 (🤢) at like #767676 which is the lowest value for gray that meets WCAG AA on pure white at 4.54 : 1, and call it like text/text-tertiary 😰