WCAG 1.4.3: Kontrast (Minimum)

WCAG 1.4.3 verlangt, dass Text und Bilder von Text ein Kontrastverhältnis von mindestens 4,5:1 zu ihrem Hintergrund aufweisen (3:1 für großen Text), um sicherzustellen, dass Nutzer mit Sehschwäche oder Farbsehschwächen Inhalte ohne unterstützende Technologien lesen können.

Was diese Regel bedeutet

WCAG 1.4.3 — Kontrast (Minimum) ist ein Erfolgskriterium der Stufe AA unter Richtlinie 1.4 (Unterscheidbar) der Web Content Accessibility Guidelines 2.2. Es verlangt, dass die visuelle Darstellung von Text und Textbildern ein ausreichendes Leuchtdichte-Kontrastverhältnis zu ihrem Hintergrund einhält, sodass Menschen mit moderat eingeschränktem Sehvermögen den Inhalt lesen können, ohne auf kontrastverstärkende Hilfstechnologien angewiesen zu sein.

Die erforderlichen Kontrastverhältnisse sind wie folgt. Normaler Text — jeder Text, der kleiner ist als 18 Punkt (ungefähr 24 CSS-Pixel) oder 14 Punkt fett (ungefähr 18,67 CSS-Pixel) — muss ein Kontrastverhältnis von mindestens 4,5:1 erreichen. Großer Text, definiert als Text mit mindestens 18 Punkt in normaler Stärke oder 14 Punkt in Fettschrift, erfordert ein minimales Kontrastverhältnis von 3:1. Die gleichen Schwellenwerte gelten für Textbilder: raster- oder vektorbasierte Bilder, die lesbare Zeichen darstellen, müssen diese Verhältnisse ebenfalls in Bezug auf jede angrenzende Hintergrundfarbe einhalten.

Das Kontrastverhältnis wird mit der in der WCAG-Spezifikation definierten Formel für relative Leuchtdichte berechnet. Die relative Leuchtdichte (L) wird aus sRGB-Farbwerten nach der Gammakorrektur berechnet, und das Verhältnis wird als (L1 + 0,05) / (L2 + 0,05) ausgedrückt, wobei L1 der hellere der beiden Leuchtdichtewerte und L2 der dunklere ist. Ein Verhältnis von 1:1 bedeutet überhaupt keinen Kontrast (identische Farben), während 21:1 das Maximum ist, das nur durch reines Schwarz auf reinem Weiß erreicht wird.

Das Kriterium umfasst allen vom Browser gerenderten Vordergrundtext, einschließlich Text in Schaltflächen, Links, Beschriftungen, Formularfeldern, Tabellenzellen, Tooltips, Platzhaltertext in Eingabefeldern sowie Text, der über Bildern oder Verläufen liegt. Es umfasst auch SVG-Textelemente und Text, der über CSS-generierte Inhalte (::before- und ::after-Pseudoelemente) gerendert wird.

WCAG 1.4.3 definiert mehrere offizielle Ausnahmen, die ausdrücklich von der Anforderung ausgenommen sind:

Inzidenter Text: Text oder Textbilder, die rein dekorativ sind, nicht sichtbar sind oder Teil einer inaktiven (deaktivierten) Benutzeroberflächenkomponente sind, sind ausgenommen. Beispielsweise muss die abgeblendete Beschriftung eines deaktivierten Formularfelds das Verhältnis nicht einhalten.
Logotypen: Text, der Teil eines Logos oder Markennamens ist, unterliegt keiner Mindestkontrastanforderung, da die Markenidentität häufig von bestimmten Farbentscheidungen abhängt und von den Nutzern erwartet wird, dass sie Logos visuell erkennen.
Großer Text: Wie oben erwähnt, hat großer Text ein reduziertes Verhältnis von 3:1 statt 4,5:1, in Anerkennung der Tatsache, dass größere Buchstabenformen bei geringerem Kontrast leichter zu erkennen sind.

