meet it

Text needs enough contrast to read, in every theme.

Pale grey on white looks stylish and is hard to read, for tired eyes, bright sunshine or low vision. measures the gap in lightness between two colours: 1 to 1 is no difference, 21 to 1 is black on white.

, the international rules for accessible websites, asks for at least 4.5 to 1 for normal text, and 3 to 1 for large text, icons and the edges of controls such as focus rings.

In a design system you check each text token against each surface token once, in every theme. Then every component built from those pairs passes too.

<p class="muted">Posted 2 hours ago</p>
<p class="body">Your parcel is on its way.</p>

:root {
  --text: #1f2937;
  --text-muted: #6b7280;
}
.body {
  color: var(--text);
}
.muted {
  color: var(--text-muted);
}

Press show my page to see it here.

guess first

Pale grey hint text on white. Does it pass?

Guess before you run it. Wrong guesses are how you learn, and nothing is marked.

<p class="hint">Passwords need 8 characters.</p>

.hint {
  color: #9ca3af;
  font-size: 14px;
}

your turn

Your turn. Darken the muted text.

Fill in a colour for --text-muted dark enough to reach 4.5 to 1 on white. #767676 is the lightest grey that passes, so go that dark or darker.

the page you’re styling

<div class="card">
  <h3>Delivery</h3>
  <p class="muted">Arrives Thursday</p>
</div>

your css

Your code

Press show my page to see it here.

--text-muted holds a colournot checked yet
the muted text reaches 4.5 to 1not checked yet
the card stays whitenot checked yet

fix it

The dark theme hides its links. Can you fix it?

the page you’re styling

<p><a href="https://example.com/a">Light theme link</a></p>
<div class="theme-dark">
  <p><a href="https://example.com/b">Dark theme link</a></p>
</div>

your css

Broken code to fix

Press show my page to see it here.

the dark theme link is light bluenot checked yet
the light theme link stays dark bluenot checked yet

The dark link is dark blue on a near-black surface, about 2.6 to 1. Which primitive is light enough?
In the dark theme, --link must point at the light blue, not the same blue as the light theme.
Change it to var(--blue-300) inside .theme-dark, then press run.

nailed it

you checked your colours for everyone. :D

Normal text needs 4.5 to 1; large text and controls need 3 to 1.
Check each text token against each surface, in every theme.
Good token pairs make every component pass.

new words in your collection

contrast ratio
WCAG

This lesson isn’t saved. A free account remembers every lesson you finish.