a11y teacher edition W3C WCAG 2.2 & WCAG 3.0 draft reference
Plain English Accessibility Hub

Translating W3C Standards for Designers, Developers, QA & Product teams

SC 1.4.6 Level AAA Perceivable

Contrast (Enhanced)

WCAG 2.2 success criterion • Guideline: Distinguishable

Tier 1 ยท The normative floor

Baseline compliance

What the normative text of WCAG 2.2 requires, and nothing more. Only a failure of this tier is a WCAG failure.

The bare minimum

Text and images of text have a contrast ratio of at least 7:1, and large-scale text at least 4.5:1, with the same exceptions as 1.4.3.

Normative text

Verbatim from WCAG 2.2, W3C Recommendation 12 December 2024. Underlined terms are defined below.

The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following:

Large Text
Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1;
Incidental
Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
Logotypes
Text that is part of a logo or brand name has no contrast requirement.

Definitions used (6)

Glossary definitions are normative. Their notes are informative.

text

sequence of characters that can be programmatically determined, where the sequence is expressing something in human language

image of text

text that has been rendered in a non-text form (e.g., an image) in order to achieve a particular visual effect

Informative notes (1)

This does not include text that is part of a picture that contains significant other visual content.

contrast ratio

(L1 + 0.05) / (L2 + 0.05), where

  • L1 is the relative luminance of the lighter of the colors, and
  • L2 is the relative luminance of the darker of the colors.
Informative notes (6)

Contrast ratios can range from 1 to 21 (commonly written 1:1 to 21:1).

Because authors do not have control over user settings as to how text is rendered (for example font smoothing or anti-aliasing), the contrast ratio for text can be evaluated with anti-aliasing turned off.

For the purpose of Success Criteria 1.4.3 and 1.4.6, contrast is measured with respect to the specified background over which the text is rendered in normal usage. If no background color is specified, then white is assumed.

Background color is the specified color of content over which the text is to be rendered in normal usage. It is a failure if no background color is specified when the text color is specified, because the user's default background color is unknown and cannot be evaluated for sufficient contrast. For the same reason, it is a failure if no text color is specified when a background color is specified.

When there is a border around the letter, the border can add contrast and would be used in calculating the contrast between the letter and its background. A narrow border around the letter would be used as the letter. A wide border around the letter that fills in the inner details of the letters acts as a halo and would be considered background.

WCAG conformance should be evaluated for color pairs specified in the content that an author would expect to appear adjacent in typical presentation. Authors need not consider unusual presentations, such as color changes made by the user agent, except where caused by authors' code.

large scale

with at least 18 point or 14 point bold or font size that would yield equivalent size for Chinese, Japanese and Korean (CJK) fonts

Informative notes (5)

Fonts with extraordinarily thin strokes or unusual features and characteristics that reduce the familiarity of their letter forms are harder to read, especially at lower contrast levels.

Font size is the size when the content is delivered. It does not include resizing that may be done by a user.

The actual size of the character that a user sees is dependent both on the author-defined size and the user's display or user agent settings. For many mainstream body text fonts, 14 and 18 point is roughly equivalent to 1.2 and 1.5 em or to 120% or 150% of the default size for body text (assuming that the body font is 100%), but authors would need to check this for the particular fonts in use. When fonts are defined in relative units, the actual point size is calculated by the user agent for display. The point size should be obtained from the user agent, or calculated based on font metrics as the user agent does, when evaluating this success criterion. Users who have low vision would be responsible for choosing appropriate settings.

When using text without specifying the font size, the smallest font size used on major browsers for unspecified text would be a reasonable size to assume for the font. If a level 1 heading is rendered in 14pt bold or higher on major browsers, then it would be reasonable to assume it is large text. Relative scaling can be calculated from the default sizes in a similar fashion.

The 18 and 14 point sizes for roman texts are taken from the minimum size for large print (14pt) and the larger standard font size (18pt). For other fonts such as CJK languages, the "equivalent" sizes would be the minimum large print size used for those languages and the next larger standard large print size.

user interface component

a part of the content that is perceived by users as a single control for a distinct function

Informative notes (3)

Multiple user interface components may be implemented as a single programmatic element. "Components" here is not tied to programming techniques, but rather to what the user perceives as separate controls.

User interface components include form elements and links as well as components generated by scripts.

What is meant by "component" or "user interface component" here is also sometimes called "user interface element".

pure decoration

serving only an aesthetic purpose, providing no information, and having no functionality

Informative notes (1)

Text is only purely decorative if the words can be rearranged or substituted without changing their purpose.

Tier 2 ยท The gap

Usability & user impact

Where content can meet this criterion and still make things harder for people with disabilities. These are not failures of SC 1.4.6, so raise them as usability defects. Known failures, including failures of related criteria, are listed in Tier 1.

Some readers find very high contrast uncomfortable, so a single fixed palette can't suit everyone.

Tier 3 ยท The golden path

Recommended best practice

The pattern that meets the floor, closes the gap, and avoids audit disputes. A recommendation, not a requirement.

Offer 7:1 as a theme option, or a user-selectable high-contrast mode, rather than forcing it on everyone.

W3C's Understanding document and techniques for SC 1.4.6 โ†— are informative: sufficient techniques show ways to pass, and documented failures show common ways to fail, but neither changes what the criterion requires.

How SC 1.4.6 maps to the WCAG 3 draft

From this site's reviewed map to the WCAG 3 editor's draft. It's an interpretation: W3C has not published a mapping.

The draft's contrast measure is still to be determined.

Successor provisions

From WCAG 2.2, section 5.1: โ€œThe main content of WCAG 2.2 is normative and defines requirements that impact conformance claims. Introductory material, appendices, sections marked as "non-normative", diagrams, examples, and notes are informative (non-normative). Non-normative material provides advisory information to help interpret the guidelines but does not create requirements that impact a conformance claim.โ€