Der Farbkontrast-Checker misst das Kontrastverhältnis zwischen einer Vordergrundfarbe (Text) und einer Hintergrundfarbe und gibt an, ob dieses Paar den Richtlinien für die Barrierefreiheit von Webinhalten entspricht. Es meldet eine einzelne Zahl zwischen 1: 1 und 21: 1 und bewertet sie gegen die WCAG 2.2-Schwellenwerte für AA und AAA sowohl bei normalen als auch bei großen Textgrößen sowie dem separaten 3:1-Schwellenwert für Benutzeroberflächenkomponenten und Grafiken.
Kontrast ist der Unterschied in der relativen Leuchtdichte zwischen zwei Farben, nicht nur wie unterschiedlich sie aussehen. Zwei Farben können sich deutlich anfühlen, während Leser mit Sehbehinderung, Farbsehenssen oder Personen, die ein Telefon bei hellem Sonnenlicht verwenden, immer noch ausfallen. Das Verhältnis wird mit der von WCAG definierten Formel für relative Luminanz von sRGB berechnet, sodass das Ergebnis den von den Benutzern von Auditierungstools und Bildschirmleseren anbelangten Benutzern entspricht und nicht einer groben visuellen Vermutung.
Alles läuft in Ihrem Browser. Geben Sie Farben wie Hex, RGB, HSL oder ein CSS-Schlüsselwort ein oder fügen Sie sie ein. Sehen Sie sich eine Live-Textvorschau-Update an. Wenn ein Paar fehlschlägt, können Sie eine vorgeschlagene Farbe anwenden, die überschritten wird. Es wird nichts hochgeladen, es wird keine Anmeldung durchgeführt und das Tool funktioniert nach dem Laden der Seite weiter offline.
Geben Sie die Vordergrundfarbe in einem beliebigen Format ein oder fügen Sie sie ein: # 1A1A1A, RGB (26,26,26), HSL (0,0%, 10%) oder ein Schlüsselwort wie Navy. Ein Farbfeld und ein natives Picker lassen Sie es fein einstellen.
Stellen Sie den Hintergrund ein, auf dem der Text sitzt. Wenn Ihre Textfarbe Transparenz hat, wird sie über diesen Hintergrund gemischt, bevor das Verhältnis gemessen wird und den tatsächlichen Benutzern entspricht.
Das genaue Kontrastverhältnis wird bei normalen und großen Größen mit Pass- oder Fail-Badges für AA und AAA sowie bei der 3: 1-UI-Komponentenprüfung angezeigt, die alle neben einem Live-Textmuster auf Ihrem Hintergrund stehen.
Wenn eine Kombination fehlschlägt, wenden Sie die vorgeschlagene Farbe an – das Werkzeug stößt den Text heller oder dunkler an, bis Sie Ihre Zielstufe aufräumen, und Sie können den festen Wert kopieren.
Verwendet die offiziellen sRGB-Formel für relative Luminanz und Kontrastverhältnisse aus WCAG 2.2, sodass die Zahl formale Audits auf zwei Dezimalstellen übereinstimmt, anstatt sich zu approximieren
Jedes Ergebnis wird nach AA (4,5:1), AAA (7:1), den Großtextschwellen (3:1 und 4,5:1) und der 3:1-Regel für Nicht-Text-UI-Komponenten und grafische Objekte bewertet.
Eine echte Auswahl normaler und großer Textrender auf dem ausgewählten Hintergrund während der Eingabe, sodass Sie die Lesbarkeit neben der numerischen Bewertung beurteilen können
Wenn ein Paar ausfällt, wandert das Tool in HSL die Textfarbe heller oder dunkler, bis es Ihr Zielverhältnis erreicht und bietet einen Übergabewert, den Sie mit einem Klick anwenden können
Pick colors and convert between HEX, RGB, and HSL formats
Create beautiful CSS gradients with live preview
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset — then copy production-ready CSS.
0 comments
No comments yet. Be the first to share your thoughts!