Markenpaletten-Prüfer
Prüfe alle Farbpaare deiner Markenpalette auf barrierefreien Kontrast, in einem Durchgang. Füge bis zu 24 Farben ein, eine pro Zeile, gern mit Namen, und du bekommst eine Tabelle mit den WCAG-2.2-Kontrastverhältnissen und eine Liste der Paare, die bestehen. Kostenlos, und nichts wird gesendet.
So prüfst du deine Markenfarben auf barrierefreie Paare
- 1Füge deine Farben ein, eine pro Zeile, mit Namen davor oder dahinter
- 2Wähle die „Zu erreichende Stufe“
- 3Lies die Tabelle: Textfarben links, Hintergründe oben
- 4Nimm Text und Hintergrund aus den Paaren, die bestehen
- Eine Kontrasttabelle und jedes Paar, das deine Stufe erreicht
Was die Prüfung zeigt
- Alle Paare auf einmal.Sechs Farben ergeben 36 Verhältnisse, jedes markiert, ob es deine Stufe erreicht
- Deine Namen bleiben.Schreib „Primary #2563EB“ oder „#F59E0B Akzent“, dann zeigen Tabelle und Liste deine Namen
- Nichts wird gesendet.Deine Palette wird von deinem Browser auf deinem eigenen Gerät geprüft
Was du tun kannst
- Bis zu 24 Farben in einer Tabelle gegeneinander prüfen
- Die Stufe wählen: „Fließtext, AA (4,5:1)“, „Fließtext, AAA (7:1)“ oder „Großer Text und Icons, AA (3:1)“
- Farben als #hex, rgb(), hsl(), lab(), oklch() und in den anderen CSS-Schreibweisen eingeben oder als CSS-Farbnamen
- Jedes bestandene Paar als Muster sehen, den Text in der einen Farbe auf der anderen, mit seinem Verhältnis
- Tippfehler finden: Zeilen, die sich nicht als Farbe lesen lassen, stehen unter der Tabelle
Gut zu wissen
- Nur die ersten 24 Farben werden gelesen. Zeilen danach fallen ohne Hinweis weg
- Kontrast ist in beide Richtungen gleich. Die Liste zeigt jedes Paar daher einmal, egal welche Farbe der Text ist
- Die Verhältnisse folgen WCAG 2.2 und werden abgerundet, 4,5:1 in der Tabelle besteht also wirklich. Transparenz wird nicht beachtet
- Jede Farbe wird vor dem Vergleich auf ihren HEX-Wert gerundet
Fragen
Was macht ein Markenpaletten-Prüfer?
Er prüft jede Farbe deiner Palette gegen jede andere auf WCAG-Kontrast. Statt Paare einzeln zu testen, siehst du auf einen Blick, welche Kombinationen für Text taugen.
Wie viele Paare der Beispielpalette bestehen AA?
Das Tool öffnet mit sechs Beispielfarben. Fünf Paare erreichen 4,5:1 für Fließtext, zwei erreichen 7:1 für AAA und acht erreichen 3:1 für großen Text und Icons.
Kann ich die Farben direkt aus meinem Styleguide einfügen?
Ja. Eine Farbe pro Zeile, mit einem Namen davor oder dahinter, etwa „Ink #1C2428“. Der Name bleibt erhalten und steht in der Tabelle.
Wird meine Markenpalette an einen Server gesendet?
Nein. Der Kontrast wird von deinem Browser auf deinem eigenen Gerät berechnet, und mit deinen Farben geht keine Anfrage hinaus.
Weitere Tools in „Web & Code“
Diese Seite gibt es nicht. Such unten oder zieh eine Datei hierher, um das passende Werkzeug zu finden.
Eine Website für jede Dateiaufgabe. Welche ist deine?
Schluss mit dem Hin und Her zwischen Konverter-Websites. Wähle eines von 410+ Tools oder ein Rezept, das mehrere aneinanderreiht.
- Dateien bleiben auf deinem Gerät
- Kein Wasserzeichen
- Funktioniert offline
Datei hierher ziehen
Eine eingefügte Datei geht auch.
oder such ein Tool
Eine App öffnen
Von „uff, diese Datei“ zu erledigt, in drei Schritten.
- Zieh sie rein oder wähl eine Aufgabe
Keine Datei? Such, was du brauchst. Dateien werden auf deinem Gerät verarbeitet, nicht zur Verarbeitung hochgeladen.
- Wähl, was du willst
Kleiner, ein anderes Format, unterschrieben, zusammengefügt. Ein Klick, ohne erst Einstellungen zu studieren.
- Mach ein Rezept daraus
Jede Woche dieselben drei Schritte? Reih sie einmal aneinander und lass beim nächsten Mal dasselbe Rezept laufen.
Ein freigegebener Werkzeugkasten für das ganze Team.
Ob im Büro, auf der Baustelle oder in der Agentur: Teams arbeiten den ganzen Tag mit vertraulichen Dateien. ToolRecipe gibt allen dieselben Werkzeuge und dieselben Rezepte, und die Dateien werden auf dem eigenen Computer jeder Person verarbeitet.
- Dateien werden auf dem Gerät der Mitarbeitenden verarbeitet
- Firmenrezepte, die alle gleich ausführen
- Ein Ort statt zehn Konverter-Seiten