Text color for success text and accessibility

[sang-yeo]

Hello there,
In the Paste website shows text color for success text is failed a11y. So if I want to use it for a design, what solution(color) would you recommend?

[serifluous]

Hey @sang-yeo ! Yep, that's more of an error on our part with our token naming. $color-text-success is currently meant only for icon colors. We'll be updating our token names eventually so it's clearer.

For now, we recommend using the default text color $color-text and if needed, pairing it with a success icon in the success color. If that doesn't work for your case, let us know!

[sang-yeo]

Thanks for clarifying!

[ishah-twilio]

To followup to Sang's question.

Can you please help me understand what icon we should use for Service status that could be Disabled / Enabled? Should we use Success icon and Error icons for Disabled / Enabled status?

Attached is the screen for more context -- Status of service enabled for the Fleet feature.

[serifluous]

For this screen, are you trying to call out both the disabled and enabled states? Does the customer need to take action if data and/or SIM is enabled?

In a case like this, where you're showing lots of different statuses (including the warning at the top of the modal), I'd recommend using an icon or different text color only when you need to call attention to the information that the customer absolutely has to pay attention to or take action on. Limiting icon usage to just one of the states could make it a little more straightforward for you to decide what icon you should use.

If you do need icons for both states, though, or you're still not confident on what icon to use, let us know and we can brainstorm more options with you.