达到 AA：正文和大号文本的阈值

Most teams commit to WCAG Level AA for contrast. It is strict enough to help real users and realistic enough to actually ship.

For body copy, AA asks for at least 4.5:1. That covers paragraphs, labels, and most of the words on your page.

Large text means 24px regular, or 18.66px and bold. At that size letters are easier to read, so the rules ease up.

Large text only needs 3:1. The bigger shapes carry more visual weight, so a smaller brightness gap still reads clearly.

Weight matters: bold text qualifies as large at a smaller 18.66px, since thicker strokes are simply easier for the eye to catch.

WCAG defines large as 18pt or 14pt bold, which map to 24px and 18.66px in CSS. Tools usually do the conversion for you.

Buttons, inputs, and focus indicators must hit 3:1 against their surroundings under criterion 1.4.11, so controls stay visible.

Want stronger guarantees? AAA raises normal text to 7:1 and large text to 4.5:1, but most products target AA as their baseline.

A few things skip the rule: disabled controls, pure decoration, and brand logos have no minimum contrast requirement.

That faint gray placeholder is real text, so it must meet 4.5:1 too. Most defaults fail, so darken them on purpose.

This heading hits the large-text size, so a 3:1 ratio is enough for it to pass AA.

Pin down the AA numbers for different text.

Remember the pair: 4.5:1 for normal text and 3:1 for large text or UI parts. Nail these and your contrast passes AA. Next: never relying on color alone. 🎯