Generator für barrierefreie Farbpaletten

Was ist ein barrierefreier Farbpaletten-Generator?

Ein barrierefreier Farbpaletten-Generator ist ein Werkzeug, das Ihnen hilft, einen Satz von Farben für eine Website, App oder ein Druckdesign zusammenzustellen, bei dem jedes Farbpaar, das zusammen angezeigt werden soll (Text auf Hintergrund, Schaltfläche auf Leinwand, Etikett auf Feld), die WCAG-Kontrastanforderungen erfüllt. Der Sinn ist, Kombinationen mit geringem Kontrast bereits zur Designzeit statt zur Audit-Zeit zu erkennen. Sie fügen Farben zu einer Palette hinzu, das Werkzeug berechnet das Kontrastverhältnis zwischen jedem Paar und kennzeichnet jedes Paar mit AAA bestanden, AA bestanden oder Fehler. Sie iterieren, bis jedes Paar, das Sie tatsächlich verwenden möchten, besteht.

Das Kontrastverhältnis ist eine Zahl zwischen 1:1 (identische Farben, unsichtbar) und 21:1 (Schwarz auf Weiß). WCAG 2.2 Erfolgskriterium 1.4.3 erfordert 4,5:1 für Körpertext in Standardgröße (Stufe AA), 3:1 für großen Text (24px+ regulär oder 18,66px+ fett) und 4,5:1 für grafische Elemente und UI-Steuerelemente (SC 1.4.11). WCAG AAA erhöht Körpertext auf 7:1 und großen Text auf 4,5:1. Die meisten öffentlich zugänglichen Websites müssen mindestens AA gemäß ADA, EAA, AODA und ähnlichen Gesetzen erfüllen; Regierungswebsites in vielen Rechtsräumen müssen AAA erfüllen.

Dieses Werkzeug läuft in Ihrem Browser. Sie wählen Farben mit dem Farbwähler, das Werkzeug berechnet die relative Helligkeit und Kontrastverhältnisse mit der von WCAG spezifizierten Formel, und ein Raster zeigt den Status jedes Paares. Sie können die endgültige Palette als CSS-benutzerdefinierte Eigenschaften (var(--brand-primary)), HEX-Liste, Tailwind-Konfigurationsschnipsel oder JSON für Design-Tokens exportieren. Nichts wird hochgeladen; die gesamte Palette bleibt auf Ihrem Gerät.

Was im Werkzeug enthalten ist

Oben im Werkzeug befindet sich ein Farbwähler plus eine Schaltfläche zum Hinzufügen zur Palette. Wählen Sie eine Farbe, benennen Sie sie (Markenprimär, Oberfläche, Körpertext usw.) und fügen Sie hinzu. Die Palette wächst als Musterliste auf der linken Seite. Sie können jedes Muster bearbeiten, entfernen oder ziehen, um neu anzuordnen. Vordefinierte barrierefreie Paletten stehen als Ausgangspunkte zur Verfügung (Hochkontrastpaare, im IBM Carbon-Stil entworfene Paletten, Material Design 3 tonale Paletten); wählen Sie eine und passen Sie sie dann an.

Das Kontrastraster nimmt jedes Paar von Mustern und zeigt das Kontrastverhältnis plus ein Pass/Fail-Abzeichen für jede WCAG-Stufe: AA-normal (4,5:1), AA-large (3:1), AAA-normal (7:1), AAA-large (4,5:1). Ein als 4,7:1 angezeigtes Paar besteht AA-normal, scheitert aber AAA-normal; ein als 2,1:1 angezeigtes Paar scheitert an allem. Bewegen Sie den Mauszeiger über eine Zelle, um das Paar als tatsächlichen Text anzuzeigen. Sortieren Sie das Raster nach Verhältnis, um die schlechtesten Paare zuerst zu erkennen.

