October 28, 2026

Color contrast ratio in WCAG: 4.5:1, 3:1 and what they apply to

The WCAG color contrast ratio requirement fits in one line: text needs a contrast ratio of at least 4.5:1 against its background, and large text at least 3:1. That is Success Criterion 1.4.3 Contrast (Minimum), at Level AA. Its purpose is to let people with moderately low vision or impaired contrast perception read text without contrast-enhancing assistive technology. A second criterion, 1.4.11 Non-text Contrast, requires 3:1 for the visual information needed to identify user interface components and their states, and for the parts of graphics needed to understand the content. Below is what both criteria actually say, what counts as large text, which exceptions apply, and how to measure contrast correctly.

The color contrast ratio thresholds WCAG sets for text

SC 1.4.3 covers the visual presentation of text and images of text. The general threshold is 4.5:1. Large-scale text, and images of large-scale text, get a lower threshold of 3:1, because larger text with wider strokes is easier to read at lower contrast.

These values are intended to be treated as thresholds: W3C says the computed ratio should not be rounded, so 4.499:1 does not meet the 4.5:1 threshold.

The numbers have a rationale. W3C notes that 3:1 is the minimum recommended by ISO 9241-3 and ANSI/HFS 100-1988 for standard text and vision. The 4.5:1 ratio compensates for the loss of contrast sensitivity associated with visual acuity of about 20/40: 3 × 1.5 = 4.5. By the same logic, 20/80 acuity calls for about 7:1, the ratio used in the Level AAA criterion 1.4.6.

Body text and images of text: at least 4.5:1 (Level AA).
Large text and images of large text: at least 3:1 (Level AA).
Level AAA (SC 1.4.6): a 7:1 ratio.
Visual information identifying UI components and states, and parts of graphics needed for understanding: at least 3:1 (SC 1.4.11).

What counts as large text in WCAG?

WCAG defines large-scale text as at least 18 point, or at least 14 point bold, or an equivalent size for Chinese, Japanese and Korean fonts. Points are CSS points: 1pt = 1.333px, so 14pt and 18pt are roughly 18.5px and 24px.

For many mainstream body fonts, 14 and 18 point are roughly 1.2 and 1.5 em, or 120% and 150% of the default body text size, but W3C says authors need to check this for the fonts actually in use. When evaluating, get the point size from the user agent, or calculate it from font metrics the way the user agent does. What counts is the size when the content is delivered, not any resizing done by the user.

Be careful with very thin or unusual fonts: they are harder to read, especially at low contrast, and anti-aliasing can render them much fainter than the color defined in CSS. Text can then nominally pass yet be hard to read in practice; best practice is a font with thicker strokes or a color pair that exceeds the minimum.

Exceptions: logos, decorative text and inactive components

SC 1.4.3 sets no contrast requirement in a few specific cases. These exceptions are narrow: W3C stresses that, beyond logos and logotypes, text with insufficient contrast because of corporate identity or brand guidelines is not exempt.

Even a logo loses its exemption when low contrast is an author's choice rather than a brand requirement. W3C's example: company logos shown with low contrast by default, until they are hovered, fail the criterion. When a logo acts as a link or control, the recommended practice is to choose a sufficiently contrasting variant if the brand guidelines allow it, or to provide an equivalent component that meets the contrast requirements.

Logotypes: text that is part of a logo or brand name.
Pure decoration: text is purely decorative only if its words can be rearranged or substituted without changing their purpose, like random words in very light text on a dictionary cover.
Inactive UI components: for example a visible submit button that cannot be activated until all required fields are completed.
Text not visible to anyone, or text in a picture with significant other visual content, such as a street sign that happens to appear in a photograph.

Text contrast vs component contrast (SC 1.4.11)

SC 1.4.11, also Level AA, requires at least 3:1 against adjacent colors for two things: visual information required to identify UI components and their states (except inactive components or appearance set by the user agent and not modified by the author), and parts of graphics required to understand the content (except where a particular presentation is essential to the information).

In practice, when they are what identifies the component or its state, an input border, a checkbox tick or a dropdown arrow must reach 3:1. So must an author-styled focus indicator; the browser's default focus style, if not modified, is exempt from the ratio but must still be visible. W3C gives figures: a checkbox with a #9D9D9D border on white (2.7:1) fails, while an input with a #767676 border on white passes. An author-styled #AAA focus indicator at 2.3:1 on white also fails.

The criterion does not require a visible boundary around every button: if a control has text or a sufficiently contrasting icon, its hit area need not be outlined. A sufficiently contrasting focus indicator is still needed. Author-added hover effects need not reach 3:1, as long as they do not make the component, or the indicators of other states such as focus or selection, lose sufficient contrast.

For graphics, each line in a graph or slice of a pie chart required for understanding must reach 3:1. That no longer applies when text labels and values convey the same information, when the information is available in another form such as a table, or when the presentation is essential: flags, photos, screenshots, heat maps. Text inside a graphic is still subject to SC 1.4.3. Heavily stylized text, or characters used as symbols like an X close button or a > arrow, falls under non-text contrast.

How to measure color contrast on a page

The ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 of the darker one. It ranges from 1:1 to 21:1. Contrast is calculated so that hue is not a key factor. Tools do the calculation automatically; W3C lists several, such as Colour Contrast Analyser, for information only, with no endorsement implied.

For a reliable result, use the colors from the user agent or the markup and stylesheets rather than on-screen pixels, which anti-aliasing can alter. For SC 1.4.3, if no background color is specified, white is assumed. But specifying a text color without a background color, or the reverse, is itself a failure (F24), because the user's default color is unknown. A background image that does not contrast enough with the text on it is another documented failure (F83).

Also check placeholder text and text shown on hover or focus: SC 1.4.3 covers them.
For each component (link, button, field), find the visual indicators that show it exists and its state, test them on page load, then in each state.
For each informative graphic, check each graphical object against its adjacent colors; if it uses several colors or a gradient, test the least contrasting area, and if that is under 3:1, assume it is invisible: is the object still understandable?
With a gradient, take the central color of the relevant area and ask whether the object is still identifiable without the insufficient adjacent color.

Frequently asked questions

What is the minimum color contrast ratio for accessibility?

At WCAG Level AA, text needs at least 4.5:1 against its background and large text at least 3:1. Visual information that identifies UI components and their states, and parts of graphics needed for understanding, need 3:1 against adjacent colors (SC 1.4.11).

What size counts as large text for WCAG contrast?

At least 18 point, or 14 point bold, which is roughly 24px and 18.5px in CSS. For many mainstream fonts that is about 150% and 120% of the default body text size.

Does a 4.49:1 contrast ratio pass?

No. These ratios are meant to be treated as thresholds and the computed ratio should not be rounded: W3C states that 4.499:1 does not meet the 4.5:1 threshold.

Do logos need to meet color contrast requirements?

Text that is part of a logo or brand name is exempt. But if a logo is shown with low contrast as an author's choice rather than because of brand guidelines, that presentation is not exempt.

Do disabled buttons need sufficient contrast?

No. Inactive components, such as a disabled control in HTML, are not required to meet SC 1.4.3 or SC 1.4.11.

How do you calculate a contrast ratio?

Use (L1 + 0.05) / (L2 + 0.05), with L1 the relative luminance of the lighter color and L2 of the darker one. Contrast checking tools do this automatically from the color values.

Sources

This article relies on the official sources listed at the end of the page.