Barrierefreie Farbpaletten erstellen

Von Bogdan Sandu (EN) · Veröffentlicht 22. Dezember 2025 · Zuletzt aktualisiert 14. September 2026

Dieser Generator für barrierefreie Farbpaletten erstellt aus einer Grundfarbe eine Palette mit fünf Farben. Für jede Farbe zeigt er an, ob weißer oder schwarzer Text darauf die WCAG-Kontrastgrenzwerte erreicht. Wählen Sie eine Farbe und einen Palettentyp und prüfen Sie die Kennzeichnungen.

Was Sie einstellen können:

• Grundfarbe aus der Auswahl, einem eingegebenen Hexadezimalcode oder der Schaltfläche Zufällig
• Palettentyp: Lebendig, Monochromatisch, Kontrast 1, Kontrast 2, Pastell, Pastell-Kontrast 1, Pastell-Kontrast 2 oder Dunkel zu Hell
• Sperre auf einer beliebigen Karte, damit die Farbe die nächste Regeneration überlebt

Jede Karte zeigt die HEX-, RGB- und HSL-Werte der Farbe an, jeweils mit einer eigenen Kopierschaltfläche. Darunter befinden sich das Kontrastverhältnis und zwei Abzeichen: WCAG AA (4,5:1) und WCAG AAA (7:1).

So verwenden Sie diesen barrierefreien Farbpalettengenerator

1. Geben Sie Ihre Markenfarbe in das Hex-Feld ein oder klicken Sie auf Zufällig, um einen Startpunkt zu wählen.
2. Wählen Sie einen Palettentyp aus. Die Palette regeneriert sich bei jeder Änderung, und die Modi „Vibrant“, „Contrasting“ und „Pastell“ fügen etwas Zufälligkeit hinzu. Wählen Sie also zweimal denselben Modus aus, um Variationen zu sehen.
3. Sperren Sie die Farben, die Sie beibehalten möchten, und ändern Sie dann den Modus oder die Grundfarbe, um den Rest zu regenerieren.
4. Lesen Sie die Abzeichen. Ein grüner AA bedeutet, dass der Text in Weiß oder Schwarz, je nachdem, welche Farbe stärker ist, mindestens 4,5:1 erreicht.
5. Kopieren Sie die Werte in Ihr Stylesheet oder Ihre Design-Token.

Eine Karte für #2C5F8A sieht so aus:

HEX   #2C5F8A
RGB   44, 95, 138
HSL   207°, 52%, 36%
WCAG AA ✓   WCAG AAA ✗
Contrast: 6.75:1

Das Verhältnis ist die WCAG-Formel, die das Tool im Browser ausführt: relative Luminanz der helleren Farbe plus 0,05, geteilt durch relative Luminanz der dunkleren Farbe plus 0,05, nach der Linearisierung jedes RGB-Kanals.

function luminance(r, g, b) {
  const lin = c => {
    c /= 255;
    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
  };
  return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
}

function contrast(a, b) {
  const [l1, l2] = [luminance(...a), luminance(...b)].sort((x, y) => y - x);
  return (l1 + 0.05) / (l2 + 0.05);
}

Was das Tool nicht macht

• Die Erzeugung durch Kontrast wird nicht eingeschränkt. Paletten basieren auf Farbton-, Sättigungs- und Helligkeitsversätzen rund um Ihre Grundfarbe. Die Abzeichen sind eine Überprüfung des Ergebnisses, kein Input dazu. Wenn eine Karte fehlschlägt, regenerieren Sie sie, sperren Sie die Durchgänge und versuchen Sie es erneut oder ändern Sie die Grundfarbe dunkler oder heller.
• Es überprüft jede Farbe nur mit weißem und schwarzem Text. Es testet die Palette Farben nicht miteinander. Für eine Text-on-Color-Kopplung zwischen zwei Palette Farben, führen Sie die beiden Hex-Codes durch die obige Formel oder einen speziellen Kontrast-Checker.
• Es verwendet WCAG 2 Verhältnisse. Es gibt keinen APCA-Score.
• Es simuliert keine Farbenblindheit. Sehen Sie die Palette in Coblis (EN) oder Color Oracle (EN) vor dem Versand.
• Es gibt keinen Export. Kopieren Sie die benötigten Werte oder benennen Sie sie mit dem Farbnamenfinder.

