Question 1

What's the actual threshold I need to hit?

Accepted Answer

WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18pt+, or 14pt+ bold). AAA — the stricter tier — requires 7:1 and 4.5:1 respectively. AA is the legal/contractual minimum for most accessibility compliance; AAA is a nice-to-have that designers often treat as aspirational.

Question 2

Light gray text on white looks elegant — why does it fail?

Accepted Answer

Because 'elegant' and 'readable' diverge in low contrast. Common offenders: `#999` on `#fff` (2.85:1, fails AA), `#ccc` on `#fff` (1.6:1, fails badly). Designers often get away with this because they're young, have perfect eyesight, and test on MacBook Pros with max brightness. A 50-year-old using a mid-tier Android phone in sunlight will not have the same experience.

Question 3

Does this work for non-text elements like buttons and icons?

Accepted Answer

WCAG also specifies contrast for UI components — 3:1 for interactive elements' boundaries and for 'meaningful' graphical objects. Use the same ratio output here; apply the 3:1 threshold instead of 4.5:1. A focus ring at 2:1 against its surroundings is a common accessibility fail.

Question 4

What about color blindness?

Accepted Answer

Contrast ratio alone doesn't cover color blindness — two colors can have great contrast but be indistinguishable to someone with deuteranopia. For that, don't rely on color alone to convey meaning: pair red/green status with icons or labels, use patterns alongside colors in charts.

Question 5

Can I enter HEX, RGB, or HSL?

Accepted Answer

Yes — any standard CSS color format. The tool converts to linear RGB for the luminance calculation. Named colors (`tomato`, `slategray`) work too.

Color Contrast Checker

What is Color Contrast Checker?

Related tools