Das Export-Panel formatiert die Palette so, wie es Ihre Toolchain erwartet: CSS-benutzerdefinierte Eigenschaften für modernes CSS, Sass-Variablen für ältere Pipelines, Tailwind-Themen-Konfiguration für Tailwind CSS, JSON-Design-Tokens (Style Dictionary, W3C Design Tokens Community Group-Spezifikation) für plattformübergreifende Design-Systeme oder einfach eine HEX-Liste zum Einfügen in Figma. Namenskonventionen werden beibehalten; Sie können direkt in Ihre Codebasis kopieren und einfügen.

Geschichte und Hintergrund

Die CIE-Kolorimetrie etabliert wissenschaftliche Farbe (1931)

Die Internationale Beleuchtungskommission (CIE) veröffentlichte 1931 den CIE 1931-Farbraum, die erste formale mathematische Beschreibung, wie Menschen Farbe aus elektromagnetischen Spektren wahrnehmen. Jedes moderne Farbsystem (RGB, HSL, OKLCH, Lab, XYZ) baut entweder direkt oder durch abgeleitete Transformationen auf CIE 1931 auf. Die relative Helligkeitsformel, die WCAG zur Berechnung des Kontrasts verwendet, ist eine CIE-abgeleitete Berechnung: sie gewichtet rote, grüne und blaue Kanäle nach der Stärke, mit der das menschliche Auge auf jeden reagiert (Grün am meisten, Blau am wenigsten).

WCAG 1.0 führt Kontrastrichtlinien ein (1999)

Die Web Content Accessibility Guidelines 1.0 (W3C, Mai 1999) führten Kontrast als formales Barrierefreiheitskriterium ein (Prüfpunkt 2.2: stellen Sie sicher, dass Vordergrund- und Hintergrundfarbkombinationen ausreichenden Kontrast bieten). Die erste Version war qualitativ; der Schwellenwert war vage. WCAG 2.0 (Dezember 2008) war die erste, die numerische Kontrastverhältnisse mit der WCAG-relativen Helligkeitsformel spezifizierte. Die Schwellenwerte 4,5:1 und 7:1 in 2.0 wurden durch 2.1 (2018) und 2.2 (2023) unverändert beibehalten, weil sie Lesbarkeit über die meisten Behinderungen (Sehbehinderung, altersbedingten Verlust der Kontrastempfindlichkeit, Farbenblindheit) mit praktischen Designeinschränkungen ausbalancieren.

Farbkodierte Designsysteme reifen heran (ab 2014)

Googles Material Design (2014), IBMs Carbon Design System (2015) und der breitere Aufstieg von Design-Tokens (Salesforce 2014, Atlassian 2016) rückten alle barrierefreie Farbe als systemweite Anliegen in den Vordergrund. Material Design 3 (2021) führte tonale Paletten ein (eine 13-stufige Helligkeitsrampe pro Farbton), die explizit so entworfen sind, dass jeder Ton 600+ auf der Helligkeitsskala den 4,5:1-Kontrast auf Weiß besteht. Dieser Wandel machte standardmäßig barrierefreie Paletten zur Standardpraxis in modernen Designsystemen und ersetzte den älteren brand-first-accessibility-second-Ansatz.

APCA als genauere Alternative vorgeschlagen (ab 2019)

Der Accessible Perceptual Contrast Algorithm (APCA) wurde von Andrew Somers ab 2019 als perzeptuell genauerer Ersatz für die WCAG-Kontrastformel vorgeschlagen. WCAG-Kontrast überbewertet die Lesbarkeit heller Farben und unterbewertet dunklen Text auf dunklen Hintergründen; APCA korrigiert dies. Es wird erwartet, dass WCAG 3.0 (der Entwurfsnachfolger von 2.x, der seit vielen Jahren in Entwicklung ist) APCA oder einen ähnlichen verbesserten Algorithmus übernimmt. Bis WCAG 3 veröffentlicht und gesetzlich übernommen wird, bleiben WCAG 2.x-Kontrastverhältnisse der gesetzliche und Industriestandard. Dieses Werkzeug verwendet die WCAG 2.x-Formel.

Design-Tokens werden zum plattformübergreifenden Standard (ab 2020)

