Contrast (Minimum)

In brief

Light gray text on a white background looks elegant on a designer's bright monitor. For a person with low vision, a color deficiency, a cataract, an older screen or a phone in sunlight, it is unreadable.

This criterion requires a contrast ratio of at least 4.5:1 between text and its background. Large text, which is at least 24 px, or at least 18.66 px and bold, needs at least 3:1. The ratio is calculated from the relative luminance of the two colors. It runs from 1:1 (no contrast) to 21:1 (black on white).

What does it cover?

• Normal text: At least 4.5:1 against the background.
• Large text: At least 3:1 for text that is 18 pt (24 px) or larger, or 14 pt (18.66 px) or larger and bold.
• Images of text: Text in images has the same requirement. (Images of text are limited by 1.4.5.)
• Text on images and gradients: The ratio must hold at the worst point behind the text.
• Every state: Hover, focus, visited, selected and error states of text. Placeholders count too.
• Exceptions: Inactive (disabled) controls, pure decoration, text that is not visible to anyone, text that is part of a photo with other significant content, and logotypes.
• Out of scope: Contrast of icons, borders and chart elements is covered by 1.4.11. Enhanced contrast of 7:1 is Level AAA (1.4.6).

Who does it affect?

People with low vision, color vision differences and age-related vision changes need contrast to read. Anyone who uses a screen in bright light, a low quality display or a small phone also benefits. High contrast is easier for people with dyslexia and for people who tire easily. It also makes content easier to read for everyone.

In the EAA and EN 301 549

The European Accessibility Act (Directive (EU) 2019/882) applies to in-scope products and services placed on the market after 28 June 2025. Recital 47 names four principles for websites and mobile applications: perceivable, operable, understandable and robust. Readable contrast is part of "perceivable".

The technical counterpart is the standard EN 301 549, which incorporates WCAG 1.4.3 by reference and turns it into separate clauses for each kind of ICT.

Clause numbers follow the "9. + WCAG number" pattern of EN 301 549. In V3.2.1 the software clause is divided into further subclauses for open and closed functionality. Check the exact numbers in the standard when you cite them.

Standard version: EN 301 549 V4.1.1 (September 2026) is based on WCAG 2.2 and is the first version prepared specifically for the EAA. It has not yet been cited in the Official Journal of the European Union, so for now it is best treated as a voluntary technical route to the EAA's requirements. Once cited, it will give a presumption of conformity. The text of criterion 1.4.3 is the same in WCAG 2.1 and 2.2. It is a Level AA criterion.

A note on EAA scope: Article 2(4) of the Directive excludes certain content from the requirements, for example office file formats published before 28 June 2025 and archives that are not updated after that date. Content you publish or change after that date is not covered by these exclusions.

Directive (EU) 2019/882, EUR-Lex, opens in a new tab

Code examples for the web

1. Body text

Light gray text looks good but fails. #767676 on white is the lightest gray that passes for normal text.

