WCAG 1.4.3: Contrast (Minimum)
Low-contrast text is the single most common accessibility problem on the web. This criterion sets a measurable floor: normal text needs a contrast ratio of at least 4.5:1, and large text at least 3:1, measured from the relative luminance of the text and its background. Get it right and your content stays readable for low-vision users, aging eyes, color-blind readers, and anyone squinting at a phone in bright sun.
The success criterion, in full
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3: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.
The single 4.5:1 rule carries the criterion; the three exceptions relax it for large text (3:1), for incidental and disabled text, and for logotypes. “Large-scale” means at least 18pt (about 24px) regular, or 14pt (about 18.66px) bold.
Who this helps
Sufficient contrast is one of the few accessibility requirements that visibly improves the experience for practically everyone, not just people who identify as having a disability:
People with low vision
Roughly one in thirty people has low vision that is not fully corrected by glasses. Adequate contrast is often the difference between reading a paragraph and giving up on it.
Color-blind users
About 8% of men and 0.5% of women have some color vision deficiency. Because the ratio is based on luminance rather than hue, meeting it keeps text legible regardless of which colors a user cannot distinguish.
Older readers
The lens of the eye yellows and the pupil shrinks with age, cutting the light that reaches the retina. Text that a 20-year-old reads easily can be invisible to a 70-year-old.
Anyone in bright light
Sunlight on a phone screen, glare on a laptop, or a dimmed low-power display all wash out low-contrast text — a situational version of low vision that affects every user.
People with cognitive disabilities
Higher contrast reduces the effort of decoding letters, which lowers reading fatigue and helps people who process text more slowly.
Users on cheap or old screens
Budget monitors and phones render subtle color differences poorly. Contrast that passes on a designer's calibrated display can vanish on a $99 device.
The ratios and exceptions
Contrast ratio is a single number from 1:1 to 21:1, derived from the relative luminanceof the foreground and background colors. Pure black on pure white is the maximum, 21:1; two identical colors are 1:1. The formula linearizes each color channel and weights green most heavily, which is why two colors that look equally “dark” can measure very differently. The thresholds you need to hit:
- Normal text — 4.5:1. The default. Any text below the large-text thresholds must reach a 4.5:1 ratio against its background, including body copy, links, labels, captions, and placeholder text.
- Large text — 3:1. Text that is at least 18pt (≈24px) regular, or at least 14pt (≈18.66px) bold, only needs 3:1. Larger letterforms have thicker strokes, so they stay legible at lower contrast.
- Images of text — same thresholds. Text baked into an image (a banner, a button graphic, a quote card) is held to exactly the same 4.5:1 / 3:1 requirement as live text.
The three exceptions
Three narrow categories of text carry no contrast requirement at all. Treat them as genuine exceptions, not loopholes — most text on a page is content the user must read, and none of these apply to it.
- Incidental & disabled. Text in an inactive (disabled) UI component, pure decoration, text not visible to anyone, or text that is part of a picture with other significant visual content.
- Logotypes. Text that is part of a logo or brand name is exempt — a stylized wordmark does not have to meet the ratio.
- Not a general escape hatch. Body copy, headings, links, form labels, and error messages are never covered by these exceptions. If a user is meant to read it, it must pass.
For a stricter target, the Level AAA equivalent is 1.4.6 Contrast (Enhanced), which raises the bars to 7:1 and 4.5:1. Non-text elements like icons and input borders are handled separately by 1.4.11 Non-text Contrast.
Pass and fail examples
✓ Passes 1.4.3
- Black (#000) body text on white — 21:1, far above 4.5:1.
- A #767676 gray on white — exactly 4.58:1, the lightest gray that still passes for normal text.
- A 24px heading in #949494 on white — 3.1:1, which passes the 3:1 large-text bar.
- White text over a photo with a dark semi-opaque scrim guaranteeing at least 4.5:1 everywhere.
- A disabled button label at low contrast — exempt as incidental.
✗ Fails 1.4.3
- Light gray (#aaa) body text on white — about 2.3:1, a very common failure.
- Placeholder text in a faint gray that users are expected to read.
- A 16px link in a brand color that measures 3.8:1 — fine for large text, but this is normal text.
- White text over a light or busy background image with no scrim, so the ratio drops below 4.5:1 in places.
- Bold 12px text at 3:1 — bold, but still “normal” size.
Code examples
Normal body text
The pale grays that look elegant in a mockup are usually the first thing to fail. Darken text until it reaches 4.5:1 against its actual background.
/* ✗ Fails: light gray on white is about 2.3:1 */
.body-text {
color: #aaaaaa;
background: #ffffff;
}
/* ✓ Passes: #767676 on white is 4.58:1 (normal text) */
.body-text {
color: #767676;
background: #ffffff;
}
/* ✓ Even safer: near-black on white is 21:1 */
.body-text {
color: #1a1a1a;
background: #ffffff;
}Large text can use the 3:1 bar
Only text at 24px regular or 18.66px bold qualifies. A color that fails for body copy can pass for a large heading.
/* ✓ Large heading: #949494 on white is 3.1:1 — passes 3:1 */
.hero-heading {
font-size: 24px; /* ≈ 18pt regular = large text */
font-weight: 400;
color: #949494;
background: #ffffff;
}
/* ✗ Same color on 16px body text — 3.1:1 fails 4.5:1 */
.caption {
font-size: 16px;
color: #949494; /* needs to be at least #767676 */
background: #ffffff;
}Text over a background image
A photo's brightness varies pixel to pixel, so a fixed text color can pass in one spot and fail in another. Add a scrim so the ratio holds everywhere.
<!-- ✗ White text straight over a photo: ratio varies, often fails -->
<section class="hero" style="background-image: url(beach.jpg)">
<h2 style="color:#fff">Summer sale</h2>
</section>
<!-- ✓ Dark scrim guarantees ≥ 4.5:1 across the whole image -->
<section class="hero">
<div class="scrim"><h2>Summer sale</h2></div>
</section>
<style>
.hero { background-image: url(beach.jpg); background-size: cover; }
.hero .scrim {
background: rgba(0, 0, 0, 0.55); /* darkens the photo behind text */
color: #ffffff; /* now comfortably above 4.5:1 */
padding: 2rem;
}
</style>Interactive Demo
Choose a text and background color below. The checker computes the real WCAG contrast ratio from each color's relative luminance, previews the result on live sample text, and tells you at a glance whether the pair passes AA (normal 4.5:1, large 3:1) and AAA (7:1). Toggle large-scale text to see the threshold change.
Live contrast checker
Pick a text and background color to compute the WCAG contrast ratio and see whether it passes 1.4.3 (AA) and 1.4.6 (AAA).
Quick presets
Live preview
Normal text — 4.5:1 required for AA, 7:1 for AAA.
Common failures
- Light gray body text on white (#999 or lighter) — the most frequent single contrast failure on the web.
- Low-contrast placeholder text used as if it were a label; it is real text and must meet 4.5:1.
- Brand-colored links and buttons whose color was chosen for looks, then never measured against their background.
- White or light text over photographs or gradients with no scrim, so the ratio fails wherever the background is bright.
- Assuming bold text always gets the 3:1 bar — bold only lowers the size threshold to 14pt, not the requirement.
- Hover, focus, visited, and active states that drop below 4.5:1 even though the default state passes.
- Light-on-light or dark-on-dark 'subtle' secondary text, timestamps, and helper copy.
- Semi-transparent text (reduced opacity) that blends toward the background and quietly fails the ratio.
- Passing on a calibrated designer monitor while failing on typical phone and budget screens.
How to test for 1.4.3
- 1
Run an automated scan first
axe DevTools, WAVE, and Lighthouse all measure text contrast automatically and catch the clear failures. Treat this as the floor — automation can miss text over images and states it cannot trigger.
- 2
Sample real colors with an eyedropper
Use browser DevTools (the color swatch in the Styles panel shows a live contrast ratio) or a tool like the WebAIM Contrast Checker or Colour Contrast Analyser. Read the computed foreground and background, not the values you think you set.
- 3
Classify each text as normal or large
Confirm which threshold applies: 24px regular or 18.66px bold qualifies for 3:1, everything else needs 4.5:1. Don't assume a bold or big-looking label clears the large-text bar without checking the actual size.
- 4
Check every interactive state
Test default, hover, focus, active, visited, and disabled separately. A link that passes at rest can fail on hover. (Disabled controls are exempt, but verify they are genuinely disabled.)
- 5
Test text over images and gradients
Sample the ratio at the lightest and darkest points behind the text. If any character falls below the threshold, add a scrim, solid plate, or text shadow until the whole run passes.
- 6
Verify in real conditions
Check the page on an ordinary phone in daylight and on a cheap monitor, not just a calibrated studio display. If it is readable there, it is readable everywhere.
For a structured audit, work through the full WCAG 2.2 checklist.
Related Success Criteria
Color is not used as the only visual means of conveying information.
Audio that plays automatically can be paused, stopped, or controlled.
Text can be resized up to 200% without loss of content or functionality.
Text is used instead of images of text, except for customizable or essential images.
Text has a contrast ratio of at least 7:1 (4.5:1 for large text).
Frequently asked questions
What does WCAG 1.4.3 Contrast (Minimum) require?
It requires that the visual presentation of text and images of text has a contrast ratio of at least 4.5:1 against its background. There are three exceptions. Large-scale text — at least 18pt (roughly 24px) for regular weight, or 14pt (about 18.66px) for bold — needs only a 3:1 ratio. Incidental text that is inactive or disabled, pure decoration, not visible to anyone, or part of a picture that contains other significant visual content has no contrast requirement. And text that is part of a logotype or brand name has no minimum contrast requirement. It is a Level AA success criterion.
How is the contrast ratio actually calculated?
The ratio is computed from the relative luminance of the two colors, not their hue. Each color's red, green, and blue channels are linearized (a gamma correction) and combined with the weights 0.2126 for red, 0.7152 for green, and 0.0722 for blue to give a luminance between 0 and 1. The ratio is then (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 the darker. Values range from 1:1 (identical colors) to 21:1 (pure black on pure white). Because green is weighted most heavily, two colors can look different yet still fail — you have to measure, not eyeball.
What counts as 'large text' for the 3:1 exception?
Large-scale text is at least 18 point for regular weight, or at least 14 point when the text is bold. In CSS pixels that is roughly 24px regular and 18.66px bold, assuming the common 96 DPI mapping where 1pt ≈ 1.333px. Only text that meets this bar qualifies for the relaxed 3:1 minimum; everything smaller must reach 4.5:1. Note that bold lowers the size threshold but does not remove the requirement — bold 12px text is still 'normal' text for this criterion and needs 4.5:1.
Does 1.4.3 apply to placeholder text, disabled controls, and text over images?
Placeholder text is real, visible text that users read, so it must meet 4.5:1 (or 3:1 if large) — low-contrast placeholders are one of the most common failures. Disabled controls are explicitly exempt as 'incidental' text, so a grayed-out button label has no contrast requirement, though good design still keeps it legible. Text placed over a photograph or gradient must meet the ratio against the actual pixels behind each character; because a background image varies, you typically add a solid or semi-opaque scrim, a text shadow, or a solid plate behind the text to guarantee the ratio everywhere.
How is 1.4.3 different from 1.4.6 Contrast (Enhanced) and 1.4.11 Non-text Contrast?
1.4.3 is the Level AA baseline for text: 4.5:1 normal, 3:1 large. 1.4.6 Contrast (Enhanced) is the stricter Level AAA version of the same idea, raising the bars to 7:1 normal and 4.5:1 large. 1.4.11 Non-text Contrast (AA) is a separate criterion that covers user-interface components and meaningful graphics — icons, input borders, focus indicators, chart segments — at a 3:1 minimum; it does not cover text. Meeting 1.4.6 automatically satisfies 1.4.3, but 1.4.11 must be checked independently.
Do logos and decorative text need to pass 1.4.3?
No. Text that is part of a logo or brand name has no minimum contrast requirement under 1.4.3, so a stylized wordmark is exempt. Purely decorative text — text that conveys no information and could be removed with no loss of meaning — is also exempt, as is text that is not visible to anyone or is incidental within a larger image. These exceptions are narrow, though: body copy, headings, labels, links, and any text the user is expected to read all fall squarely within the requirement.