Color-blind direction
Gains and losses are usually shown in green and red, which many people can’t tell apart. Umia DS has a color-blind setting that uses blue and orange instead.
Turn it on
Section titled “Turn it on”Add data-umia-direction="color-blind" to <html>. To change only part of a page, add it to that element instead.
<html data-umia-direction="color-blind">What changes
Section titled “What changes”Four tokens change, and everything else stays the same.
positiveandpositive-mutedturn from green to blue.negativeandnegative-mutedturn from red to orange.
Both settings have dark values too, so the color-blind setting also works in dark mode.
Use the right tokens
Section titled “Use the right tokens”Style gains and losses with text-positive, text-negative and their -muted backgrounds. Fixed colours like text-green-600 won’t change with the setting.
Colour shouldn’t be the only signal. Add an icon, a plus or minus sign, or a word.
Not in the product yet
Section titled “Not in the product yet”The CSS is ready, but the hub doesn’t offer this setting yet. Whether to add it, and where, hasn’t been decided.