T2107: Text contrast too low

Cause

Text and its background do not have enough contrast in some theme, state or variant, by the WCAG ratio set in contrast (4.5:1 by default).

Example

<contract>
{ "name": "Card", "role": "group", "parts": ["root"] }
</contract>
<template><div class="root"></div></template>
<style>
.root { color: $color.text.default; background: $color.text.default; }
</style>

What you see

ERROR  T2107  app/components/Card.tess:6:49
  Contrast between "$color.text.default" and "$color.text.default" is too low: 1.0:1 in the default theme, 1.0:1 in theme "dark" (needs 4.5:1).
  Set in ".root". Pick tokens that are at least 4.5:1 apart in every theme.
  Run `tessera explain T2107` for details.

Fix

Pick tokens that are far enough apart in every theme. The message names the pair and the ratio in each theme.

All errors and warnings