Der Rest dieser Seite behandelt die Standards, die Mathematik und den umfassenderen Workflow, in den das Tool passt.

Was ist ein barrierefreier Farbpalettengenerator?

Ein barrierefreier Farbpalettengenerator ist ein Design-Tool, das Farbkombinationen erstellt, um einen messbaren Kontraststandard zu erreichen, nicht nur ein ansprechendes Aussehen.

Das ist der wesentliche Unterschied zu einem normalen Palette-Werkzeug. Ein regulärer Generator optimiert die Farbtonharmonie. Ein barrierefreies Tool optimiert entweder zuerst für die Lesbarkeit oder, wie das obige Tool, generiert es für die Harmonie und misst dann die Lesbarkeit für jedes Ergebnis.

Typische Benutzer sind:

• Produktdesigner bauen ein Farbsystem für eine Live-Schnittstelle
• Front-End-Entwickler, die kontrastsichere Hex-Codes benötigen, bevor sie CSS berühren
• Barrierefreiheit führt zum Audit einer bestehenden Markenpalette

Text mit zu geringem Kontrast ist der häufigste Barrierefreiheitsfehler im Web. Er betrifft 83,9 % der Startseiten, die im Bericht WebAIM Million 2026 (EN) geprüft wurden; im Vorjahr waren es 79,1 %.

Diese einzelne Statistik ist der Grund, warum diese Kategorie von Tools existiert. Die meisten Farbprobleme im Web sind nicht exotisch. Es sind einfache Kontrastausfälle, die ein Generator vor dem Start erfasst.

Die Praxis befindet sich innerhalb der größeren Disziplin der Web-Zugänglichkeit (EN), ist aber im Umfang enger.

Ein Barrierefreiheitspalettengenerator überprüft keine Screenreader-Beschriftungen oder Tastatur-Traps. Es prüft eines: ob eine Vordergrund- und Hintergrundfarbenkombination für Menschen mit Sehschwäche oder Farbseheinschränkung lesbar ist. Das macht es zu einem kleinen, aber tragfähigen Stück User Interface Design (EN).

WCAG vs. APCA: Welchen Kontraststandard sollten Sie verwenden?

WCAG misst den Kontrast über ein relatives Leuchtdichteverhältnis. APCA misst sie durch einen Wahrnehmungs-Leuchtigkeits-Score namens Lc.

Beide existieren, um dieselbe Frage auf unterschiedliche Weise zu beantworten: Ist dieser Text vor diesem Hintergrund lesbar?

Kennzahlen, Quelle:

• WCAG 2.2 Level AA: Mindestens 4.5:1 Kontrastverhältnis für normalen Text und 3:1 für großformatigen Text, gemäß Erfolgskriterium 1.4.3 (EN)
• WCAG 2.2 Level AAA: mindestens 7:1 für normalen Text, gemäß Erfolgskriterium 1.4.6 (EN)
• APCA: Lc 90 bevorzugt und Lc 75 Minimum für den Textkörper, gemäß der APCA-Dokumentation (EN)

APCA (EN) wurde vom Forscher Andrew Somers entwickelt und ist die Kandidaten-Kontrastmethode für WCAG 3, die sich noch in der Entwicklung befindet.

Es gibt den Farbkontrast (EN) auf einer Skala von Lc 0 bis ungefähr Lc 106 an, wobei Lc 15 das absolute Minimum ist, damit eine nicht-textliche Grenze überhaupt erkennbar ist.

Section 508 (EN), der Americans with Disabilities Act (EN) und die europäische EN 301 549 (EN) beziehen sich alle auf die Verhältnisschwellenwerte der WCAG als rechtliches Rückgrat für digitale Barrierefreiheit.

