1.4.3 Contrast (Minimum)

What does it mean?

Low contrast makes text hard to read, especially for people with low vision and on screens in sunlight. Normal text needs a contrast ratio of at least 4.5:1 against its background. Large text, meaning at least 24 px regular or about 18.7 px bold, needs at least 3:1. This includes text in images.

Exceptions are text on inactive controls, purely decorative text, text that is not visible to anyone, text that is part of a picture with other significant visual content, and logos or brand names. Placeholder text and text on images or gradients still count.

Who does it help?

• People with low vision
• Older people with reduced contrast sensitivity
• People with colour vision deficiency
• Everyone reading on a phone outdoors

Common failures

• Light grey body text on a white background
• Placeholder text used as the only label, in very light grey
• White text on a photo without an overlay
• Brand colours like light green buttons with white text

How we test it

• axe-core Automatic: axe-core finds typical violations. A violation is pre-filled as “fails”.

Test question: Text contrast at least 4.5:1 (large text 3:1). Check also text on images and hover/focus states.

A person decides every criterion. No criterion ever passes automatically.

How to fix it

p { color: #999999; background: #ffffff; }

p { color: #595959; background: #ffffff; }

#999999 on white has a contrast ratio of 2.85:1 and fails; #595959 on white reaches 7.00:1 and passes for any text size.

Practical tips

• Check every state: hover, focus, visited and disabled styles often break contrast.
• Use the free contrast checker on this site to test colour pairs before you use them.

Guides and patterns on this

• Contrast that everyone can readPale grey text may look refined, but many people struggle to read it, and on a phone in bright sunlight everybody does. Here are the ratios WCAG 2.2 sets and how to lock them into your design.
• EAA compliance check: how to get your website tested for accessibilityThe European Accessibility Act asks for accessible services, not for a particular test. This guide explains what each kind of check can tell you, how an audit works, what ours costs, and what you hold at the end.
• The EAA for small businesses: where the exemption endsMicroenterprises that provide services are exempt from the European Accessibility Act. The exemption is narrower than many think, and growing businesses can grow out of it.
• Cookie banners that lock no one outThe cookie banner is often the first thing visitors meet, and for some the last: if it cannot be used with a keyboard or screen reader, the site is closed to them. Here is how to get it right.

Official source

Understanding WCAG 2.2 at the W3C: 1.4.3 Contrast (Minimum)

Matching tool: Contrast checker