1.4.3 Contrast (Minimum)

Text elements have too little contrast

Text this faint against its background is hard to read for people with low vision; normal text needs a contrast of 4.5:1, large text 3:1.

Who it affects. People with low vision or color blindness, and anyone reading on a phone in sunlight, can't make out the text.

How to fix it. Darken the text or lighten the background until the ratio is at least 4.5:1 (3:1 for text at least 24px, or 18.66px bold). Change the design token, not one element, so every place using it passes.

<p class="muted">Due in 3 days</p>
<style>.muted { color: #595959; } /* 7:1 on white */</style>

<p className="muted">Due in 3 days</p>