Hitting AA: Text and Large Text Thresholds
Know the minimum ratios for body and big text.
Hitting AA: Text and Large Text Thresholds is a free Web Accessibility Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Web Accessibility Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Meet the AA Target
Most teams commit to WCAG Level AA for contrast. It is strict enough to help real users and realistic enough to actually ship.
Normal Text: 4.5 to 1
For body copy, AA asks for at least 4.5:1. That covers paragraphs, labels, and most of the words on your page.
What Counts as Large
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: 3 to 1
Large text only needs 3:1. The bigger shapes carry more visual weight, so a smaller brightness gap still reads clearly.
Bold Lowers the Size Bar
Weight matters: bold text qualifies as large at a smaller 18.66px, since thicker strokes are simply easier for the eye to catch.
Points vs Pixels
WCAG defines large as 18pt or 14pt bold, which map to 24px and 18.66px in CSS. Tools usually do the conversion for you.
UI Components: 3 to 1
Buttons, inputs, and focus indicators must hit 3:1 against their surroundings under criterion 1.4.11, so controls stay visible.
AAA Goes Further
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.
Disabled and Logos Are Exempt
A few things skip the rule: disabled controls, pure decoration, and brand logos have no minimum contrast requirement.
Placeholder Text Still Counts
That faint gray placeholder is real text, so it must meet 4.5:1 too. Most defaults fail, so darken them on purpose.
Sizing Large Text in CSS
This heading hits the large-text size, so a 3:1 ratio is enough for it to pass AA.
h2 {
font-size: 24px;
font-weight: 400;
}Quick Check
Pin down the AA numbers for different text.
Recap: Hitting AA
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. 🎯
Frequently asked questions
Is the “Hitting AA: Text and Large Text Thresholds” lesson free?
Yes — the full text of “Hitting AA: Text and Large Text Thresholds” is free to read here on the web, and the Web Accessibility Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Web Accessibility Academy course, upgrade to CoddyKit PRO.
What will I learn in “Hitting AA: Text and Large Text Thresholds”?
Know the minimum ratios for body and big text. You practise Web Accessibility Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Web Accessibility Academy?
No prior experience is required. Web Accessibility Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Hitting AA: Text and Large Text Thresholds” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Web Accessibility Academy lesson?
Yes. Every Web Accessibility Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Why Contrast Ratios Exist
- Hitting AA: Text and Large Text Thresholds
- Never Rely on Color Alone
- Checking Contrast With Free Tools