The large text contrast exception (3:1) explained

Large-scale text is text big enough, or heavy enough, to be read at a lower contrast than body copy. Success criterion 1.4.3 Contrast (Minimum) (Level AA) asks for 4.5:1 for most text and 3:1 for large-scale text and images of large-scale text. W3C's reason, in its Understanding document for 1.4.3, is that text that is larger and has wider character strokes is easier to read at lower contrast. The exception is narrow. It depends on the size and weight the text is delivered at, so it does not follow the visitor's zoom level, it does not reach icons and control borders, and a color that passes on a 28 pixel heading can fail on the caption beside it.

This page converts the WCAG 2.2 definition to CSS and covers the cases people misjudge. The full set of ratios is in our color contrast guide. It is general information about a technical standard, not legal advice.

What the exception says

Criterion 1.4.3 sets 4.5:1 for text and images of text, with exceptions. Large-scale text needs only 3:1. A separate set of exceptions carries no contrast requirement at all: text in inactive interface components, pure decoration, text that is not visible to anyone, text that is part of a picture with significant other visual content, and logotypes. The Level AAA criterion, 1.4.6 Contrast (Enhanced), has the same large text exception at higher values.

W3C's glossary says the 18 and 14 point sizes for roman text come from the minimum size for large print, 14 point, and the larger standard font size, 18 point, with equivalent sizes for fonts such as Chinese, Japanese and Korean (WCAG 2.2 definition of large-scale). W3C lists technique G145, ensuring at least 3:1 between text and the background behind it, as a sufficient technique for text at these sizes.

What counts as large text

WCAG 2.2 defines large-scale text as at least 18 point, or 14 point bold, or a font size that would yield an equivalent size for Chinese, Japanese and Korean fonts. Points are not pixels, so the definition has to be converted. CSS defines a pixel as 1/96 of an inch and a point as 1/72 of an inch (CSS Values and Units), which makes one point 1.33 pixels.

W3C's pages round 14 point to approximately 18.5 pixels. The exact figure is about 18.67 pixels (14 times 4/3). Our accessibility bookmarklet uses the exact figure, so bold text at 18.5 pixels counts as normal text there. That is the safer reading.

Sizes set in em or rem need the same conversion. W3C notes that for many mainstream body fonts 14 and 18 point are roughly 1.2 and 1.5 em, and that authors need to check this for the fonts they use. Browsers' default font size is usually 16 pixels (MDN on font-size), so 1.5em is exactly 24 pixels. 1.2em is 19.2 pixels, which clears the bold line, but 1.15em is 18.4 pixels, which does not. Work from the computed size in pixels, not the rule of thumb.

What counts as bold?

WCAG gives no weight number for bold. CSS does: the bold keyword is the same as weight 700 and normal is the same as 400 (MDN on font-weight). W3C's Understanding document says 18 point and bold can have different meanings in different fonts but, apart from very thin or unusual fonts, they should be sufficient. Our reading, and the rule our bookmarklet uses, is that weight 700 or above is bold. A 20 pixel label set in semibold (600) is normal text under that rule and needs 4.5:1.

Check what is drawn. When a font family has no face at the exact weight requested, the browser picks another weight for rendering, while the computed value stays what the style sheet specified (MDN). A tool that reads only the computed weight cannot tell which face was drawn. If text depends on being bold to count as large, make sure the font you load has that weight.

Size is measured as delivered, not as zoomed

The definition says font size is the size when the content is delivered and does not include resizing that a user does. A visitor who zooms a page to 200% does not change which minimum applies to 16 pixel text. Resizing belongs to a different criterion, 1.4.4 Resize Text (Level AA), which asks that text, other than captions and images of text, can be resized without assistive technology up to 200 percent without loss of content or functionality. Our zoom and reflow guide covers it.

The delivered size can still change with the screen. A heading set at 26 pixels on a wide screen and cut to 20 pixels regular on a phone is large text on one and normal text on the other, so test each breakpoint.

Do headings count as large text?

Often, but not always. The HTML Standard's default style sheet makes every heading bold and sizes it in em (HTML Standard, sections and headings). W3C's own note says that if a level 1 heading renders at 14 point bold or larger on major browsers, it is reasonable to treat it as large text. At a 16 pixel base, the defaults work out as follows.