Keiner von ihnen zitiert derzeit APCA direkt. Aus diesem Grund verwenden die meisten Generatoren, einschließlich dieses, immer noch WCAG-Mathematik als Standard, obwohl APCA unter Designern an Bedeutung gewinnt.

Ein Paar Farben kann den WCAG-Verhältnistest auf dem Papier bestehen und sich in der Praxis immer noch schwach anfühlen. Die Mathematik der relativen Leuchtdichte berücksichtigt nicht vollständig, wie das menschliche Auge Leichtigkeit bei unterschiedlichen Größen und Gewichten wahrnimmt.

Wie berechnet ein barrierefreier Farbpalettengenerator den Kontrast?

Die Kontrastberechnung beginnt mit der relativen Leuchtdichte (EN), einem Wert, der aus den roten, grünen und blauen Kanälen jeder Farbe nach Gammakorrektur abgeleitet wird. Der Codeblock oben auf dieser Seite ist die gesamte Formel.

Der Generator nimmt die Leuchtdichte des Vordergrundes, die Leuchtdichte des Hintergrundes und kombiniert sie zu einem einzigen Verhältnis zwischen 1:1 und 21:1.

Zwei Sätze fassen die gesamte Methode zusammen: dunklere Leuchtdichte plus hellere Leuchtdichte erzeugt eine größere Lücke, und eine größere Lücke erzeugt ein höheres Verhältnis.

Beim Verschieben eines Farbtonwertes in den Farbwählern HSL vs. RGB (EN) treten die meisten versehentlichen Fehler auf. Die Anpassung der Sättigung kann die Leuchtdichte leise verschieben, ohne dass der Designer es bemerkt.

Farbraum und warum er das Ergebnis verändert

Nicht jeder Farbraum repräsentiert die Helligkeit auf die gleiche Weise, und das ist wichtig, wenn ein Generator einen Farbton anpasst, um ein Zielverhältnis zu erreichen. Das obige Werkzeug arbeitet in HSL, weshalb seine Badges wichtig sind: HSL-Helligkeit allein sagt den Kontrast nicht voraus.

HSL behandelt die Helligkeit als einfachen Durchschnitt der höchsten und niedrigsten RGB-Kanäle einer Farbe. Deshalb können zwei Farben mit dem gleichen HSL-Helligkeitswert in der Helligkeit spürbar unterschiedlich aussehen.

Sowohl OKLCH als auch CIELAB modellieren Licht näher an der Wahrnehmung des Auges heran. Wenn Sie einen Wert nach oben oder unten verschieben, bleibt der gewünschte Kontrast erhalten.

Designer, die schnell zwischen Formaten wechseln müssen, greifen oft zu einem RGB zu HSL Konverter oder einem HEX zu RGB Konverter, um zu überprüfen, wie eine Basismarkenfarbe übersetzt wird.

Wie simulieren diese Tools Farbenblindheit?

Durch die Simulation von Farbenblindheit wird eine Farbpalette so dargestellt, wie sie jemandem mit einer bestimmten Art von Farbsehschwäche erscheinen würde. Der Generator auf dieser Seite enthält keinen, daher behandeln Sie diesen als den darauffolgenden Schritt.

Am häufigsten werden drei Typen simuliert:

• Deuteranopie, verminderte Empfindlichkeit für Grün
• Protanopie, verminderte Empfindlichkeit für Rot
• Tritanopie, reduzierte Empfindlichkeit für Blau, weitaus seltener als die anderen beiden

Coblis (EN), Color Oracle (EN) und Sim Daltonism (EN) sind die Referenzsimulatoren, auf die das Barrierefreiheitsfeld am meisten verweist. Mehrere Palette-Werkzeuge lizenzieren oder replizieren ihre Filterlogik.

Dies ist eine separate Prüfung von Kontrastmathematik. Eine Paarung kann 4,5:1 erreichen und immer noch in fast den gleichen Farbton kollabieren, wenn Deuteranopie simuliert wird. Die Verhältnisformel weiß nicht, welche Farbtöne ein Betrachter unterscheiden kann.

