WCAG Contrast Ratios for Normal and Large Text

Light grey body text on a white background is readable the way a whisper is audible: technically present, but hard work. WCAG contrast ratios put a number on that feeling — a ratio between two colours, with clear pass marks for normal and large text.

This guide explains what a WCAG contrast ratio is, why normal text needs 4.5:1 and large text needs only 3:1, what exactly counts as "large text", and how to test any colour pair yourself. The numbers come from the WCAG 2.1 specification and its published formula, checked with FBSubNet's Two-Color Contrast Checker.

Contrast ratio fundamentals

A contrast ratio compares the relative luminance of two colours — roughly, how bright each one appears to the human eye. Relative luminance runs from 0 (pure black) to 1 (pure white), and the ratio is calculated with this formula from the WCAG specification:

contrast ratio = (L1 + 0.05) / (L2 + 0.05)

L1 is the luminance of the lighter colour and L2 is the luminance of the darker one. The result always falls between 1:1 and 21:1: 1:1 means the two colours are identical — white text on a white background, completely invisible — and 21:1 is the maximum, pure black (#000000) on pure white (#FFFFFF).

Three things about the formula are worth knowing. First, the ratio depends only on the two colours, not on the font, size or weight — size and weight matter later, when you compare the ratio against a threshold, but they never change the ratio itself. Second, the 0.05 keeps the maths sane for very dark colours and accounts for ambient light. Third, relative luminance is not a simple average of red, green and blue: human vision is far more sensitive to green than to blue, so the formula weights green at about 71%, red at 21% and blue at 7%.

You never need to calculate a ratio by hand — every contrast checker does it for you. But knowing that a ratio is a luminance calculation, not a design opinion, is what makes the thresholds that follow worth trusting.

Normal versus large text: the 4.5:1 and 3:1 thresholds

The rule most people need lives in Success Criterion 1.4.3 Contrast (Minimum), a Level AA requirement in WCAG 2.0, 2.1 and 2.2: normal text needs a contrast ratio of at least 4.5:1 against its background, and large text needs at least 3:1.

Why two numbers? Larger letters have thicker strokes and more area, so they stay legible at lower contrast. The thresholds come from vision research: 3:1 is roughly the minimum contrast at which people with normal vision can read comfortably, and the AA normal-text threshold applies a compensation factor of about 1.5 on top of that, targeting readers with visual acuity around 20/40. Three times 1.5 gives 4.5.

So what counts as "large text"? WCAG defines it precisely, and the definition trips up more teams than the ratio itself. Text qualifies as large when it is 18pt or larger at regular weight — 24px at default browser settings — or 14pt or larger when bold, about 18.66px at bold weight. Everything else is normal text and needs the full 4.5:1. A 20px subheading in regular weight is not large text, and an 18px bold heading is not large text either — bold only buys you the lower threshold from 18.66px up.

The thresholds at a glance:

The AAA column comes from Success Criterion 1.4.6 Contrast (Enhanced): 7:1 for normal text and 4.5:1 for large text. AAA is a stretch goal — most laws and procurement standards, including EN 301 549 in the EU and ADA-related practice in the US, require Level AA. Aim for AAA where readability is critical, such as healthcare or government content. Notice the pattern: the AAA large-text threshold (4.5:1) is exactly the AA normal-text threshold. Making text bigger buys you one step down; raising your conformance level buys you one step up.

One practical point: the thresholds are inclusive, so a pair measured at exactly 4.5:1 conforms at AA for normal text. Still, treat 4.5:1 as a floor, not a target — a ratio that passes by 0.01 on your monitor may fail on a cheap laptop in sunlight. Aim for a comfortable margin, not a photo finish.

A worked example: testing real colour pairs

Below are four pairs checked with the WCAG relative-luminance formula — the same calculation FBSubNet's Two-Color Contrast Checker performs. Each pair is foreground text on a white (#FFFFFF) background unless stated otherwise.

Medium grey #767676 on white — 4.54:1

Grey #767676 on white measures 4.54:1, so it passes AA for normal text — but only just. It is roughly the lightest grey that still passes for body copy on white. One shade lighter, #777777, measures 4.48:1 and fails AA for normal text, though it still passes the 3:1 large-text threshold. The margin is 0.04 — no margin at all.

Light grey #999999 on white — 2.85:1

The classic failing pair. Light grey body text on white is everywhere — captions, metadata, form hints — and at 2.85:1 it fails even the 3:1 large-text threshold, let alone 4.5:1. Darken it to #595959 and it measures 7.00:1, passing AAA for normal text.

Dark grey #595959 on white — 7.00:1

At exactly 7.00:1, #595959 on white clears the AAA normal-text threshold — a good default for body copy when you want a softer look than pure black. Compare #666666 on white at 5.74:1: comfortably above AA, below AAA.

Brand blue #336699 on white — 6.00:1

Brand colours are where teams most often get caught. A mid-blue like #336699 on white measures 6.00:1, passing AA for normal text. But many brand blues are lighter: white text on a #1A73E8 blue button measures 4.51:1 — a pass by 0.01. Test the actual text-on-brand-colour combination.

Two lessons fall out of these pairs. First, the boundary between pass and fail is a single shade of grey: #767676 passes and #777777 fails — you cannot judge contrast by eye. Second, small text is where failures hide. Headings are usually dark and large, so they pass easily; the failures live in captions, footnotes and form hints — the smallest text on the page, held to the strictest threshold. Test those first. (For reference, the maximum ratio is 21:1, pure black on white, though many sites use a very dark grey like #222222 instead — still over 15:1.)

What the ratios do not cover

Contrast ratios are a floor, not a guarantee of readability. Success Criterion 1.4.11 Non-text Contrast, added in WCAG 2.1 at Level AA, requires 3:1 contrast for interface components and meaningful graphics: form field borders, icons, focus indicators and chart elements, measured against their adjacent colours. A button whose border is a whisper of grey on white can fail 1.4.11 even when its label passes 1.4.3. There is no AAA equivalent — 3:1 is the requirement at every level.

WCAG also exempts logotypes and brand names, and inactive controls such as a greyed-out submit button have no contrast requirement either. And contrast says nothing about font choice: a 4.5:1 pair in a thin, decorative typeface at 12px is technically compliant and still hard to read. Finally, colour alone must never be the message — a red error notice that relies on redness alone fails a separate rule, 1.4.1 Use of Color, even if its contrast is perfect.

How to test your own colours

Testing a pair takes less than a minute.

1. Check the pair in a contrast checker

Open FBSubNet's Two-Color Contrast Checker, enter the exact foreground and background HEX values, and read the ratio with the pass/fail results for AA normal text, AA large text and AAA normal text. Test the real pair — the actual text colour on the actual background it sits on.

2. Test the smallest text first

List every text style on the page from smallest to largest and test the smallest ones first: captions, footnotes, form hints, table metadata. These are the styles held to 4.5:1 that most often fail. For each style, work out whether it is normal or large text, then compare the ratio against the right threshold.

3. Check the non-text elements too

While you are on the page, check the borders of text fields, the focus indicator, and any icon that carries meaning, against 3:1. Chrome and Firefox show contrast ratios in their colour pickers when you inspect an element, and Lighthouse and axe DevTools flag violations across a whole page automatically.

4. Fix by darkening, not by guessing

When a pair fails, darken the text (or lighten the background) while keeping the same hue, walking the lightness down until the ratio clears the threshold with a margin of at least 0.5 — aim for 5:1 or better for normal text, not 4.51:1. If the colour is a brand colour you cannot change, increase the size or weight instead: a 16px regular label that fails at 4.5:1 may pass at 3:1 once it becomes 24px, or 18.66px bold.

5. Re-test after every design change

Contrast is not a one-time audit: a new background tint, a hover state or a rebrand can silently break pairs that passed for months. Add a contrast check to the same review step where you check spelling and links. For a fuller approach to choosing colours that stay readable, see our guide on how to choose readable text and background colors.

Common mistakes that cause contrast failures

Most contrast failures come from a handful of habits. Light grey body text, used to create hierarchy until the grey drifts past #767676 into fail territory — use size and weight for hierarchy instead. Placeholder text as the only label, usually in a light grey that fails 4.5:1 and vanishing the moment the user types — keep a visible label outside the field. Testing headings and ignoring captions, which fail because they are small and light while headings pass because they are big and dark — audit from the smallest text upward. And forgetting hover and focus states: a link that passes at rest can fail on hover if the hover colour is lighter, and a faint focus ring fails 1.4.11. Test every state, not just the default.

Frequently asked questions

Is 4.5:1 required for all text?

At Level AA, yes for normal text and 3:1 for large text, under Success Criterion 1.4.3. The exceptions are narrow: logotypes, incidental text, and text that is part of a picture with no alternative.

Does dark mode change the thresholds?

No. Light text on a dark background is tested with the same formula and the same thresholds. Dark mode has its own traps — a mid-grey on a near-black background can fail just as easily — so test the dark palette separately, pair by pair.

Can a contrast checker replace an accessibility audit?

No. A checker answers one question about two colours. A full audit also covers keyboard navigation, screen-reader announcements, focus order, alt text and form labels. Use the checker as a fast gate during design and an automated tool such as Lighthouse or axe for page-wide scans, then a manual review for the rest.

The short version

A contrast ratio is a single number, from 1:1 to 21:1, describing how different two colours are in luminance. WCAG Level AA requires 4.5:1 for normal text and 3:1 for large text — large meaning 24px or bigger, or 18.66px and up when bold. Level AAA raises those to 7:1 and 4.5:1, and non-text elements such as form borders and focus indicators need 3:1 of their own. The worked pairs show how close the boundary is: #767676 passes at 4.54:1, #777777 fails at 4.48:1, and #999999 fails even the large-text threshold at 2.85:1. Test your smallest text first, and aim for a margin above the minimum.