--- title: "Contrast (Minimum)" url: "https://barrierefreihochzwei.de/en/wcag/1-4-3-contrast-minimum" language: "en" description: "WCAG 1.4.3 requires a contrast ratio of 4.5:1 for text and 3:1 for large text. Learn the exceptions and how to check contrast the right way." published: "2025-01-01T08:00:00+01:00" updated: "2026-10-15T09:41:59+02:00" --- # Contrast (Minimum) When text and background get along. - **Erfolgskriterium:** 1.4.3 - **Prinzip:** Perceivable - **Konformitätsstufe:** Level AA - **Erklärung beim W3C:** [www.w3.org/WAI/WCAG22/Understanding/cont...](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) Success criterion 1.4.3 # 1.4.3 Contrast (Minimum) Level AAPerceivable When text and background get along. ## 1. What is the goal of this criterion? Imagine scrolling through a website and having to squint to make out grey text on a light grey background. Frustrating, right? For people with low vision, color vision deficiencies and many older people, weak contrast isn’t just annoying – it makes content unreadable. So the goal of Success Criterion 1.4.3 is clear: every piece of text on your website needs enough contrast with its background. The difference in lightness between text and background has to be large enough for as many people as possible to read the content without assistive tools. ## 2. What exactly does it require? The rules are mathematically precise but easy to apply in practice: **For normal text** (below 18 point, or below 14 point bold): the contrast ratio between text and background must be at least **4.5:1**. **For large text** (18 point or larger, or 14 point bold or larger – on the web roughly 24 px, or about 18.7 px bold): a contrast ratio of **3:1** is enough. This applies to all text and images of text that convey information – including placeholder text in form fields and text in states such as hover or focus. **Exceptions:** - Text in inactive controls (such as disabled buttons) - Purely decorative text with no informational value - Text that isn’t visible to anyone - Text that is part of a picture with significant other visual content (such as a sign in a photo) - Logos and brand names Important: the contrast values are hard thresholds – 4.49:1 does not pass; only 4.5:1 and above does. For controls and graphics, [Non-text Contrast](https://barrierefreihochzwei.de/en/wcag/1-4-11-non-text-contrast) also applies, and the stricter AAA level is [Contrast (Enhanced)](https://barrierefreihochzwei.de/en/wcag/1-4-6-contrast-enhanced). ## 3. Why does it matter for accessibility? Imagine having to fill in an important form while the text practically dissolves into the background. That’s the reality for many people – not just those with a diagnosed vision impairment. Sufficient contrast makes content accessible because it: - Enables people with low vision or color vision deficiencies to read - Helps older people, whose contrast sensitivity often declines with age - Benefits everyone in poor lighting – whether in a sunny café or with a dimmed screen - Reduces reading effort and improves legibility for all - Eases reading for people with cognitive disabilities And the best part: good contrast doesn’t just help people with disabilities – it makes content more comfortable to read for everyone. ## 4. How to meet the criterion The good news: contrast can be measured exactly – with the right tools and a bit of know-how, it’s no dark art. **Ground rules for better contrast:** - Use dark text on a light background or vice versa – mid grey on mid grey is a no-go - Avoid colored text on colored backgrounds, even if the colors look very different - Pay special attention to links, buttons, placeholder text and hint text - Don’t trust your eyes or your monitor – measure **Practical measuring tools:** - The free Colour Contrast Analyser (desktop app) with an eyedropper for quick checks - Online tools such as the WebAIM Contrast Checker - The developer tools in Chrome, Edge and Firefox show the contrast ratio directly - Design plugins such as Stark check contrast right in Figma and similar tools **Technical implementation:** - In CSS: define text and background colors as tested pairs in your design system - For images of text: ensure sufficient resolution and clear color separation - Also check variants such as dark mode, hover and focus states **Avoid common mistakes:** - Never define only the foreground or only the background color – otherwise user settings can produce unreadable combinations - Text on background images needs a darkening overlay or a background color as a fallback - Transparency and gradients make measuring harder – check the least favorable spot ## 5. Why this criterion matters for businesses Good contrast isn’t a design restriction – it’s a mark of quality that directly affects your business. **1. Reach a wider audience** According to the WHO, around 1.3 billion people worldwide live with a significant disability, plus people with color vision deficiencies and age-related vision loss. Good contrast lets you reach them instead of losing them to competitors. **2. Avoid the most common error** The annual WebAIM Million analysis of the most visited home pages has shown for years that low text contrast is the most common automatically detectable accessibility error. Getting this right sets you apart – and contrast errors are comparatively easy to find and fix. **3. Protect your conversions** When users can’t read your buttons, prices or form hints, they’re more likely to give up. Legible text is the foundation for people understanding what you offer. **Last but not least: legal requirements.** The European Accessibility Act (Directive (EU) 2019/882) has applied since 28 June 2025 to many consumer products and services, such as online shops and banking services; in Germany it is implemented by the Barrierefreiheitsstärkungsgesetz (BFSG). The technical benchmark is the harmonised standard EN 301 549, which references WCAG 2.1 Level AA for web content – and 1.4.3 is part of that. Public sector bodies are covered by the Web Accessibility Directive (EU) 2016/2102. This section is general information, not legal advice. ## 6. The success criterion in the W3C’s words > **Success Criterion 1.4.3 Contrast (Minimum) (Level AA)** > > 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. In short: text and images of text need a contrast ratio of at least 4.5:1, large text at least 3:1 – inactive, decorative, invisible and incidental text as well as logos are exempt. **Official explanation from the W3C** The W3C explains every success criterion in depth – with intent, examples and techniques. [Understanding 1.4.3](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) ## More criteria from “Perceivable” [ 1.1.1 Level A ### Non-text Content When images need words. ](https://barrierefreihochzwei.de/en/wcag/1-1-1-non-text-content) [ 1.2.1 Level A ### Audio-only and Video-only (Prerecorded) When podcasts and silent videos need a second form. ](https://barrierefreihochzwei.de/en/wcag/1-2-1-audio-only-and-video-only-prerecorded) [ 1.2.2 Level A ### Captions (Prerecorded) When videos need to make sense without sound. ](https://barrierefreihochzwei.de/en/wcag/1-2-2-captions-prerecorded)