WCAG Text Size and Contrast Thresholds

Start with the text’s rendered size and weight. A spacious button can still have a small label, and a heading may become normal-sized text in a mobile layout.

The two categories

Large text starts at 18 pt regular or 14 pt bold: 24 CSS px or 18⅔ CSS px at the standard CSS conversion. ColorPairLab treats weight 700 and above as bold in its preview. The appearance of a particular font still needs a visual check.

Four thresholds

Read AA and AAA separately. A pair can pass AA for large text while failing AA for normal text. Passing AA normal also does not imply a pass at AAA normal.

The same colors at two sizes

Try #777777 on #FFFFFF. Its ratio is about 4.478:1, displayed as 4.48:1. A 16 px regular paragraph fails AA normal; a 24 px regular heading passes AA large. The colors stay the same, but the applicable threshold changes.

.body { font-size: 16px; font-weight: 400; }
.large-regular { font-size: 24px; font-weight: 400; }
.large-bold { font-size: 14pt; font-weight: 700; }

Choose type that suits the content

If a small form hint fails, a darker text color may be a better fix than making it larger. For a genuinely large headline, use the large-text result. Check responsive styles too: a heading that shrinks on a phone may move into the normal-text category.

What the checker leaves to you

The checker covers the text contrast calculations in SC 1.4.3 and SC 1.4.6 for opaque flat colors. It does not inspect focus rings, icons, keyboard operation or every contextual exception. Review those parts of the component separately.

• Keep text size and weight with the color pair.
• Recheck headings that get smaller at narrow viewports.
• Leave some contrast margin instead of choosing a value just above the threshold.
• Use the linked WCAG guidance for exceptions that depend on context.