Lesbare Textfarben finden
Finde lesbare Textfarben für deinen Hintergrund, mit WCAG-Kontrastverhältnissen und Live-Vorschau.
Das könnte dir auch helfen: Website-Farbpalette als Vorschau , Zufällige Farbverläufe erstellen , Generator für 5-Farben-Paletten und weitere
Wähle deinen Hintergrund
Gib 3 oder 6 Hexadezimalzeichen mit oder ohne # ein, etwa #FFF oder #1E3A8A. Nur einfarbige sRGB-Werte.
Großer Text bedeutet mindestens 24 CSS-Pixel bei normaler Schriftstärke oder 18⅔ CSS-Pixel bei Fettschrift. Die Vorschau für großen Text nutzt 24 Pixel.
Vorschläge für Textfarben
Erstelle Vorschläge, um lesbare Textfarben für deinen Hintergrund zu sehen.
Die Vorschläge werden aus einer festen Palette mit Schwarz, Weiß, Grautönen und bunten Farben gefiltert. Nur passende Farben erscheinen. Die Auswahl umfasst nicht alle möglichen RGB-Farben. Höhere Anforderungen können die Ergebnisse verringern. Änderungen am Hintergrund oder an der Anforderung löschen die bisherigen Ergebnisse.
Angezeigte Verhältnisse sind auf zwei Nachkommastellen gerundet. Sie verwenden die sRGB-Formel aus WCAG 2 und werden ungerundet verglichen. Die Ergebnisse bewerten nur den Textkontrast dieses einfarbigen Farbpaares. Schriftwahl, Deckkraft, Bilder, Verläufe und die übrige Seite müssen gesondert geprüft werden.
So findest du lesbare Textfarben
- Gib deine einfarbige Hintergrundfarbe als HEX-Wert ein oder nutze die Farbauswahl.
- Wähle AA für normalen Text (4,5:1), AAA für normalen Text (7:1) oder AA für großen Text (3:1) und erstelle Vorschläge.
- Gib einen eigenen Vorschautext ein, vergleiche Farben und Kontrastverhältnisse und kopiere einen HEX-Wert oder die CSS-Deklarationen für Text und Hintergrund.
Ideen für Textfarben in deinem Design
- Nutze #FFFFFF als Hintergrund, um dunkle Textfarben für eine Firmenwebsite oder ein Bestellformular zu entdecken.
- Nutze #1E3A8A, um helle Textfarben für eine Navigation oder Dashboard-Kopfzeile zu finden.
- Probiere #777777 mit dem Schwellenwert 7:1 aus. So siehst du, warum manche mittleren Hintergrundtöne keinen AAA-Kontrast für normalen Text ermöglichen.
Häufige Fragen
Wie unterscheidet sich das von einer Kontrastprüfung?
Dieser Generator beginnt mit einem Hintergrund und schlägt Textfarben vor, die deinen gewählten Schwellenwert erfüllen. Eine Kontrastprüfung bewertet ein bereits gewähltes Paar aus Text- und Hintergrundfarbe.
Warum kann das AAA-Ergebnis leer sein?
Manche mittleren Hintergrundtöne erreichen mit keiner Textfarbe 7:1. Schwarz und Weiß bilden die dunkelsten und hellsten Endpunkte. Wenn beide scheitern, kann keine deckende sRGB-Textfarbe den Schwellenwert erfüllen. Ein anderer Hintergrund kann helfen.
Reicht 3:1 für normalen Fließtext?
Nein. Für normalen Text verlangt AA mindestens 4,5:1. Die Option 3:1 gilt für großen Text: mindestens 18 pt (24 CSS-Pixel) bei normaler Schriftstärke oder 14 pt (18⅔ CSS-Pixel) bei Fettschrift.
Macht eine passende Farbe meine gesamte Website barrierefrei?
Nein. Diese Berechnungen betreffen den Textkontrast eines deckenden, einfarbigen sRGB-Paares. Prüfe tatsächliche Typografie, Fokuszustände, Inhalte, Tastaturbedienung, Bilder und weitere Anforderungen an die Barrierefreiheit gesondert.
Werden meine Farben oder Vorschautexte hochgeladen?
Berechnung und Vorschau laufen im Browsertab. Dieses Tool speichert deine Farben und Vorschautexte nicht und nimmt sie nicht in Analyseereignisse auf. Beim Kopieren wird nur der gewünschte HEX-Wert oder CSS-Code in die Zwischenablage geschrieben.
Deine Hintergrundfarbe, der Vorschautext und die Ergebnisse bleiben in diesem Browsertab. Das Tool speichert sie nicht und nimmt sie nicht in Analyseereignisse auf. Kopiere einen HEX-Wert oder CSS-Code, wenn du ihn behalten möchtest.
Ist dieses Tool hilfreich? Teile es mit deinem Team und beschleunige eure Arbeit.
Gefällt es dir, tippe auf . Braucht es Verbesserungen, tippe auf , damit wir Updates priorisieren können.