Accessibility

How Font Size Affects Contrast Requirements in WCAG

WCAG defines two contrast levels based on text size. Normal text requires 4.5:1 for AA and 7:1 for AAA. Large text requires only 3:1 for AA and 4.5:1 for AAA. This distinction matters because it opens up color combinations for headings and display text that would fail for body content.

What Counts as Large Text

WCAG defines large text as 18pt (24px) or larger for normal weight, or 14pt (approximately 18.66px) or larger for bold weight. In practice, most h1 and h2 elements qualify as large text, while body text and small UI labels do not.

Why the Difference Exists

Larger characters are inherently more readable because they occupy more visual space. The thicker strokes and bigger letter shapes are easier for low-vision users to distinguish from the background. The reduced contrast requirement reflects this physical reality.

Practical Implications

Your primary color might have a 3.8:1 contrast ratio against your light base. That fails AA for body text (needs 4.5:1) but passes AA for large text (needs 3:1). This means you can use that primary for h1 and h2 headings but not for body paragraphs or small labels.

Planning for Both in PaletteRx

In PaletteRx's Step 3 contrast grid, pairs that show between 3:1 and 4.5:1 are in the "large text only" zone. Use these pairs exclusively for headings and display elements. Pairs above 4.5:1 are safe for all text sizes. Plan your color assignments with these thresholds in mind.

📘 Rule of thumb: If a color pair passes 4.5:1 in PaletteRx, use it anywhere. If it passes 3:1 but not 4.5:1, restrict it to headings and large text. Below 3:1, do not use it for any text.

Ready to Build Your Palette?

PaletteRx guides you from color selection to accessible, export-ready design systems in minutes.

🎨 Launch PaletteRx