Ein Bestehen liegt vor, wenn das berechnete Kontrastverhältnis für jedes sichtbare, nicht ausgenommene Textelement den jeweils geltenden Schwellenwert erreicht oder übersteigt. Ein Nichtbestehen liegt vor, wenn irgendein sichtbarer, nicht ausgenommener Text oder Textbild unter den Schwellenwert fällt, selbst wenn es nur ein Bruchteil eines Verhältniswerts ist.

Warum es wichtig ist

Schätzungsweise 2,2 Milliarden Menschen weltweit leben laut der Weltgesundheitsorganisation mit einer Form von Sehbeeinträchtigung. Ein bedeutender Teil dieser Personen — darunter Menschen mit Sehbehinderungen wie Katarakt, Glaukom, Makuladegeneration und diabetischer Retinopathie — kann Text auf dem Bildschirm lesen, wenn der Kontrast ausreichend ist, hat aber Schwierigkeiten oder scheitert vollständig, wenn der Kontrast schlecht ist. Kontrast (Minimum) adressiert die Bedürfnisse dieser Bevölkerungsgruppe direkt, indem es eine messbare, testbare Untergrenze festlegt, unterhalb derer Text unzugänglich wird.

Über diagnostizierte Sehbehinderungen hinaus erleben schätzungsweise 8% der Männer und 0,5% der Frauen nordeuropäischer Herkunft eine Form von Farbsehschwäche (Farbenblindheit). Obwohl Farbenblindheit sich von geringem Kontrast unterscheidet, verringern viele Formen der Farbenblindheit den wahrgenommenen Leuchtdichteunterschied zwischen bestimmten Farbtönen, was unzureichenden Kontrast noch problematischer macht. Eine rote Beschriftung auf einem grünen Hintergrund kann für jemanden mit Deuteranopie nahezu wie ein einheitliches Grau erscheinen, wodurch der Text unsichtbar wird, wenn der zugrunde liegende Leuchtdichtekontrast unzureichend ist.

Ältere Erwachsene sind überproportional betroffen. Das alternde Auge verliert Kontrastempfindlichkeit, und die Pupillengröße nimmt ab, wodurch weniger Licht auf die Netzhaut trifft. Eine Person in ihren Siebzigern kann einen deutlich höheren Leuchtdichtekontrast benötigen, um die gleiche Lesbarkeit zu erreichen wie eine Person in ihren Dreißigern, selbst ohne klinische Diagnose einer Sehbehinderung.