Eine Farbsehschwäche betrifft laut Colour Blind Awareness (EN) ungefähr 1 von 12 Männern (8 %) und 1 von 200 Frauen (0,5 %).

Das ist ein bedeutender Anteil eines allgemeinen Publikums. Deshalb behandelt inclusive design (EN) die Simulation als obligatorischen Schritt, nicht als optionales Extra.

Rot-Grün-Verwirrung macht die überwiegende Mehrheit der Fälle aus, sodass ein Generator, der nur Tritanopie prüft, das kleinere Problem löst.

Wie funktioniert die Palettenerstellungslogik?

Die Palettenerstellung folgt einer von zwei Logiken: harmoniebasiert oder kontrastorientiert. Dieser Generator basiert auf Harmonie, wobei die Kontrastprüfung nachträglich angewendet wird.

Harmonie-basierte Werkzeuge gehen von Farbtheorie-Regeln aus.

• Komplementär: zwei Farbtöne gegenüber auf dem Rad
• Analog: Farbtöne, die nebeneinander sitzen
• Triadic: drei gleichmäßig verteilte Farbtöne

Kontrast-first-Werkzeuge arbeiten rückwärts. Sperren Sie eine Grundfarbe, legen Sie ein Zielverhältnis fest und lassen Sie den Algorithmus automatisch Farbtöne und Schattierungen generieren, die diese Zahl erreichen.

Adobe hat eine hybride Version namens Leonardo (EN) entwickelt, ein Open-Source-Tool aus dem Spectrum design system (EN)-Team.

Leonardo nimmt eine Markenfarbe als Eingabe und gibt eine Vollskala aus, die auf bestimmte Kontrastverhältnisse kalibriert ist. Die Standardwerte sind 3:1 und 4.5:1, die beiden Schwellenwerte, die WCAG für großen und normalen Text festlegt.

Der Kompromiss ist es wert, klar und deutlich gesagt zu werden. Eine Harmony-First-Palette sieht normalerweise auf den ersten Blick besser aus, aber sie benötigt danach einen Kontrastpass, was die Abzeichen oben tun.

Eine kontrastorientierte Palette besteht die Barrierefreiheitsprüfung sofort. Manchmal braucht es einen zweiten Blick, um sicherzustellen, dass sich die Farben immer noch wie eine kohärente Marke anfühlen.

Die besten zugänglichen Farbpalettengeneratoren im Vergleich

Coolors (EN), Adobe Color (EN), Khroma (EN), Stark (EN) und ColorBox (EN) decken die meisten Möglichkeiten ab, wie Teams heute barrierefreie Paletten erstellen.

Teams, die bereits in einem Figma-basierten Design-Workflow (EN) arbeiten, greifen in der Regel zu Stark. Es prüft den Kontrast, ohne die Datei zu verlassen.

Wo jedes Werkzeug am besten passt:

• Kühler für schnelle, allgemeine Palette Exploration mit einem Kontrast-Check auf der Oberseite
• Leonardo für Teams, die eine vollständige Design-Token-Skala aus einer Markenfarbe erstellen
• Chroma für frühzeitige Inspiration, Kontrast braucht danach noch einen separaten Checker

Open-Source-Optionen wie Leonardo (EN) geben Entwicklungsteams direkten Zugriff auf den zugrunde liegenden Algorithmus. Das ist wichtig, wenn eine Palette automatisch regeneriert werden muss, wenn sich eine Markenfarbe ändert.

Abonnement-Tools wie Stark tauschen diese Flexibilität gegen einen reibungslosen, pluginbasierten Workflow, den nicht-technische Designer ohne Code ausführen können.

Vor- und Nachteile der automatisierten Palettenerstellung

Durch die Automatisierung entfällt der langsamste und fehleranfälligste Teil der barrierefreien Farbarbeit: das manuelle Testen aller Vordergrund- und Hintergrundpaare.

Vorteile:

