[a11y] In dark mode, text/subtle on canvas/default does not pass AA contrast for normal/smaller text sizes

[simmonsjenna]

In dark mode, the color we're using for text/subtle (#6e7681) does not pass AA contrast on canvas/default (#0D1117) for normal/smaller text sizes:

This means we cannot use the dark mode text/subtle color since it's not accessible. I propose we choose a new color that is accessible for text/subtle in dark mode.

cc: @ericwbailey

[joshfarrant]

Thanks for this @simmonsjenna, do you know if we're actually using this text/background colour combo anywhere at the moment? Curious to see if there are any cases that need to be fixed as a matter of urgency.

[simmonsjenna]

@joshfarrant I was able to find one instance in a quick search: https://github.com/features/actions (River Breakout section, left side), but this instance passes AA since the size is 32px (larger than 24px) on Desktop. On mobile, it does not pass since the size goes down to 22px.

I don't think this is super urgent as I have not found that many instances of subtle in use at smaller text sizes after a quick search.

[danielguillan]

We also use subtle text for form control placeholders and possibly a few other places, such as the IDE component. There's a request to switch the default background color to pure black in dark mode, which should resolve this issue.

[rezrah]

The proposed changes (prev. comment☝) to canvas-default/subtle are paused at this time.

This issue was also discussed briefly during office hours last week, specifically:

• text-subtle is not approved for general use on canvas-* background colors. It's intended use-case was for text input placeholders and/or other situations where its surrounding colors are adequately guardrailed.

• To avoid confusion, we (Primer Brand) should deprecate this token in favor of functional component tokens. E.g. --brand-TextInput-placeholder-fgColor.

@simmonsjenna for your use-case, I'd recommend using text-muted instead, which should meet the required contrast.