Farbkontrast-Checker

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.

Die WCAG 2 Kontrastformel ist ein Verhältnis der relativen Luminanz, und ihre Schwellenwerte sind, woran Barrierefreiheitsaudits und die meisten rechtlichen Anforderungen gemessen werden, so ist es die richtige Zahl zu entwerfen Es ist auch bekannt, dass es unvollkommen ist: Es kann großzügig sein, um hellen Text auf dunklen Hintergründen und hart auf einige Mitteltonpaare, weshalb der Nachfolgealgorithmus, APCA, existiert und wird für zukünftige Versionen getestet Großer Text hat einen unteren Balken, und groß bedeutet 18 pt, oder 14 pt, wenn fett, was etwa 24 px und 18,66 px ist. Nicht-Textelemente werden separat von 1.4.11 bei 3:1 behandelt, wobei Absatz-Eingabe-Knoppen am meisten fehlgeschlagen werden, und das ist, kann es am meisten fehlen, und die Eingabekennungen und die Eingabekennungen.