• Geschwindigkeit, eine volle Farbskala wird in Sekunden statt Stunden erzeugt
• Konsistenz, jeder Farbton in einem System wird mit demselben Zielverhältnis überprüft
• Weniger menschliche Fehler, niemand vergisst, einen Hover-Zustand zu testen

Nachteile:

• Die Markennuance kann abgeflacht werden, wenn ein Algorithmus das Verhältnis vor dem Gefühl priorisiert
• Nicht-textbasierte Elemente wie Icons und Eingaberahmen werden oft nicht angehakt, da sich die meisten Generatoren auf Text konzentrieren.
• Verläufe und fotografische Hintergründe werden überhaupt nicht behandelt

Diese zweite Lücke ist wichtiger, als sie aussieht. Formularfelder sind insbesondere auf den Randkontrast angewiesen, den ein reines Text-Generator nicht kennzeichnet. Das ist einer der Gründe, warum zugängliche Formulare (EN) immer noch einen eigenen Prüfpass benötigen.

Die manuelle Überprüfung verschwindet nicht, sobald ein Tool eine Palette genehmigt. Es schrumpft auf die Teile, die die Automatisierung nicht erreichen kann: Nicht-Text-Kontrast, Farbverläufe und alles, was nur Farbe verwendet, um Bedeutung zu vermitteln.

Die ehrliche Art, es zu formulieren: Die Automatisierung kümmert sich um die Arithmetik, ein Mensch besitzt immer noch die Urteilsrufe.

So generieren und implementieren Sie eine barrierefreie Farbpalette

Die Generierung einer barrierefreien Farbpalette folgt einer festen Reihenfolge: Grundfarbe zuerst, Zielstandard zweiter, Kontrastprüfung dritter, Export zuletzt. Das obige Tool deckt den ersten und dritten Schritt ab.

Das Überspringen der Reihenfolge ist, wo die meisten Paletten schief gehen, normalerweise, weil jemand exportiert, bevor der farbenblinde Pass.

1. Wählen Sie eine Basis-Markenfarbe und notieren Sie ihren Hex-Code
2. Wählen Sie einen Zielstandard: WCAG AA, WCAG AAA oder einen bestimmten APCA Lc-Wert
3. Generieren Sie die Farbton- und Schattenskala und überprüfen Sie jede Paarung anhand dieses Ziels
4. Führen Sie den vollen Maßstab durch einen farbenblinden Simulationspass
5. Exportieren Sie die genehmigte Palette im Format, das Ihr Build tatsächlich verwendet

Das Exportformat ist wichtiger, als Teams erwarten.

Eine Palette, die in flachen Hex-Werten gesperrt ist, muss jedes Mal, wenn sich eine Markenfarbe verschiebt, manuell bearbeitet werden. Eine als CSS (EN) exportierte benutzerdefinierte Eigenschaft aktualisiert sich überall, wo sie referenziert wird, sobald sich die Stammvariable ändert.

Design-Teams, die über Figma und Code hinweg arbeiten, exportieren zunehmend direkt in Design-Token. Figmas eigene Variablen-Funktion, die in diesem Figma-Variablen-Leitfaden (EN) behandelt wird, wird sauber auf diese benutzerdefinierte CSS-Eigenschaftsstruktur abgebildet.

JSON-Design-Token liegen dazwischen: portabel genug für ein Design-System, strukturiert genug für eine Build-Pipeline, die ohne manuelle Übersetzung verwendet werden kann.

Wenn barrierefreie Farbpalettengeneratoren nicht angewendet werden

Ein barrierefreier Farbpalettengenerator hört auf, nützlich zu sein, sobald die Oberfläche, die er überprüft, keine flache, bekannte Farbe ist.

Vier Situationen liegen außerhalb dessen, was diese Werkzeuge überprüfen können:

• Nicht-Text-Elemente: Symbole, Eingaberahmen und Umschaltzustände unterliegen einer separaten Regel, WCAG 1.4.11 (EN), nicht dem Textkontrastverhältnis, auf das die meisten Generatoren standardmäßig eingestellt sind.
• Verläufe und fotografische Hintergründe: Es gibt keine einzige Hintergrundfarbe, gegen die man ein Verhältnis messen kann.
• Dynamische oder benutzergenerierte Hintergründe: ein Profilbanner oder ein hochgeladenes Bild kann nicht im Voraus geprüft werden
• Markenfarben oder gesetzlich festgelegte Markenfarben: Eine Farbe, die nicht verschoben werden kann, hat keinen Raum für eine Kontrastkorrektur

Die WCAG 1.4.11 legt einen eigenen Schwellenwert von 3:1 für die visuellen Grenzen von Oberflächenkomponenten und aussagekräftigen Grafiken fest. Es handelt sich um ein separates Kriterium zu den zuvor behandelten Textverhältnissen.

In der Dokumentation zum Carbon Design System von IBM (EN) wird diese Lücke direkt genannt. Es warnt Teams, den Textkontrast an jedem Punkt zu überprüfen, an dem er einen Farbverlauf oder ein Bild kreuzt, da ein einzelner fester Hexadezimalwert vor einem sich bewegenden Hintergrund nicht standhält.

Carbon weist Designer auch auf das Stark-Plugin für farbenblinde Überprüfung hin, eine Anerkennung, dass kein einzelner Generatorschritt jedes Attribut abdeckt, das eine echte Schnittstelle benötigt. Das ist ein Teil des Grundes, warum zugängliche UI-Komponenten (EN) als eigene Kategorie geprüft werden, anstatt in eine Palette überprüft zu werden.

Häufige Fehler, die die Barrierefreiheit nach der Generierung beeinträchtigen

Eine Palette kann jede Prüfung bestehen, die ein Generator durchläuft, und dennoch in der Produktion fehlschlagen.

Vier Fehler machen den größten Teil dieser Lücke aus:

• Prüfung der falschen Ebene: ein halbtransparentes Overlay ändert die effektive Hintergrundfarbe, und ein Generator, der nur gegen die Grundfarbe getestet wird, wird es übersehen
• Hover- und Fokuszustände ignorieren: Das Focus Appearance (EN)-Kriterium der WCAG 2.2, das im Oktober 2023 veröffentlicht wurde, erfordert mindestens einen 3:1-Kontrast zwischen dem fokussierten und dem nicht fokussierten Zustand einer Komponente.
• Nutzung von Farbton allein, um Bedeutung zu übertragen: ein roter versus grüner Statusindikator verschwindet für die etwa 8% der Männer mit Rot-Grün-Farbsichtsdefizit, die zuvor behandelt wurden
• Nicht-Text-Kontrast bei Symbolen und Rahmen auslassen: Eine hellgraue Rahmenfarbe, wie sie in vielen Designsystemen standardmäßig verwendet wird, liegt im Allgemeinen bei etwa 1,6:1 gegenüber Weiß, deutlich unter dem Mindestwert von 3:1

Jedes dieser Dokumente durchläuft ohne Warnung eine Kontrastprüfung für reinen Text. Keiner von ihnen berührt das Textverhältnis, für das der Checker gebaut wurde.

Der Fix ist kein besserer Generator. Es behandelt die Ausgabe des Generators als Startpalette und führt dann einen zweiten Durchgang für Zustände, Überlagerungen und Nicht-Text-Elemente aus, bevor etwas versendet wird.

Häufige Fragen: Barrierefreie Farbpaletten erstellen

Auf welche gesetzlichen Normen beziehen sich barrierefreie Farbpalettengeneratoren?

Die meisten barrierefreien Farbpaletten-Generatoren prüfen den Kontrast anhand der Schwellenwerte der WCAG-Verhältnisse, da Section 508, die ADA und die europäische EN 301 549 alle direkt auf diesen Standard verweisen. APCA wird im aktuellen Gesetz nicht erwähnt, obwohl es die Kandidatenmethode für WCAG 3 ist.

