Kontrastreiche Farbpaletten mit WCAG-Werten | We.Inc
Fünf eigene kontrastreiche Farbpaletten, jedes Text- und Button-Paar nach WCAG 2.2 geprüft, plus ein Tester zum Anpassen der Farben und Kopieren von CSS.
Eine kontrastreiche Palette ist ein Satz Markenfarben, bei dem Text auf seinem Hintergrund gut lesbar bleibt. WCAG 2.2 misst das als Verhältnis von 1:1 bis 21:1. Fließtext braucht mindestens 4.5:1 für Stufe AA und 7:1 für AAA, großer Text braucht 3:1 und 4.5:1. Die Paletten hier führen jedes Paar auf.
Mindestkontraste nach WCAG 2.2
Inhalt
Stufe AA
Stufe AAA
Fließtext
Großer Text (18pt oder 14pt fett)
Icons, Eingaberänder, Fokusrahmen
Keine zusätzliche Stufe
Logos und reine Dekoration
Keine Anforderung
Keine Anforderung
Die meisten Paletten-Websites zeigen hübsche Farbfelder nebeneinander, was nichts darüber aussagt, ob Text darauf lesbar ist. Jede Palette unten gibt einer Farbe eine Aufgabe (Hintergrund, Text, Sekundärtext, Akzent, Text auf dem Akzent) und prüft die Paare, die du auf einer Seite wirklich kombinieren würdest.
Jede Farbe wird in relative Leuchtdichte umgerechnet: wie hell sie wirkt, von 0 für Schwarz bis 1 für Weiß.
Der hellere Wert plus 0.05 wird durch den dunkleren Wert plus 0.05 geteilt. Diese Zahl ist das Kontrastverhältnis.
Das Verhältnis wird ohne Runden mit dem WCAG-Minimum für die jeweilige Inhaltsart verglichen.
Ein Paar zählt nur, wenn du es so verwendest: Sekundärtext wird auf dem Hintergrund geprüft, Button-Text auf dem Akzent.
Wähle zuerst die Textfarbe, dann den Akzent. Fließtext ist das meiste, was Menschen lesen.
Auf dunklem Hintergrund braucht ein heller Akzent meist dunklen Text darauf, nicht weißen.
Verwende ein einziges Grau für Sekundärtext und prüfe es auf jedem Hintergrund, den du nutzt, auch auf Karten.
Wenn reines Weiß auf reinem Schwarz zu hart wirkt, schafft ein Fast-Schwarz auf gebrochenem Weiß die 7:1 trotzdem mit Reserve.
Prüfe erneut, wenn du eine neue Flächenfarbe hinzufügst, etwa ein getöntes Banner oder einen Footer.
Häufige Fragen
Welches Kontrastverhältnis gilt als hoher Kontrast?
Es gibt keine einzelne offizielle Grenze namens hoher Kontrast. WCAG-Stufe AA verlangt 4.5:1 für normalen Text und Stufe AAA 7:1, daher sehen viele Designer 7:1 für Fließtext als Ziel für hohen Kontrast.
Ab welcher Größe gilt Text als groß?
WCAG behandelt Text ab 18 Punkt oder 14 Punkt fett als groß. Die Erläuterung des W3C setzt das mit etwa 24px und 18.5px in CSS-Pixeln gleich.
Darf ich 4.47 auf 4.5 aufrunden?
Nein. Laut W3C wird das Verhältnis nicht gerundet, ein Paar mit 4.499:1 erfüllt 4.5:1 also nicht. Deshalb schneidet der Tester Werte ab.
Brauchen auch Buttons und Icons Kontrast?
Ja. WCAG 2.2 Erfolgskriterium 1.4.11 verlangt mindestens 3:1 zwischen Teilen von Bedienelementen und bedeutungstragenden Grafiken und den Farben daneben.
Muss mein Logo den Test bestehen?
Nein. Text, der Teil eines Logos oder Markennamens ist, unterliegt nach 1.4.3 keiner Kontrastanforderung. Alles andere auf der Seite drumherum schon.
Warum fünf Rollen statt fünf Farbfelder
Eine Palette aus fünf Farben hat zehn mögliche Paare, und die meisten davon treffen auf einer echten Seite nie aufeinander. Wenn du jeder Farbe eine Rolle gibst, weißt du, welche Paare zählen, und testest vier Kombinationen statt zu raten.
Die Rolle, die am häufigsten durchfällt, ist Sekundärtext: das blasse Grau für Datumsangaben, Bildunterschriften und Fußnoten. Es ist auch der Text, bei dem Menschen am meisten die Augen zusammenkneifen.
Eine Palette an deine Marke anpassen
Behalte deine Markenfarbe als Akzent und passe ihre Helligkeit an, bis der Button-Text besteht. Eine Stufe dunkler oder heller bewahrt meist das Markengefühl und behebt das Verhältnis.
Wenn deine Markenfarbe ein helles Gelb oder ein blasses Blau ist, nutze sie für Hintergründe und große Flächen und wähle einen dunklen Partner für alles, was gelesen werden muss.
Die fünf Paletten und ihre Werte
Die Verhältnisse werden mit der WCAG-2.2-Formel berechnet und auf zwei Nachkommastellen abgeschnitten angezeigt.
Jedes geprüfte Paar der fünf Paletten
Palette
Paar
Verhältnis
Fließtext
AAA Fließtext
Tinte auf Papier
Fließtext #111827 auf Hintergrund #FFFFFF
AA
Tinte auf Papier
Sekundärtext #4B5563 auf Hintergrund #FFFFFF
AA
Tinte auf Papier
Akzent und Buttons #1D4ED8 auf Hintergrund #FFFFFF
AA
Nein
Tinte auf Papier
Text auf dem Akzent #FFFFFF auf Akzent und Buttons #1D4ED8
AA
Nein
Nachtschicht
Fließtext #F8FAFC auf Hintergrund #0B1220
AA
Nachtschicht
Sekundärtext #CBD5E1 auf Hintergrund #0B1220
AA
Nachtschicht
Akzent und Buttons #FBBF24 auf Hintergrund #0B1220
AA
Nachtschicht
Text auf dem Akzent #0B1220 auf Akzent und Buttons #FBBF24
AA
Waldbuch
Fließtext #1B3A2A auf Hintergrund #F7F5EF
AA
Waldbuch
Sekundärtext #44403C auf Hintergrund #F7F5EF
AA
Waldbuch
Akzent und Buttons #9A3412 auf Hintergrund #F7F5EF
AA
Nein
Waldbuch
Text auf dem Akzent #FFFFFF auf Akzent und Buttons #9A3412
AA
Hafenblau
Fließtext #FFFFFF auf Hintergrund #0F2E4C
AA
Hafenblau
Sekundärtext #D6E4F0 auf Hintergrund #0F2E4C
AA
Hafenblau
Akzent und Buttons #7DD3FC auf Hintergrund #0F2E4C
AA
Hafenblau
Text auf dem Akzent #0F2E4C auf Akzent und Buttons #7DD3FC
AA
Warmer Ton
Fließtext #431407 auf Hintergrund #FFF7ED
AA
Warmer Ton
Sekundärtext #57534E auf Hintergrund #FFF7ED
AA
Warmer Ton
Akzent und Buttons #B91C1C auf Hintergrund #FFF7ED
AA
Nein
Warmer Ton
Text auf dem Akzent #FFFFFF auf Akzent und Buttons #B91C1C
AA
Nein
Eine Palette in deinem CSS verwenden
Tinte auf Papier als CSS Custom Properties
Benenne Variablen nach Rolle, nicht nach Farbe, dann ist ein späterer Palettenwechsel eine Änderung pro Zeile.
Die Kontrastformel in JavaScript
Dieselbe Berechnung, die der Tester ausführt, geschrieben nach der W3C-Definition der relativen Leuchtdichte.
Paletten-Tester
Wähle eine Palette und ändere dann eine beliebige Farbe. Jedes Paar wird beim Tippen neu geprüft.
Ausgangspalette
Tinte auf Papier
Nachtschicht
Waldbuch
Hafenblau
Warmer Ton
Hintergrund
Fließtext
Sekundärtext
Text auf dem Akzent
Kontrast jedes Paars in dieser Palette
Paar
Verhältnis
AA Fließtext
AA großer Text
AAA Fließtext
{a} auf {b}
Bestanden
Nicht bestanden
Keine Hex-Farbe
Öffnungszeiten
Geöffnet Dienstag bis Samstag, 9 bis 5. Ohne Termin willkommen bis mittags.
An Feiertagen geschlossen.
Besuch buchen
CSS-Variablen kopieren
Kopiert.
Kopieren fehlgeschlagen. Markiere den Code und kopiere ihn von Hand.