Die W3C Design Tokens Community Group wurde 2020 gegründet, um Design-Tokens zu standardisieren (benannte Farb-, Abstands-, Typografiewerte, die über CSS, iOS, Android, Figma und andere Plattformen übersetzt werden). Werkzeuge wie Style Dictionary, Tokens Studio und die aufkommende W3C-Spezifikation verlassen sich alle auf maschinenlesbare Token-Formate. Barrierefreie Farbpaletten werden zunehmend als Design-Tokens ausgeliefert, sodass dieselbe geprüfte Palette überall verwendet wird, was den Fehlermodus eliminiert, bei dem die Website den Kontrast besteht, die mobile App aber nicht.

OKLCH und perzeptuell einheitliche Farbräume (ab 2020)

CSS Color Module Level 4 (Candidate Recommendation 2024) fügte OKLCH, OKLab, Lab, LCH und andere perzeptuell einheitliche Farbräume zu nativem CSS hinzu. OKLCH (eingeführt von Bjorn Ottosson im Jahr 2020) ist besonders nützlich zum Erzeugen barrierefreier Paletten, weil gleiche Helligkeitsschritte dem Auge gleich erscheinen, anders als bei HSL, wo Helligkeitsschritte ungleichmäßige visuelle Sprünge erzeugen. Moderne Palettengeneratoren (Leonardo von Adobe, Polychrom, dieses Werkzeug, wenn auf OKLCH-Eingabemodus eingestellt) nutzen diese Räume, um visuell konsistentere Paletten zu erzeugen, die Kontrastziele auf dem gleichen Helligkeitsniveau erreichen.

Praktische Arbeitsabläufe

Eine neue Markenpalette entwerfen

Beginnen Sie mit der Markenfarbe, die Sie behalten müssen (die Logofarbe, die vom Marketing-Team gesegnete Primärfarbe). Fügen Sie sie der Palette hinzu, dann bauen Sie Tints (hellere Versionen) und Shades (dunklere Versionen) zusammen mit Neutralen (Weiß, Oberfläche, Oberflächenvariante, Text) auf. Überprüfen Sie jedes Text-auf-Hintergrund-Paar gegen AA-normal. Wenn Ihre primäre Markenfarbe auf Weiß scheitert, haben Sie zwei Optionen: verwenden Sie sie nur für große Elemente (Logos, dekorative Akzente) und paaren Sie den Körpertext mit einer dunkleren Variante, oder kompromittieren Sie die Markenfarbe leicht. Dieses Werkzeug bringt diese Entscheidungen zur Designzeit zur Oberfläche.

Audit der Farbentscheidungen einer bestehenden Website

