Meet contrast minimums

Body text needs 4.5:1 contrast; large text, borders and icons need 3:1.

From refactoring-ui, “Contrast minimums”. Ratios use the WCAG 2 formula.

Contrast checker

Pick colors, then drag the size.

Text color
Background
#9ca3af on #ffffffNormal text

Invoice #1042 is due Oct 9

2.54:1
  • This text (needs 4.5:1)Fail
  • AAA for this text (7:1)Fail
  • As a border or icon (3:1)Fail
const isLarge = px >= 24 || (bold && px >= 18.66);
const needed = isLarge ? 3 : 4.5;

Size buys a lower bar

Same gray. Drag the size until it passes.

14px regularFail

Payment received from Globex

3.32:1 < 4.5:1
24px regularPass

Payment received from Globex

3.32:1 ≥ 3:1

Step outside

Press Sunlight, or drag the glare.

Elegant gray-400Bad
Figma$45.00Software · Sep 22
AWS$1,284.10Hosting · Sep 21
Gusto$18,920.00Payroll · Sep 20
2.54:1 · Fail
Strong gray-700Good
Figma$45.00Software · Sep 22
AWS$1,284.10Hosting · Sep 21
Gusto$18,920.00Payroll · Sep 20
10.31:1 · Pass

Why it matters, pros and cons

Why it matters

Light gray only looks refined on a good screen in a dim room. Everyone else, in glare or with low vision, loses it.

Pros

  • Readable in sunlight and for low vision.
  • Objective: a ratio passes or fails.
  • Meets WCAG 2.1 AA.

Cons

  • Fewer usable grays for quiet text tiers.
  • WCAG 2 misjudges some pairs, like orange on white.
  • Disabled controls are exempt; 4.5:1 makes them look enabled.