• Success Criterion 1.4.3
  • Conformance level AA

Thin Font Weight Text That Fails Contrast at Small Sizes

1.4.3 — Contrast (Minimum)

Scenario

Setting

A bank's mobile money-transfer screen

What’s wrong

Thin/light font weights at small sizes measured against threshold and failing where the same hex would pass in regular weight (ratio is color-based, but teams misjudge "large text" thresholds using pt vs px).

Example 

.amount-label { font-weight: 200; font-size: 12px; color: #8a8a8a; background: #ffffff; }
<!-- roughly 2.6:1; the thin weight and small size make it read as even fainter, though WCAG measures color only -->

Why it matters

A customer confirming a wire transfer amount misreads a thin, faint number and risks sending the wrong amount.

How to test

Measure thin/light-weight font text at small sizes: the same hex color that passes at regular weight can fail readability at 200-300 weight — measure the actual rendered pixels, not just the color values.

How to fix

Darken to roughly 12.6:1 and avoid thin weights below 16px; remember "large text" means at least 18.66px bold, not just any bold.

.amount-label { font-weight: 400; font-size: 14px; color: #333333; background: #ffffff; }

Outcome

The customer reads the transfer amount clearly and confirms it's correct before sending money.

Who is affected

Low-vision users and older users, for whom thin font weights at small sizes are hardest to resolve even when the hex values look close to passing.

Learn more

Related scenarios