Zum Inhalt springen
helpyself

Kontrast-Raster

Local only — nothing is uploaded unless you save or share it.

Ein Kontrast-Raster für Ihre ganze Palette — jede Paarung gegen WCAG geprüft.

  1. Fügen Sie Ihre Palette ein — eine Farbe pro Zeile oder durch Kommas getrennt, in beliebiger Notation.
  2. Wählen Sie die WCAG-Stufe, auf die Sie gestalten.
  3. Lesen Sie eine Spalte hinunter, um zu sehen, was auf diesem Hintergrund sitzen darf.
  4. Screenshotten Sie das Raster in Ihre Designspezifikation, oder reparieren Sie ein durchgefallenes Paar in der Kontrast-Korrektur.
Tool speichern

Kontrast-Raster griffbereit halten

Als Lesezeichen

Über dieses Tool

Ein Designsystem ist keine Liste von Farben, es ist eine Liste von Paarungen — und die Frage, die tatsächlich aufkommt, lautet: welche davon darf auf welcher liegen. Das Paar für Paar zu prüfen bedeutet n² Besuche bei einem Kontrast-Prüfer. Bei einer Palette von acht sind das vierundsechzig Prüfungen, weshalb es niemand tut und weshalb Designsysteme mit Kombinationen ausgeliefert werden, die nie jemand getestet hat. Dies ist ein Paletten-Kontrast-Prüfer, der alle auf einmal macht — eine WCAG-Farbmatrix für den ganzen Satz. Fügen Sie Ihre Palette ein, und jede Farbe wird als Text gegen jede Farbe als Hintergrund geprüft, mit dem Kontrastverhältnis und der WCAG-Note in jeder Zelle. Grün besteht die gewählte Stufe, Bernstein schafft nur die niedrigere Latte für großen Text, Rot fällt durch. Fügen Sie sie in der Form ein, die Sie ohnehin schon haben. HEX, rgb(), hsl() oder CSS-Farbnamen, getrennt durch Zeilenumbrüche, Kommas oder Leerzeichen, mit der Syntax für CSS-Variablen noch dran, falls Sie das kopiert haben — es liest alles davon und sagt Ihnen, was es nicht lesen konnte. Das Raster ist auch das, was sich zu behalten lohnt. Es ist so gebaut, dass man es direkt in eine Designspezifikation oder einen Pull Request screenshotten kann, denn die Prüfung passiert einmal und das Bild wird ein Jahr lang benutzt. Alles läuft in Ihrem Browser.

Häufige Fragen

Wie lese ich das Raster?

Jede Zeile ist eine Farbe als Text, jede Spalte eine Farbe als Hintergrund. Die Zelle, in der sie sich treffen, ist das Kontrastverhältnis dieser Paarung. Eine Spalte hinunterzulesen sagt Ihnen also alles, was auf diesem Hintergrund lesbar sitzen kann.

Warum ist die Diagonale leer?

Das ist jede Farbe gegen sich selbst, immer 1:1, und ein Fehler, den nie jemand gemacht hat. Sie als Durchfallen zu markieren, würde das Raster mit einer roten Diagonale öffnen, die Ihnen nichts sagt.

Was bedeuten die Farben in den Zellen?

Grün besteht die gewählte Stufe. Bernstein schafft 3:1, was für großen Text reicht — 18pt oder 14pt fett — aber nicht für Fließtext. Rot fällt überall durch.

Wie viele Farben nimmt es?

Bis zu 24. Darüber hinaus hört das Raster auf, lesbar zu sein, und wird zu Tapete, was niemandem hilft — und eine Palette von mehr als 24 sind meist mehrere Paletten, die getrennt geprüft werden sollten.

Kann ich direkt aus meinem CSS einfügen?

Ja. Die Syntax für CSS-Variablen wird entfernt, Zeilen wie --brand-500: #3b82f6; funktionieren also so wie sie sind, und Dubletten werden gestrichen, damit eine wiederholte Farbe nicht eine Zeile und eine Spalte verschwendet.

Helfen Sie, dieses Tool zu verbessern

Einen Fehler gefunden, eine Änderung im Kopf, oder fehlt Ihnen ein Tool?

/contrast-grid

↑↓ bewegen · Enter öffnen · Esc schließen