# 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

Add `data-umia-direction="color-blind"` to `<html>`. To change only part of a page, add it to that element instead.

```html
<html data-umia-direction="color-blind">
```

## What changes

Four tokens change, and everything else stays the same.

- `positive` and `positive-muted` turn from green to blue.
- `negative` and `negative-muted` turn from red to orange.

Both settings have dark values too, so the color-blind setting also works in dark mode.

## 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

The CSS is ready, but the hub doesn't offer this setting yet. Whether to add it, and where, hasn't been decided.