Output: Preview UI for color tokens

[Sidnioulz]

Examples

All

Nord Health includes a contrast score ⭐

FTV

Polaris

Druid

BG

Wikimedia

Pinterest

Border

Wikimedia

Pinterest

Text

Wikimedia with a #ffffff1a 1px border

Pinterest

Other

Wikimedia

Challenges

• Few systems distinguish fg/border color visualisations from bg; should we follow that trend?
• How to handle colors that are very close to the current page bg color? should that be detected and handled with a border?

[drwpow]

How to handle colors that are very close to the current page bg color?

Just a thought—I think users should be able to set their own BG color (assuming we’re talking, like, #f0f0f0 as opposed to #ffffff). Otherwise, it does affect the perceived values of their entire color system (e.g. their palette could be beautifully-optimized for an off-white background, but colors look too dark on pure white).

Few systems distinguish fg/border color visualisations from bg; should we follow that trend?

This has always perplexed me. Why not make it clear how the token is used? I’ve always assumed it’s just laziness, and reusing the same color component for everything. Maybe I’m wrong, but personally I’d rather see only text colors used as text and so on.