Generatoren Dienstprogramm

100 % auf dem Gerät • Dateien verlassen niemals Ihren Browser

Farbwähler und Kontrastprüfer

Wählen Sie Vordergrund- und Hintergrundfarben aus und überprüfen Sie den Kontrast zwischen ihnen, bevor Sie sie versenden. Die Vorschau zeigt das Paar als echten Text, sodass Sie die Lesbarkeit direkt beurteilen können, anstatt anhand von Hex-Codes zu raten.

Live Text Contrast Preview

Sample paragraph text demonstrating visual contrast between selected text and background colors.

WCAG Contrast Ratio

13.98 : 1

AA: Pass ✓AAA: Pass ✓

Text Color (Foreground)

Background Color

Wie es funktioniert

1
Wählen Sie eine Vordergrundfarbe (Textfarbe).
2
Wählen Sie die Hintergrundfarbe, auf der es platziert werden soll.
3
Lesen Sie die Vorschau als tatsächlichen Text in echten Größen und nicht als zwei Farbfelder.
4
Kopieren Sie die Werte in Ihr Stylesheet, Ihre Design-Token-Datei oder Ihre Theme-Konfiguration.

Hauptvorteile und Vorteile

Im Kontext beurteilt

Farben werden als Text auf einem Hintergrund dargestellt, nur so lässt sich erkennen, ob eine Paarung wirklich lesbar ist.

Barrierefreiheitsorientiert

Kontrastprobleme werden offensichtlich, bevor sie Benutzer oder eine Prüfung der Barrierefreiheit erreichen.

Kopierbereite Werte

Übernehmen Sie die Hex-Werte direkt in CSS, eine Design-Token-Datei oder ein Komponentenbibliotheksthema.

Sofortige Iteration

Passen Sie eine der Farben an und sehen Sie den Effekt sofort, ohne dass Sie etwas erstellen oder neu laden müssen.

Wofür die Leute es verwenden

Überprüfen Sie die Farbpaarung einer Marke, bevor sie in einem Designsystem landet.
Korrektur von Text mit geringem Kontrast, der in einem Lighthouse- oder Barrierefreiheitsbericht gekennzeichnet ist.
Wählen Sie lesbare Link- und Textfarben für ein helles und ein dunkles Thema.
Dokumentieren eines Farbpaars in einem Styleguide mit den genauen Hex-Werten.

Unterstützte Formate und Optionen

Farbeingabe	Hex-Werte über den nativen Farbwähler oder direkte Eingabe
Vorschau	Live-Vordergrund-Hintergrund-Textbeispiel

Datenschutz und Datenverarbeitung

Farbauswahl und Vorschau erfolgen vollständig auf der Seite. Es werden keine Werte an einen Server gesendet oder über die aktuelle Registerkarte hinaus gespeichert.

Grenzen und Wissenswertes

Die Kontrastanforderungen hängen von der Textgröße und -stärke ab – großer Text hat einen niedrigeren Schwellenwert als Fließtext, also beurteilen Sie die Paarung anhand der Größe, die Sie tatsächlich verwenden werden.
Das Tool prüft ein einzelnes Vordergrund- und Hintergrundpaar. Text über einem Bild oder Farbverlauf weist eine Reihe von Kontrasten auf und muss mit dem schlechtesten Teil verglichen werden.
Die Wahl der Farbe wirkt sich auch auf Benutzer mit Farbsehbehinderungen aus. Verlassen Sie sich niemals allein auf den Farbton, um Bedeutung zu vermitteln.

Fehlerbehebung

Die Farbe sieht in der App anders aus als hier

Deckkraft, Mischmodi und ein übergeordneter Hintergrund können die gerenderte Farbe verändern. Vergleichen Sie die berechnete Farbe in den Devtools des Browsers und nicht die deklarierte.

Der Picker lässt sich nicht öffnen

Für die native Farbeingabe ist ein Browser erforderlich, der den Eingabetyp=Farbe unterstützt. Geben Sie den Hexadezimalwert direkt ein, wenn das Farbfeld nicht geöffnet wird.

Pick a colour and get its HEX, RGB, HSL and CSS values instantly, or pull an exact colour out of an uploaded image. A free online color picker and converter for web design, brand palettes and CSS work.

HEX, RGB and HSL together — every format is shown at once and stays in sync, so you can copy whichever one your stylesheet, design tool or brand guide expects.
Color picker from image — upload a screenshot, logo or photograph and sample the exact pixel value — the reliable way to match an existing brand colour.
CSS-ready output — values copy in valid CSS syntax, ready to paste into a custom property, a Tailwind config or a component style.
Build consistent palettes — adjust hue, saturation and lightness numerically to derive tints and shades that actually belong to the same colour family.
Images stay on your device — sampling happens on a canvas in your browser, so unreleased mockups and client artwork are never uploaded.

Free with no sign-up. Turn a chosen colour into a frosted CSS panel with the Glassmorphism Generator.

Häufig gestellte Fragen

What contrast ratio do I need?

WCAG AA asks for 4.5:1 for body text and 3:1 for large text (roughly 24px, or 19px bold). Judge the pairing at the size you will actually ship, since the threshold changes with it.

Why does the colour look different in my app?

Opacity, blend modes and a parent background all shift the rendered result. Check the computed colour in browser devtools rather than the value you declared.

Is contrast enough for accessibility?

It is necessary, not sufficient. Also avoid using colour alone to convey meaning — add an icon, label or pattern so the information survives for users who cannot distinguish the hues.

Was ist ein gutes WCAG-Kontrastverhältnis?

Für normalen Text gemäß den WCAG AA-Standards ist ein Kontrastverhältnis von 4,5:1 erforderlich.

Welches Kontrastverhältnis benötige ich?

WCAG AA verlangt 4,5:1 für Fließtext und 3:1 für großen Text (ungefähr 24 Pixel oder 19 Pixel fett). Beurteilen Sie die Paarung anhand der Größe, die Sie tatsächlich versenden, da sich damit auch der Schwellenwert ändert.

Warum sieht die Farbe in meiner App anders aus?

Deckkraft, Mischmodi und ein übergeordneter Hintergrund verändern das gerenderte Ergebnis. Überprüfen Sie die berechnete Farbe in den Browser-Devtools und nicht den von Ihnen deklarierten Wert.

Reicht der Kontrast für Barrierefreiheit aus?

Es ist notwendig, nicht ausreichend. Vermeiden Sie außerdem die alleinige Verwendung von Farben zur Vermittlung von Bedeutungen – fügen Sie ein Symbol, eine Beschriftung oder ein Muster hinzu, damit die Informationen für Benutzer erhalten bleiben, die die Farbtöne nicht unterscheiden können.