Kann eine Farbpaare WCAG bestehen und trotzdem für einen farbenblinden Benutzer schwer lesbar sein?

- Ja. - Ja. Die Verhältnisformel der WCAG misst den Unterschied in der Helligkeit, nicht den Farbtonunterschied, sodass zwei Farben 4,5:1 erreichen können und trotzdem unter Deuteranopie nahezu identisch aussehen. Ein farbenblinder Simulationsdurchlauf erfasst diese Lücke; die Verhältnisprüfung alleine tut dies nicht.

Ist ein kostenlos zugänglicher Farbpalettengenerator gut genug oder lohnt sich ein kostenpflichtiges Tool?

Kostenlose Werkzeuge wie dieses, Coolors und Khroma verarbeiten Kontrastprüfungen mit einer einzigen Palette gut. Kostenpflichtige Tools wie Stark fügen nicht-textbasierte Kontrastprüfungen, Teambibliotheken und Designsystemexporte hinzu. Das ist wichtig, wenn eine Palette über ein ganzes Produkt skaliert werden muss.

Was kostet ein nicht konformer Kontrast ein Unternehmen in rechtlicher Hinsicht oder in Bezug auf die Benutzerfreundlichkeit?

Die Kläger reichten im Jahr 2024 2.452 Website-Zugänglichkeitsklagen vor dem Bundesgericht ein, so Seyfarth Shaw (EN)s Nachverfolgung von Gerichtsverfahren. Kontrastfehler gehören zu den am häufigsten genannten Fehlern, neben fehlendem Alt-Text und nicht beschrifteten Formularfeldern.

Ist APCA zuverlässiger als WCAG für echte Designarbeit?

APCA-Modelle nehmen Leichtigkeit genauer wahr, so der Entwickler Andrew Somers, was sie besser bei der Vorhersage der tatsächlichen Lesbarkeit macht. Die WCAG bleibt der rechtlich zitierte Standard. Die meisten Teams prüfen beides, bis WCAG 3 formal eine perzeptuelle Methode übernimmt.

Wie überprüfen Sie eine Palette, die bereits einen Generator durchlaufen hat, bevor Sie sie versenden?

Testen Sie jeden Hover-, Fokus- und Deaktivierungsstatus separat, da ein Generator normalerweise nur die Standardpaarung überprüft. Überprüfen Sie dann Nicht-Text-Elemente wie Rahmen und Symbole. Sehen Sie sich abschließend noch ein letztes Mal die gesamte Palette mit einem Farbenblind-Simulator an.

Was sollten Sie zuerst überprüfen, wenn ein barrierefreier Farbpalettengenerator eine Palette genehmigt?

Ein barrierefreier Farbpalettengenerator verdient seinen Platz in der Produktion erst, wenn seine Freigabe als Ausgangspunkt behandelt wird. Ein bestandenes Kontrastverhältnis bestätigt allein die Textlesbarkeit.

Drei Prüfungen entscheiden darüber, ob diese Zulassung auch nach dem Start bestehen bleibt.

• Textpaare zuerst
• Nicht-Text-Ränder und Symbole zweiter
• Interaktive Zustände dauern

Diese Reihenfolge folgt der Belichtung. Fehlerhafter Text schlägt sofort fehl, fehlerhafte Rahmen verlangsamen die Erkennung und fehlerhafte Zustände treten erst auf, wenn jemand interagiert.

Der Kompromiss ist Geschwindigkeit. Die Überprüfung von drei Schwellenwerten anstelle eines fügt einen Überprüfungsschritt hinzu, der bei reinen Farbharmoniearbeiten niemals erforderlich war.

Der am 10. September 2026 aktualisierte Arbeitsentwurf von WCAG 3.0 (EN) des W3C ist weiterhin ein Working Draft und kann nicht als Standard angeführt werden. Die heutigen Grenzwerte gelten, bis eine künftige Empfehlung sie ersetzt.

Teams, die über Farbe hinausgehen, können als nächstes eine vollständige Web-Zugänglichkeits-Checkliste (EN) durcharbeiten.