Ziehen Sie die Farbwerte aus Ihren bestehenden Design-Tokens (CSS-benutzerdefinierte Eigenschaften, Tailwind-Konfiguration, Sass-Variablen), geben Sie sie in dieses Werkzeug ein und überprüfen Sie das Kontrastraster. Häufige Fehler: gedämpfter grauer Text auf Weiß (oft #999 oder #aaa, was 2,8:1 oder 2,5:1 ergibt), Markenfarbe-Schaltflächen mit weißem Text, bei denen die Schaltfläche mittelhell ist, Linkfarben auf belebten Hintergründen. Dokumentieren Sie die Fehler mit ihren Verhältnissen und welches WCAG-Kriterium sie verletzen; diese Dokumentation ist der Beginn eines Abhilfeplans.

Akzentfarben für Diagramme und Datenvisualisierung wählen

Für Datenvisualisierung benötigen Sie Akzentfarben, die den Kontrast gegen den Diagrammhintergrund bestehen und die auch für Benutzer mit Farbsehmangel voneinander unterscheidbar sind. Paaren Sie dieses Werkzeug mit ColorBrewer (Cynthia Brewer, Penn State, 2002), das Paletten veröffentlicht, die unter Farbenblindheitssimulationen unterscheidbar bleiben. Lassen Sie Kandidatenpaletten durch beide Werkzeuge laufen: Kontrast gegen Hintergrund (dieses Werkzeug), Unterscheidbarkeit zwischen Palettenfarben (ColorBrewer oder Viz Palette).

Dark-Mode-Ergänzungen zu einer hellen Palette erstellen

Dark Mode ist nicht einfach umgekehrter Light Mode; die Kontrastanforderungen gelten weiterhin, aber das Auge nimmt hellen Text auf dunkel anders wahr als dunklen Text auf hell (die APCA-Debatte handelt größtenteils davon). Bauen Sie die dunkle Palette als parallele Menge benannter Tokens (surface-dark, text-dark, accent-dark) und überprüfen Sie jedes Dark-Mode-Paar gegen AA. Häufige Dark-Mode-Fehler: reines Weiß (#fff) auf reinem Schwarz (#000) verursacht Halation (Lichtbluten), daher verwenden Designer oft #e5e5e5 auf #121212; das besteht immer noch AA, ist aber angenehmer zu lesen.

Palettenvarianten für verschiedene Oberflächen generieren

Moderne UIs haben mehrere Oberflächenstufen (Hintergrund, Karte, Karte-erhöht, Modal, Popover). Jede Oberfläche sollte korrekt mit jeder oben verwendeten Text- und Akzentfarbe paaren. Fügen Sie jede Oberfläche als Palettenmuster hinzu und überprüfen Sie jede Textfarbe gegen jede Oberfläche. Das Kontrastraster zeigt schnell, ob Ihr Text-auf-Modal-Paar scheitert, wenn Text-auf-Karte besteht (das Modal hat normalerweise einen leicht anderen Hintergrundton, um Elevation anzuzeigen, was den Kontrast unter AA fallen lassen kann, ohne dass Sie es bemerken).

Compliance-Dokumentation für rechtliche oder Audit-Einreichung

Für ADA- oder EAA-Compliance-Dokumentation müssen Sie typischerweise zeigen, dass jede Farbkombination in Ihrem Designsystem die relevante WCAG-Stufe besteht. Exportieren Sie die Palette plus das Kontrastraster als Teil der Barrierefreiheitserklärung oder VPAT (Voluntary Product Accessibility Template) für Ihr Produkt. Das exportierte JSON ist strukturiert genug, um automatisierte Compliance-Berichte zu speisen; das visuelle Raster ist gut für menschliche Überprüfung.

Häufige Fallstricke

Markenfarbe als unantastbar behandeln

Das häufigste Muster: Marketing besteht auf der Unternehmensprimärfarbe, aber sie scheitert am AA-Kontrast auf Weiß. Optionen: verwenden Sie die Markenfarbe nur für große oder dekorative Elemente (besteht die nachsichtigere 3:1-Großtext-Schwelle), dunkeln Sie die Farbe für Textverwendung leicht ab (die meisten Marken haben Flexibilität für eine dunklere Variante), oder ändern Sie die Körpertextfarbe von Schwarz zu einem weniger harten dunklen Grau, sodass die Markenfarbe als Akzent gelesen wird. Werkzeuge wie Leonardo (von Adobe) generieren automatisch barrierefreie Varianten einer Markenfarbe; paaren Sie sie mit diesem Werkzeug zur Überprüfung.

Kontrast als einzige Barrierefreiheitsprüfung verwenden

Den Kontrast zu bestehen, garantiert keine Lesbarkeit. Ein Verhältnis 4,5:1 ist der Boden; einige Benutzer (Sehbehinderung, altersbedingter Verlust der Kontrastempfindlichkeit, Legasthenie) profitieren von höheren Verhältnissen. WCAG SC 1.4.6 (Verbesserter Kontrast, AAA) empfiehlt 7:1 für Körpertext genau weil 4,5:1 das Minimum ist, nicht das Ziel. Kombinieren Sie hohen Kontrast mit ausreichender Schriftgröße (16px+ für Körper), angemessener Zeilenhöhe (1,5x Schriftgröße) und Schriftauswahl, die Buchstabenformen bewahrt (vermeiden Sie ultradünne Gewichte für Körpertext).

Nicht-Text-Kontrast vergessen (SC 1.4.11)

WCAG 1.4.11 (in WCAG 2.1 hinzugefügt, 2018) erfordert 3:1-Kontrast für UI-Komponenten und grafische Elemente: Formularfeldränder, Schaltflächenkonturen, Symbole, Fokusindikatoren. Dies ist leicht zu übersehen, weil Designer denken, dass Kontrast nur für Text gilt. Ein sauberes Formular mit subtilen grauen Feldrändern auf Weiß kann 1.4.11 scheitern, auch wenn der gesamte Text 1.4.3 besteht. Auditieren Sie jedes visuelle Element, das Bedeutung oder Zustand vermittelt, nicht nur Text auf Hintergrund.

Großtext-Regeln missverstehen

Die Großtext-Schwelle von WCAG (3:1 statt 4,5:1) gilt für Text, der 18pt oder größer ist (etwa 24px) oder 14pt fett (etwa 18,66px fett). Alles Kleinere ist Normaltext und benötigt 4,5:1. Designer wenden manchmal die 3:1-Großtext-Regel auf alle Überschriftenebenen an, aber ein h5 bei 16px ist Normaltext nach WCAG-Definition. Überprüfen Sie die gerenderte Größe, nicht die Überschriftenebene. Der Fett-Modifikator ist wichtig: 18px fett besteht als Großtext; 18px regulär nicht.

Sich allein auf Farbe verlassen, um Informationen zu vermitteln

WCAG 1.4.1 (Verwendung der Farbe, Stufe A) ist getrennt vom Kontrast. Selbst mit perfekten Kontrastverhältnissen können Sie Farbe nicht als einzigen Statusindikator verwenden (Rot bedeutet ungültig, Grün bedeutet gültig, Blau bedeutet Link). Paaren Sie Farbe mit einem zweiten Hinweis: Symbol (Warndreieck für Fehler), Muster (Unterstreichung für Links) oder Textetikett (Erforderlich neben Pflichtfeldern). Farbenblinde Benutzer (etwa 8% der Männer, 0,5% der Frauen) und Benutzer auf monochromen Graustufenbildschirmen verlassen sich auf diese sekundären Hinweise.

Hover-, Focus- und Active-Zustände vergessen

Eine Schaltfläche besteht den Kontrast in ihrem Standardzustand, aber der :hover-Stil hellt sie unter die Schwelle auf; der :focus-Umriss ist ein subtiles Grau, das 3:1 gegen den Schaltflächenhintergrund scheitert; der :active-Zustand invertiert die Farben und die neue Kombination scheitert. Testen Sie jeden interaktiven Zustand in Ihrem Kontrastraster, nicht nur den Standard. Der Fokusindikator ist insbesondere kritisch (SC 2.4.7 Fokus sichtbar, AA): wenn der Fokus nicht deutlich sichtbar ist, verlieren Nur-Tastatur-Benutzer ihre Stelle auf der Seite.

Datenschutz und Datenverarbeitung

Die Farben, die Sie hinzufügen, die Palettennamen und die exportierten Tokens bleiben alle in Ihrem Browser. Die Kontrastberechnungen laufen in JavaScript auf Ihrer Maschine; nichts wird hochgeladen. Das ist für Farbpaletten weniger wichtig als für Dokumente, aber dennoch wichtig, wenn die Palette Teil eines unangekündigten Markenrefreshs oder eines vertraulichen Kundenprojekts ist: Sie wollen nicht, dass es vor dem Start an einen Drittanbieter-SaaS-Validator durchsickert.

Sobald die Seite geladen ist, funktioniert das Werkzeug offline. Sie können die Internetverbindung trennen, die Palette erstellen, Prüfungen ausführen und exportieren. Die exportierten Tokens werden direkt über den normalen Speichern-Dialog des Browsers heruntergeladen. Viele Cloud-Farbwerkzeuge (Coolors, Adobe Color, sogar einige Barrierefreiheitsprüfer) speichern Paletten serverseitig und können sie für Analyse oder Training verwenden; für vertrauliche Arbeit bevorzugen Sie clientseitige Werkzeuge.

Wann dieses Werkzeug nicht zu verwenden ist

Für vollständige Farbenblindheitssimulation (verwenden Sie ein dediziertes Werkzeug)

Kontrast ist nicht dasselbe wie Farbenblindheitskompatibilität. Eine Palette kann alle Kontrastprüfungen bestehen und einen farbenblinden Benutzer trotzdem verwirren (Rot und Grün bei derselben Helligkeit sehen für einen Deuteranopen identisch aus). Für Farbenblindheitssimulation verwenden Sie den Absolutool Farbenblindheits-Simulator oder Adobe Colors Barrierefreiheitsansicht, die beide die tatsächlichen Deuteranopie-, Protanopie- und Tritanopie-Farbtransformationen anwenden. Lassen Sie Kandidatenpaletten durch dieses Werkzeug und einen Simulator laufen.

Zum Erzeugen von Farbschemata von Grund auf (verwenden Sie Leonardo oder Coolors)

Dieses Werkzeug überprüft und auditiert Paletten; es erzeugt sie nicht aus einer einzelnen Saatfarbe. Für Palettenerzeugung von Grund auf (analoge, komplementäre, triadische, geteilt-komplementäre Schemata) verwenden Sie Adobe Color, Coolors oder Leonardo (das barrierefreie Varianten einer Markenfarbe erzeugt). Erzeugen Sie mit diesen Werkzeugen, dann validieren Sie mit diesem. Leonardo erzeugt insbesondere Farben, die auf bestimmte Kontrastverhältnisse abzielen, was das natürliche Eingabeformat für den Überprüfungsschritt dieses Werkzeugs ist.

Für APCA-basierten Kontrast (wenn WCAG 3 ausgeliefert wird)

Dieses Werkzeug verwendet die WCAG 2.x-Kontrastformel, die der aktuelle gesetzliche und Industriestandard ist. Wenn Sie speziell für APCA (der vorgeschlagene WCAG 3-Algorithmus) entwerfen müssen, verwenden Sie den APCA Contrast Calculator von Myndex Research. APCA produziert unterschiedliche (und wohl perzeptuell genauere) Bewertungen, insbesondere für dunklen-auf-dunklem und hellen-auf-hellem Text. Bis WCAG 3 ratifiziert und gesetzlich übernommen wird (wahrscheinlich noch mehrere Jahre), ist WCAG 2.x das, was Compliance-Auditoren prüfen werden.

Für vollständige WCAG-Audits (verwenden Sie ein umfassendes Werkzeug)

Kontrast ist ein Kriterium unter Dutzenden. Für ein vollständiges Barrierefreiheits-Audit verwenden Sie axe DevTools, Lighthouse, WAVE oder eine kostenpflichtige Lösung wie Tenon oder PowerMapper. Diese prüfen Kontrast, Alt-Text, ARIA, Formularbeschriftungen, Fokusreihenfolge, Überschriftenstruktur und vieles mehr in einem einzigen Durchgang. Verwenden Sie dieses Werkzeug während des Palettendesigns und die umfassenden Werkzeuge während des Integrationstests.

Weitere Fragen

Was ist der Unterschied zwischen AA- und AAA-Kontrast?

AA ist der Standard, gesetzlich erforderlich durch die meisten Barrierefreiheitsgesetze (ADA, EAA, AODA usw.) und was jede öffentlich zugängliche Website erfüllen sollte. AAA ist strenger: 7:1 für Körpertext, 4,5:1 für Großtext. AAA ist im Allgemeinen nur für hochkarätigen Inhalt erforderlich (Regierungswebsites in einigen Rechtsräumen, medizinische und juristische Informationen, Inhalte für Benutzer mit Sehbehinderung als primäres Publikum). Designen für AAA ist restriktiv; wenige Marken können es ohne signifikante Farbeinschränkungen erfüllen. Streben Sie standardmäßig AA an und AAA, wo das Inhaltspublikum es rechtfertigt.

Warum verwendet WCAG speziell 4,5:1?

Die Schwelle 4,5:1 wurde gewählt, damit Text für Benutzer mit 20/40-Sehkraft (die Schwelle für gesetzliche Blindheit in vielen Rechtsräumen) ohne assistive Vergrößerung lesbar bleibt. Es ist auch ungefähr das Kontrastverhältnis, bei dem farbsehgemängelte Benutzer Vordergrund und Hintergrund zuverlässig unterscheiden können. Die Zahl ist empirisch aus der Sehforschung kalibriert; sie ist nicht willkürlich. Das 7:1 von AAA entspricht etwa der 20/80-Sehkraft und kann deutlich mehr Behinderung berücksichtigen.

Wie funktioniert die Kontrastformel?

Konvertieren Sie jede Farbe von sRGB in relative Helligkeit mit der Formel: gamma-korrigieren Sie jeden Kanal (R, G, B) durch Anwendung einer stückweisen Funktion (linear für niedrige Werte, exponentiell für hohe), gewichten Sie dann mit 0,2126 R + 0,7152 G + 0,0722 B (die relative menschliche Augenempfindlichkeit für jeden Kanal). Das Kontrastverhältnis zwischen zwei Farben ist (L1 + 0,05) / (L2 + 0,05), wobei L1 die hellere Helligkeit und L2 die dunklere ist. Der Offset 0,05 berücksichtigt die Reflexion des Umgebungsbildschirms. Das Ergebnis ist eine Zahl zwischen 1 (identisch) und 21 (max).

Sollte ich mich um den Kontrast für Platzhaltertext in Formularfeldern kümmern?

Ja. Platzhaltertext zählt unter WCAG als Text und muss den 4,5:1-Kontrast erfüllen. Die Browser-Standardeinstellung für Platzhalter ist hellgrau (#a9a9a9 in den meisten Browsern), das auf Weiß scheitert. Überschreiben Sie mit CSS: ::placeholder { color: #595959; } oder ähnlich, das AA besteht. Noch besser, vermeiden Sie Platzhalter ganz für wichtige Felder; verwenden Sie sichtbare Beschriftungen über dem Feld und reservieren Sie Platzhalter für Beispielformatierung. Schwebende-Etikett-Muster kombinieren das sichtbare Etikett und Beispielklarheit.

Gilt Kontrast für deaktivierte Schaltflächen und Formularfelder?

Nein. WCAG SC 1.4.3 nimmt deaktivierte Steuerungen explizit aus, weil das gedämpfte Erscheinungsbild selbst ein visuelles Signal ist, dass die Steuerung nicht verfügbar ist. Deaktivierte Schaltflächen werden typischerweise auf etwa 38% Opazität abgedunkelt und würden den Kontrast in ihrem deaktivierten Zustand absichtlich scheitern. Der deaktivierte Zustand muss jedoch immer noch deutlich vom aktivierten Zustand unterscheidbar sein, also entfernen Sie nicht einfach jegliche visuelle Behandlung; verwenden Sie einen klaren visuellen Unterschied plus ein für Screenreader zugängliches deaktiviertes Attribut.

Was ist mit Kontrast für grafischen Inhalt wie Diagramme und Symbole?

WCAG 1.4.11 Nicht-Text-Kontrast (in 2.1 hinzugefügt) erfordert 3:1-Kontrast für UI-Komponenten (Schaltflächen, Formularränder, Fokusindikatoren) und bedeutungsvolle grafische Elemente (Symbole, die Status vermitteln, Diagrammelemente, die Datenreihen unterscheiden). Die 3:1-Schwelle ist niedriger als die 4,5:1 für Text, weil Grafiken im Allgemeinen größere sichtbare Bereiche haben. Dekorative Grafiken, die keine Bedeutung vermitteln, sind ausgenommen. Wenden Sie 3:1 auf jedes Symbol an, das Status vermittelt (geöffnetes Auge für sichtbar, X für löschen, Häkchen für ausgewählt) und jedes Diagrammsegment, das unterscheidbar sein muss.