Werkzeug · Farbe und Text
Farbpalette und Kontrastprüfer
Zwei Werkzeuge in einem: eine Palette aus einem Bild ziehen und beliebige Farbpaare gegen die Kontrastvorgaben prüfen.
Läuft vollständig im Browser. Ihre Dateien verlassen das Gerät nicht.
Palette aus einem Bild
Bild hierher ziehen
Nichts wird hochgeladen.
Kontrast prüfen
Große Überschrift
Normaler Fließtext, wie er auf der Seite wirklich vorkommt.
–
- AA – normaler Text (4,5:1)–
- AA – großer Text (3:1)–
- AAA – normaler Text (7:1)–
- Bedienelemente und Grafik (3:1)–
Umrechnung Textfarbe
Kontrast ist keine Geschmacksfrage
Ein hellgraues „Weiterlesen“ auf weißem Grund sieht auf einem guten Monitor im abgedunkelten Büro elegant aus. Auf einem Handy in der Sonne ist es weg. Genau deshalb gibt es messbare Grenzwerte statt Meinungen: Das Kontrastverhältnis vergleicht die relative Leuchtdichte zweier Farben und liefert eine Zahl zwischen 1 zu 1 und 21 zu 1.
| Wert | Gilt für | Bedeutung |
|---|---|---|
| 3 : 1 | Text ab 24 px oder ab 19 px fett, Rahmen von Bedienelementen | Mindestanforderung Stufe AA für große Elemente |
| 4,5 : 1 | Normaler Fließtext, Links, Beschriftungen | Der Wert, an dem sich die meisten Projekte messen lassen |
| 7 : 1 | Normaler Fließtext | Stufe AAA, sinnvoll bei viel Lesetext |
Die drei Kombinationen, die man immer vergisst
- Linkfarbe auf der getönten Sektion. Sie besteht auf Weiß und fällt auf dem hellgrauen Abschnitt knapp durch.
- Weiße Schrift auf der Markenfarbe. Wird selten geprüft, weil die Schaltfläche „irgendwie kräftig“ aussieht.
- Platzhaltertext in Formularfeldern. Fast immer zu hell, und er trägt oft die einzige Erklärung, was ins Feld gehört.
Die hier gefundenen Werte lassen sich direkt weiterverwenden: Für den Einsatz im QR-Code-Generator prüft dasselbe Verfahren, ob ein eingefärbter Code noch gescannt wird. Wie Farbe und Schrift zusammenspielen, steht im Ratgeber Farben und Kontrast im Webdesign.
Häufige Fragen
Was bedeutet das Kontrastverhältnis 4,5 zu 1?
Es ist die Grenze, ab der normal großer Text nach den Web Content Accessibility Guidelines als lesbar gilt. Für großen Text ab 24 Pixel oder ab 19 Pixel fett reichen 3 zu 1. Für die höchste Stufe AAA sind 7 zu 1 nötig. Der Wert beschreibt den Helligkeitsunterschied zwischen Vorder- und Hintergrund, nicht den Farbunterschied.
Warum fällt meine Markenfarbe durch die Prüfung?
Weil viele Markenfarben für Druck und Logo entwickelt wurden, nicht für Fließtext auf Weiß. Ein kräftiges Mittelblau oder ein sattes Grün liegt oft bei 3 zu 1. Die übliche Lösung: die Markenfarbe für Flächen und große Überschriften behalten und eine abgedunkelte Variante für Text und Schaltflächen einführen.
Wie kommt die Palette aus dem Bild zustande?
Das Werkzeug tastet das Bild ab, fasst ähnliche Farbtöne in einem gemeinsamen Raster zusammen und gibt die häufigsten Gruppen als Palette aus. Das ist bewusst einfach gehalten und läuft dadurch sofort im Browser. Es findet die tragenden Farben eines Bildes zuverlässig, ist aber kein Ersatz für eine bewusst gesetzte Markenpalette.
Reicht es, den Kontrast einmal zu prüfen?
Nein. Prüfen Sie jede Kombination, die wirklich vorkommt: Text auf Weiß, Text auf der getönten Sektion, weiße Schrift auf der Schaltfläche, Linkfarbe auf beiden Untergründen. Der häufigste Fehler ist eine Farbe, die auf Weiß besteht und auf der grauen Fläche durchfällt.
Weitere Werkzeuge
Emoji-Suche
Emoji suchen und mit einem Klick kopieren
Schriften-Vorschau
Systemschriften mit eigenem Text vergleichen
Schriftart erkennen
Schrift aus einem Bild bestimmen
Alle Werkzeuge in der Übersicht, dazu passende Anleitungen im Ratgeber.