body { color: #999999; background: #ffffff; } /* 2.85:1, fails */

body { color: #595959; background: #ffffff; } /* 7.0:1 */
/* #767676 on white is 4.54:1, the lightest gray that passes */

2. Large text

Large text only needs 3:1. A color that fails for body text may pass for a large heading.

.note  { color: #888888; font-size: 16px; } /* 3.54:1, fails: normal text */

h1     { color: #888888; font-size: 32px; } /* 3.54:1, passes: large text */
.note  { color: #595959; font-size: 16px; } /* 7.0:1 */

3. Buttons and brand colors

White text on a light brand color often fails. Darken the background until the ratio is enough.

.btn { background: #4caf50; color: #ffffff; } /* 2.78:1, fails */

.btn { background: #2e7d32; color: #ffffff; } /* 5.13:1 */

4. Placeholder text

Placeholder text is text. It needs the same ratio.

::placeholder { color: #aaaaaa; } /* 2.32:1, fails */

::placeholder { color: #6b6b6b; } /* 5.33:1 */

5. Text over an image

Check the worst point behind the text. A dark overlay or a solid background behind the text makes the ratio predictable.

.hero { background: url(photo.jpg); }
.hero h2 { color: #ffffff; }

.hero { background: url(photo.jpg); }
.hero h2 {
  color: #ffffff;
  background: rgba(0, 0, 0, 0.7);
  padding: 8px 12px;
}

6. Links and states

Check the hover, focus and visited colors as well as the default one.

a { color: #0066cc; }
a:visited { color: #b8a9d9; } /* fails on white */

a { color: #0066cc; }              /* 5.57:1 */
a:visited { color: #6b3fa0; }     /* passes on white */
a:hover { color: #003d7a; }       /* passes on white */

Code examples for mobile

The same rule applies in native mobile apps. Use system colors or color tokens whose ratios you have checked in both light and dark mode.

iOS (SwiftUI)

import SwiftUI

struct PriceLabel: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            // Avoid: a custom light gray (about 2.85:1 on white)
            // Text("Total").foregroundColor(Color(hex: 0x999999))

            // Use semantic colors, which adapt to dark mode
            Text("Total")
                .foregroundStyle(.secondary)

            // Or a checked token
            Text("€42.00")
                .foregroundStyle(Color("TextPrimary")) // 7:1 on the background
        }
    }
}

Android (Jetpack Compose)

import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color

@Composable
fun PriceLabel() {
    // Avoid: a custom light gray (about 2.85:1 on white)
    // Text("Total", color = Color(0xFF999999))

    // Use theme colors whose pairs you have checked in light and dark themes
    Text(
        text = "Total",
        color = MaterialTheme.colorScheme.onSurfaceVariant
    )

    // Or a checked color (5.62:1 on white)
    Text(
        text = "Payment failed",
        color = Color(0xFFC62828)
    )
}

How to test

• Measure with a tool: Use the browser developer tools, a color contrast checker or a color picker that reports the ratio. Check the actual foreground and background colors.
• Check every kind of text: Body text, headings, links, buttons, labels, placeholders, error messages, captions and footers.
• Check every state: Hover, focus, visited, selected, error and active. Do the same in the dark theme.
• Check text over images: Measure at the lightest or darkest point behind the text. Try different images.
• Check large text correctly: Is the text really 24 px, or 18.66 px and bold? Otherwise it needs 4.5:1.
• Test in poor conditions: View the page at low brightness and in sunlight, or on an older screen. Does the text stay readable?
• Use a checker as a start: Automated tools catch most solid-color failures, but they miss text on images and gradients. A person must check those.

Common mistakes

• Light gray text on white: The most common failure of any WCAG audit.
• White text on a light brand color: Orange and light green often fail. Darken the background.
• Light placeholders: Placeholder text needs the same ratio.
• Text over photos with no overlay: The ratio changes along the image.
• Checking only the default state: Hover, focus and visited colors can fail.
• Forgetting the dark theme: A pair that passes in light mode can fail in dark mode.
• Rounding up: A ratio of 4.49:1 does not meet 4.5:1.
• Treating disabled text as a design freedom: The exception covers inactive controls only, not any text that looks faded.

Sources

• Understanding SC 1.4.3: Contrast (Minimum) (W3C), opens in a new tab
• Definition of contrast ratio (W3C), opens in a new tab
• Directive (EU) 2019/882, European Accessibility Act (EUR-Lex), opens in a new tab
• EN 301 549 V4.1.1 (ETSI), opens in a new tab
• The European accessibility standard EN 301 549 has been updated (AccessibleEU), opens in a new tab

Standard version: EN 301 549 V4.1.1 (2026-09), WCAG 2.2. This page is for informational purposes only and is not legal advice. For binding requirements, refer to the official texts of the European Accessibility Act (Directive (EU) 2019/882) and EN 301 549.