Betrachten Sie ein konkretes Szenario aus der realen Welt: Eine türkische E-Commerce-Website verwendet hellgrauen Text (#999999) auf weißem Hintergrund (#FFFFFF) für Produktbeschreibungen und Preisinformationen — ein gängiger Designtrend, der wegen seiner minimalistischen Ästhetik bevorzugt wird. Das Kontrastverhältnis dieser Kombination beträgt ungefähr 2,85:1 und liegt damit deutlich unter dem Schwellenwert von 4,5:1. Ein Nutzer mit beginnender Makuladegeneration ist möglicherweise überhaupt nicht in der Lage, den Preis eines Produkts zu lesen, und ist gezwungen, den Kauf abzubrechen. Dies schließt nicht nur einen Nutzer von einer grundlegenden kommerziellen Transaktion aus, sondern stellt auch einen direkten Einnahmeverlust für den Händler und ein rechtliches Risiko in Rechtsordnungen dar, die Barrierefreiheitskonformität vorschreiben.

Aus Nutzbarkeits- und SEO-Perspektive profitieren alle Nutzer von kontrastreichem Text in herausfordernden Umgebungen: grelles Sonnenlicht auf einem mobilen Bildschirm, minderwertige Display-Panels oder einfach ein Nutzer, der seinen Monitor nicht kalibriert hat. Barrierefreie Farbwahl reduziert die Augenbelastung für sehende Nutzer bei längeren Lesephasen, und Verbesserungen der Lesbarkeit korrelieren mit niedrigeren Absprungraten und längerer Verweildauer — Signale, die Suchmaschinen als Qualitätsindikatoren verwenden.

Wie man testet

Automatischer Scan mit axe DevTools: Installieren Sie die Browsererweiterung axe DevTools (verfügbar für Chrome, Firefox und Edge). Navigieren Sie zur zu testenden Seite, öffnen Sie das Erweiterungs-Panel und führen Sie eine Analyse der gesamten Seite durch. Filtern Sie im Ergebnis-Panel nach den Regel-IDs color-contrast und color-contrast-enhanced. Für jeden Verstoß hebt das Tool das fehlerhafte Element hervor, meldet das tatsächliche Kontrastverhältnis (z. B. „2,85:1“), das erforderliche Verhältnis (z. B. „4,5:1“) sowie die berechneten Vorder- und Hintergrundfarben in Hex. Exportieren Sie die Ergebnisse als CSV oder JSON zur Nachverfolgung. Wiederholen Sie dies für alle Breakpoints, da responsive Layouts Schriftgrößen ändern (was die Schwelle für großen Text beeinflusst) oder Farbschemata austauschen können.
Lighthouse-Audit: Öffnen Sie die Chrome DevTools, navigieren Sie zum Lighthouse-Tab, wählen Sie „Accessibility“ und führen Sie das Audit aus. Lighthouse zeigt Kontrastverstöße im Abschnitt Accessibility mit Elementreferenzen an. Beachten Sie, dass Lighthouse in einigen Umgebungen eine ältere Version von axe-core verwendet; axe DevTools direkt kann mehr Probleme erkennen.
Manuelle Kontrastmessung: Verwenden Sie den integrierten Farbwähler der DevTools des Browsers oder ein spezielles Werkzeug wie den WebAIM Contrast Checker (webaim.org/resources/contrastchecker/) oder die Desktop-Anwendung TPGi Colour Contrast Analyser. Wählen Sie die Vorder- und Hintergrundfarben mit der Pipette aus und überprüfen Sie, ob das gemeldete Verhältnis den Schwellenwert erfüllt. Bei Text auf Verläufen oder Bildern sollten Sie mehrere Punkte über den Textbereich hinweg abtasten und die Messung mit dem geringsten Kontrast als maßgeblichen Wert verwenden.
Testen interaktiver Zustände: Lösen Sie :hover-, :focus-, :active- und :visited-Zustände bei Links und interaktiven Elementen manuell aus und messen Sie dann den Kontrast für jeden Zustand separat. Einige Designs verwenden Hover-Farben mit geringerem Kontrast, die unbeabsichtigt durchfallen. Verwenden Sie die DevTools-Funktion „Force element state“ des Browsers, um einen Zustand während der Messung beizubehalten.
Screenreader- und Tastaturprüfung (kontextuell): Obwohl Kontrast ein visuelles Kriterium ist und nicht direkt von Screenreadern erkannt wird, bestätigt das Testen mit NVDA + Firefox, VoiceOver + Safari oder JAWS + Chrome, dass Text im Accessibility-Tree vorhanden ist und nicht über CSS-Techniken (wie color: transparent) verborgen wird, die ihn visuell unzugänglich machen würden. Wenn ein Screenreader Text ankündigt, der auf dem Bildschirm unsichtbar erscheint, prüfen Sie, ob die visuelle Darstellung die Kontrastanforderungen für sehende Nutzer erfüllt.
Zoom und Schriftvergrößerung: Erhöhen Sie die Standardschriftgröße des Browsers (Einstellungen → Darstellung → Schriftgröße) und den Zoom auf 200%. Vergewissern Sie sich, dass Text, der bei diesen Größen von „normal“ zu „groß“ wechselt, weiterhin den entsprechenden Schwellenwert erfüllt. Eine Schrift, die bei Standardzoom 14px groß ist, kann bei 200% Zoom 28px groß werden, wodurch sich ändert, welcher Schwellenwert gilt.

Wie man es behebt

Fließtext mit unzureichendem Kontrast — Falsch

<!-- Light gray text on white background: contrast ratio ~2.85:1 -->
<style>
  p.description {
    color: #999999;
    background-color: #ffffff;
    font-size: 16px;
  }
</style>
<p class='description'>This product is handcrafted from premium materials.</p>

Fließtext mit unzureichendem Kontrast — Richtig

<!-- Darkened text color achieves 7:1 contrast ratio, exceeding 4.5:1 AA requirement -->
<style>
  p.description {
    color: #595959; /* contrast ratio 7.0:1 against #ffffff */
    background-color: #ffffff;
    font-size: 16px;
  }
</style>
<p class='description'>This product is handcrafted from premium materials.</p>

Call-to-Action-Schaltfläche mit geringem Kontrast — Falsch

<!-- White text on a light blue button: contrast ratio ~2.5:1 -->
<style>
  .btn-primary {
    background-color: #6eb5ff;
    color: #ffffff;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
  }
</style>
<button class='btn-primary'>Add to Cart</button>

Call-to-Action-Schaltfläche mit geringem Kontrast — Richtig

<!-- Darker blue background raises contrast to 4.56:1 against white text -->
<style>
  .btn-primary {
    background-color: #0057b8; /* contrast ratio 4.56:1 against #ffffff */
    color: #ffffff;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
  }
</style>
<button class='btn-primary'>Add to Cart</button>

Platzhaltertext in Formulareingaben — Falsch

<!-- Default browser placeholder is often ~#757575 or lighter; some resets make it worse -->
<style>
  input::placeholder {
    color: #bbbbbb; /* contrast ratio ~1.6:1 against white background */
  }
  input {
    background-color: #ffffff;
    font-size: 16px;
  }
</style>
<input type='email' placeholder='Enter your email address' />

Platzhaltertext in Formulareingaben — Richtig

<!-- #767676 achieves exactly 4.54:1 against white — the practical AA floor for normal text -->
<style>
  input::placeholder {
    color: #767676; /* contrast ratio 4.54:1 against #ffffff — passes AA */
  }
  input {
    background-color: #ffffff;
    font-size: 16px;
  }
</style>
<input type='email' placeholder='Enter your email address' />

Text auf einem Hintergrundbild oder Verlauf — Falsch

<!-- Dark text directly on a light-to-dark gradient: passes in some regions, fails in others -->
<style>
  .hero {
    background: linear-gradient(to right, #ffffff, #0057b8);
    padding: 40px;
  }
  .hero h1 {
    color: #333333;
    font-size: 32px;
  }
</style>
<section class='hero'>
  <h1>Welcome to Our Store</h1>
</section>

Text auf einem Hintergrundbild oder Verlauf — Richtig

<!-- A semi-transparent dark scrim behind the text ensures consistent contrast regardless of gradient -->
<style>
  .hero {
    background: linear-gradient(to right, #ffffff, #0057b8);
    padding: 40px;
    position: relative;
  }
  .hero-content {
    background-color: rgba(0, 0, 0, 0.65); /* dark scrim guarantees contrast */
    padding: 16px 24px;
    display: inline-block;
    border-radius: 4px;
  }
  .hero h1 {
    color: #ffffff; /* white on near-black scrim exceeds 4.5:1 */
    font-size: 32px;
    margin: 0;
  }
</style>
<section class='hero'>
  <div class='hero-content'>
    <h1>Welcome to Our Store</h1>
  </div>
</section>

Häufige Fehler

Annahme, dass eine Farbe auf Ihrem kalibrierten Monitor gut aussieht: High-End-Displays mit großem Farbraum und hoher Helligkeit können Kombinationen mit geringem Kontrast für Designer mit normalem Sehvermögen in einer kontrollierten Umgebung lesbar erscheinen lassen, während derselbe Text auf einem günstigen Laptop-Bildschirm oder unter fluoreszierender Bürobeleuchtung unleserlich ist. Überprüfen Sie immer mit einem Kontrastverhältnis-Tool, nicht nur mit visueller Einschätzung.
Vergessen, interaktive Zustände separat zu testen: Ein Link kann in seinem Standardzustand mit 4,5:1 bestehen, aber bei :hover auf 2,8:1 fallen, wenn die Farbe heller wird. Jeder interaktive Zustand muss den Schwellenwert unabhängig erfüllen.
Behandlung deaktivierter Formularfelder als generell ausgenommen: Die Ausnahme gilt nur für inaktive UI-Komponenten. Wenn ein Feld visuell als deaktiviert gestaltet ist, aber programmatisch weiterhin aktiviert ist (das disabled-Attribut fehlt), ist es nicht ausgenommen und muss die Kontrastanforderungen erfüllen.
Verwendung von Opazität zur Abdunkelung von Text, ohne die effektive Farbe zu berücksichtigen: Das Setzen von opacity: 0.5 auf dunklen Text mischt ihn effektiv mit dem Hintergrund und erzeugt eine hellere Mischfarbe. Das Kontrastverhältnis muss gegen die resultierende Mischfarbe berechnet werden, nicht gegen den ursprünglichen CSS-Wert. Beispielsweise wird #000000 mit 50% Opazität auf Weiß ungefähr als #808080 gerendert, was ein Kontrastverhältnis von etwa 3,9:1 hat — unterhalb des Schwellenwerts von 4,5:1 für normalen Text.
Übersehen von Text innerhalb von SVG-Elementen: SVG-<text>-Elemente, die mit fill statt mit CSS-color gestylt sind, unterliegen weiterhin 1.4.3. Automatisierte Werkzeuge können diese je nach Einbettungsart (inline vs. <img> vs. <object>) übersehen. Inline-SVG ist der am zuverlässigsten testbare Ansatz.
Falsche Einstufung der Textgröße für die Ausnahme großen Textes: Die Schwellenwerte 18pt / 14pt fett beziehen sich auf die gerenderte Größe im Browser des Nutzers, nicht auf den CSS-Pixelwert im Quellcode. CSS font-size: 24px entspricht genau 18pt (da 1pt = 1,333px), aber wenn der Nutzer eine größere Standardschriftgröße eingestellt hat, kann ein 16px-Element größer als 18pt gerendert werden. Testen Sie bei Standardschriftgrößen des Browsers und prüfen Sie Ihre Größenberechnungen sorgfältig.
Sich ausschließlich auf Farbe verlassen, um verlinkten Text vom Fließtext zu unterscheiden: Wenn ein Link ohne Unterstreichung gestaltet ist und nur Farbe verwendet, um ihn vom umgebenden Text zu unterscheiden, muss die Linkfarbe ein Verhältnis von 3:1 gegenüber der Fließtextfarbe erreichen, zusätzlich zu 4,5:1 gegenüber dem Seitenhintergrund. Viele Designs verfehlen eine oder beide dieser Anforderungen. Das Hinzufügen von Unterstreichungen (oder einem anderen visuellen Indikator, der nicht auf Farbe basiert) ist der sicherere Ansatz.
Ignorieren von Text in Widgets und Chat-Plugins von Drittanbietern: Eingebettete Widgets — Live-Chat-Fenster, Cookie-Hinweis-Banner, Bewertungs-Karussells, Social-Media-Feeds — sind Teil der Seite und fallen in den Geltungsbereich der WCAG-1.4.3-Konformität. Text mit geringem Kontrast in einem Drittanbieter-Widget ist ein Fehler, selbst wenn Ihr eigener Code vollständig konform ist.
Kein erneutes Testen nach Aktivierung des Dunkelmodus oder eines Hochkontrastmodus: Ein Farbschema, das im hellen Modus besteht, kann im dunklen Modus durchfallen, wenn CSS-Custom-Properties nicht sorgfältig verwaltet werden. Ebenso überschreibt der Windows-Hochkontrastmodus viele CSS-Farbangaben; vergewissern Sie sich, dass Text lesbar bleibt und dass keine benutzerdefinierten CSS-Regeln in erzwungenen Farbumgebungen versehentlich wieder Kombinationen mit geringem Kontrast einführen.
Verwendung von CSS background-clip: text oder Verlaufstext-Techniken ohne Fallback: Mit -webkit-background-clip: text; color: transparent erstellter verlaufsgefüllter Text stellt eine komplexe Kontrastherausforderung dar, da die Textfarbe über das Glyphe hinweg variiert. Automatisierte Werkzeuge können dies in der Regel nicht auflösen, und die tatsächliche Leuchtdichte jedes Teils der Buchstabenform muss manuell gegen den Seitenhintergrund überprüft werden.

Bezug zu den Barrierefreiheitsvorschriften der Türkei

Die türkische Präsidialverfügung Nr. 2025/10, veröffentlicht im Amtsblatt (Resmî Gazete) Nr. 32933 am 21. Juni 2025, etabliert einen verbindlichen nationalen Rahmen für digitale Barrierefreiheit. Die Verfügung schreibt die Konformität mit international anerkannten Web-Barrierefreiheitsstandards vor — was die türkischen regulatorischen Anforderungen faktisch an WCAG 2.2 angleicht — und führt das Erişilebilirlik Logosu (Barrierefreiheitslogo), herausgegeben vom Ministerium für Familie und Sozialdienste (Aile ve Sosyal Hizmetler Bakanlığı), als offizielles Zertifizierungszeichen für konforme digitale Produkte und Dienstleistungen ein.

WCAG 1.4.3 — Kontrast (Minimum) ist ein Erfolgskriterium der Stufe AA, und Konformität auf Stufe AA ist die Mindestvoraussetzung, um sich für das Barrierefreiheitslogo zu qualifizieren. Das bedeutet, dass jede Organisation, die das Logo anstrebt, sicherstellen muss, dass aller sichtbare, nicht ausgenommene Text und alle Textbilder auf ihren Websites und Anwendungen die Kontrastschwellen von 4,5:1 (normaler Text) und 3:1 (großer Text) erfüllen, wie sie in diesem Kriterium definiert sind. Die Nichterfüllung von 1.4.3 ist einer der am häufigsten erkannten automatisierten Verstöße und wäre ein direktes Hindernis für die Zertifizierung.

Die Verfügung gilt für eine breite Palette privater und öffentlicher Einrichtungen. Erfasste Einrichtungen umfassen öffentliche Institutionen und Behörden auf zentraler und lokaler Verwaltungsebene; Banken und Finanzinstitute, die von der Bankenaufsichts- und Regulierungsbehörde (BDDK) reguliert werden; Krankenhäuser und Gesundheitsdienstleister, sowohl öffentlich als auch privat; Telekommunikationsanbieter mit 200.000 oder mehr Abonnenten; E-Commerce-Plattformen, die bestimmte Umsatz- oder Transaktionsschwellen erreichen; Reisebüros; private Transportunternehmen; und Privatschulen und Bildungseinrichtungen, die vom Ministerium für Nationale Bildung (MEB) autorisiert sind.

Für diese Einrichtungen ist die Behebung von Kontrastverstößen nicht nur eine Best-Practice-Empfehlung — sie hat regulatorisches Gewicht. Nicht konforme Organisationen riskieren administrative Überprüfung und Reputationsschäden, während konforme Organisationen das Erişilebilirlik Logosu als Vertrauenssignal für die etwa 8,5 Millionen Menschen mit Behinderungen in der Türkei sowie für ältere Nutzer, mobile Nutzer und die Allgemeinheit nutzen können, die von gut lesbarem, kontrastreichem Design profitieren.

Organisationen, die in der Türkei tätig sind und noch kein WCAG-1.4.3-Audit durchgeführt haben, sollten die automatisierte Überprüfung aller öffentlich zugänglichen digitalen Kontaktpunkte — Web, Mobile Web und gegebenenfalls native Anwendungen — priorisieren, gefolgt von einer manuellen Überprüfung von Verlaufs-Hintergründen, Bildüberlagerungen und eingebetteten Komponenten von Drittanbietern. Die Einrichtung eines Design-Token-Systems mit vorab genehmigten, kontrastgeprüften Farbpaaren ist die skalierbarste langfristige Lösung, um sicherzustellen, dass neue UI-Komponenten standardmäßig barrierefreie Farbkombinationen erben und dass zukünftige Redesigns nicht versehentlich Kontrastfehler einführen.