Perceivable · 1.4 Distinguishable

Contrast (Enhanced) WCAG 1.4.6 · Level AAA

Text and images of text need a contrast ratio of at least 7:1 against the background, or 4.5: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
AAA
Since
WCAG 2.0
Principle
Perceivable
Guideline
1.4 Distinguishable
Try the live demo Open the Contrast Checker Checklist

Live demo

Push the text from 4.5:1 to 7:1

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 to Fails: the grey text meets the AA minimum of 4.5:1 but not 7:1. Try darker text colors until the ratio reaches 7:1.

Live example

Passes

September statement

Your balance on September 30 was $2,415.60. Two card payments are still pending and will show within three days.

Download the statement

What happened

    Why it passes

    Near-black text on white is 14.68:1. People with moderate vision loss can read the balance without zooming in or changing colors.

    Why it fails

    Mid-grey text on white is 4.83:1. It meets AA, but people with moderate vision loss, which is common with age, find it faint and tiring to read.

    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 − #767676 + #595959

    Fails

    Body text that only meets AA

    Live preview

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

    #767676 on white is 4.54:1. That meets the AA minimum, but normal-size text needs 7:1 at AAA.

    Passes

    Darker body text for 7:1

    Live preview

    CSS
    .statement p {  font-size: 1rem;  color: #595959;  background-color: #ffffff;}

    #595959 on white is 7.00:1, which meets the enhanced ratio for normal-size text.

    02What changes − #2563eb + #1e40af

    Fails

    Link blue chosen for AA

    Live preview

    CSS
    .account-links {  background-color: #ffffff;}.account-links a {  font-size: 1rem;  color: #2563eb;}

    #2563eb on white is 5.17:1. The links pass 1.4.3 but fall short of 7:1.

    Passes

    Deeper blue links

    Live preview

    CSS
    .account-links {  background-color: #ffffff;}.account-links a {  font-size: 1rem;  color: #1e40af;}

    #1e40af on white is 8.72:1, so the links meet 7:1 and still look like blue links.

    Passes

    Large heading at 4.5:1

    Live preview

    CSS
    .statement h2 {  font-size: 1.5rem; /* 24px at the default size */  color: #767676;  background-color: #ffffff;}

    Text of 24px or more is large text, which needs 4.5:1 at AAA. #767676 on white is 4.54:1, so this heading passes.

    Why it matters

    Who it helps

    People with moderate vision loss, around 20/80, which is common with age, can read text without needing contrast-enhancing assistive technology.

    W3C: Understanding 1.4.6

    • Level AAA

      Level AAA is the highest level. It is not required for whole sites, but it is worth meeting where you can.

    • 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

      No law on this site requires Level AAA criteria for whole sites.

    How to test

    Checking it

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

    1. Measure text against its actual background with a contrast checker, including hover, focus and other states.
    2. Apply 7:1 to normal text and 4.5:1 to text at least 24px, or about 18.7px bold, skipping disabled controls and logos.

    Common failures

    Where it breaks

    • Body text in #767676 on white meets 4.5:1 but falls short of 7:1.
    • Link and button colors chosen to meet the AA ratio do not reach 7:1 for normal-size text.

    Related