Perceivable · 1.4 Distinguishable

Contrast (Minimum) WCAG 1.4.3 · Level AA

Text and images of text need a contrast ratio of at least 4.5:1 against the background, or 3:1 for large text of at least 18pt, or 14pt bold. Incidental text, such as text in disabled controls, pure decoration or a picture with other significant content, and logo text are exempt.

Level
AA
Since
WCAG 2.0
Principle
Perceivable
Guideline
1.4 Distinguishable
Try the live demo Open the Contrast Checker Checklist

Live demo

Read the delivery note in both versions

The same task, done two ways: switch between the version that passes and the one that fails, or put them side by side. Everything in the box is live, so try it with a keyboard, a pointer or a screen reader.

Switch between Passes and Fails, then pick your own text and background colors. Text at this size needs a ratio of at least 4.5:1.

Live example

Passes

Order 48213 is on its way

Your parcel left our warehouse this morning. It should arrive on Thursday between 9 am and 1 pm.

Track your parcel

What happened

    Why it passes

    Dark grey text on white is 10.31:1. The delivery time is easy to read, even on a dim screen or with low vision.

    Why it fails

    Light grey text on white is 2.54:1. Many people, including older readers and anyone using a phone in bright sunlight, struggle to read the delivery time.

    Examples

    Code that fails, and the fix

    Five examples, each one running: the usual ways this criterion fails, and code that passes. Listen to them, measure them, or copy the code.

    01What changes − #999999 + #767676

    Fails

    Grey delivery note on white

    Live preview

    CSS
    .delivery-note {  font-size: 1rem;  color: #999999;  background-color: #ffffff;}

    #999999 on white is 2.85:1. Text at 16px is normal size, so it needs at least 4.5:1.

    Passes

    Darker grey that clears 4.5:1

    Live preview

    CSS
    .delivery-note {  font-size: 1rem;  color: #767676;  background-color: #ffffff;}

    #767676 on white is 4.54:1, just above the minimum. Setting the background as well as the text color keeps the pair together if a reader's default background is different.

    02What changes − #f97316 + #c2410c

    Fails

    White button label on bright orange

    Live preview

    CSS
    .add-to-cart {  font-size: 1rem;  font-weight: 600;  color: #ffffff;  background-color: #f97316;}

    White on #f97316 is 2.80:1. A 16px label is not large text, so it needs 4.5:1, and it does not even reach the 3:1 allowed for large text.

    Passes

    Deeper orange behind the label

    Live preview

    CSS
    .add-to-cart {  font-size: 1rem;  font-weight: 600;  color: #ffffff;  background-color: #c2410c;}

    White on #c2410c is 5.18:1, so the label meets 4.5:1 and the button keeps its orange brand color.

    Passes

    Dark layer between a photo and its text

    Live preview

    CSS
    .hero {  color: #ffffff;  background:    linear-gradient(rgb(0 0 0 / 0.6), rgb(0 0 0 / 0.6)),    url("beach.jpg") center / cover;}

    The 60% black layer turns even a pure white patch of the photo into #666666, so the white headline never drops below 5.74:1.

    Why it matters

    Who it helps

    People with low vision, color vision deficiencies or age-related loss of contrast sensitivity can read text that would otherwise blend into its background.

    W3C: Understanding 1.4.3

    • Level AA

      Level AA is the level most laws and policies require.

    • In WCAG versions

      Part of WCAG 2.0 since December 2008, and of every version after it.

      WCAG 1.0 checkpoints: 2.2

    • Where it is required

      Required where the law names WCAG 2.0 or later at this level: the United States, Canada, the European Union, the United Kingdom, France, Germany, Italy, Spain, the Netherlands, Ireland, Norway, Switzerland, India, Japan, Australia, New Zealand and Israel.

    How to test

    Checking it

    A few concrete steps. Automated tools find some failures; most need a person.

    1. Measure body text, link text, placeholder text and text over images against their actual backgrounds with a contrast checker.
    2. Apply 4.5:1 to normal text and 3:1 to text at least 24px, or about 18.7px bold, skipping disabled controls and logos.
    3. Check hover, focus, visited and error states as well as the default state.

    Common failures

    Where it breaks

    • Light gray text such as #999999 on white reaches only about 2.85:1.
    • White text over a photo or gradient drops below 4.5:1 where the background is light.
    • White button labels on a mid-tone brand color, such as orange or light green, fall below 4.5:1.

    On the Accessibility Checklist

    Related