The h3 case is fragile. If the page sets its body text to 15 pixels, a default h3 computes to 17.55 pixels and stops being large. Style sheets often change heading sizes, and em sizes compound inside nested elements (MDN), so read the computed size.

Worked examples

The ratios below were computed with the WCAG formula, using the same code as our contrast checker. The colors are invented examples, shown to three decimals because several sit on a threshold.

Three rows repay a second look. The #959595 gray shows as 3.00 when rounded to two decimals, yet it fails every column, because W3C says computed values should not be rounded: 4.499:1 would not meet 4.5:1 (Understanding 1.4.3), and 2.999:1 would not meet 3:1 (Understanding 1.4.11). White on the mid blue, as in a brand button, fails at 16 pixels bold or not, because that is normal text, and passes at 19 pixels bold. White on the bright orange fails at every size.

Where the exception stops

• Smaller text in the same color. The exception is decided piece of text by piece of text. A light accent that passes at 3:1 on a 28 pixel heading fails on a 14 pixel caption, label or link in that color. Keep a darker shade for small text (see accessible brand color palettes).
• Interface components and graphics. Icons, input borders and chart lines fall under 1.4.11 Non-text Contrast, not the text rules. It asks 3:1 against adjacent colors for the visual information needed to identify a control or understand a graphic, whatever its size. W3C says its requirements and rationale are similar to those for large text, and the number matches, but it is a separate rule. Text inside a graphic still has to meet 1.4.3. See also focus indicators.
• Thin fonts. The definition's own note warns that fonts with extraordinarily thin strokes or unusual features are harder to read, especially at lower contrast, and the Understanding document says best practice is for authors to choose a font with stronger, thicker lines. A 24 pixel weight-300 heading meets the size rule, and 3:1 may still be too little. In our reading, treat 3:1 as a floor for thin typefaces (see accessible typography).
• Text over images. Large text over a picture still has to reach 3:1 against what is directly behind the letters, the case G145 uses as its example. Measure the worst spot, not one pixel (see text over images and contrast).
• States and themes. Placeholder text and text shown on hover or keyboard focus are measured like other text (Understanding 1.4.3), so the size rule applies to them too (see placeholder text accessibility). A dark mode keeps the size rule but swaps the colors, so every pair is measured again (see dark mode accessibility).

Check it yourself

Four steps settle the question for any piece of text:

1. Read its computed size and weight. In Chrome DevTools, the Computed tab shows the CSS actually applied to the selected element. Look for font-size and font-weight.
2. Sort it. 24 pixels or more is large. 18.67 pixels or more at weight 700 or above is large. Anything else is normal text.
3. Measure the ratio of the colors actually painted and compare it with 3:1 or 4.5:1 without rounding up.
4. Repeat at each breakpoint, in each state and in each theme.

The free color contrast checker takes a text color and a background color and shows the ratio, rounded down, with a verdict for normal and large text at AA and AAA. If a pair fails, pick "AA large text" or "AA normal text" as your target and it suggests the nearest color that passes. It cannot tell which row applies to your text, so use the size table above for that.

The accessibility bookmarklet measures the text on screen in the page you have open. It holds text it finds to be large to 3:1 and the rest to 4.5:1, counting 24 pixels or more, or about 18.67 pixels or more at weight 700 or above, as large. Text over an image, a gradient or a video is listed for a manual check, and the image contrast checker reports contrast at the worst spot behind a box you draw. To choose shades, the accessible color palette tool builds a scale from your brand colors and measures every pair.

Our free scan reads the HTML your server sends and does not compute rendered colors or sizes, so it cannot decide whether text is large or whether it passes (what we check sets out the limits). Use the tools above for contrast and run the scan for its rule-based checks: Scan my site for free.

Keep it checked

Whether text counts as large depends on the size it is drawn at, and that moves whenever a style sheet changes. GotAlt checks the pages you monitor every week. It compares the alt text of up to six images per page with the image itself, runs its rule checks, opens monitored pages in a browser for contrast and other checks that need a rendered page (see what we check), and reports what changed. Plans are from $69 a month. Audit my whole site from $69/mo.