Kostenloser Online-Kontrastprüfer (WCAG)

WCAG AA verlangt mindestens 4.5:1 für normalen Text und 3:1 für großen Text. Icons, Eingabefeldränder und andere UI-Teile brauchen 3:1 gegenüber den angrenzenden Farben. AAA hebt die Textregeln auf 7:1 für normalen und 4.5:1 für großen Text an.

Die Rot-, Grün- und Blauwerte jeder Farbe werden in lineares Licht umgerechnet und zu einer relativen Luminanz gewichtet. Das Verhältnis ergibt sich aus der helleren Luminanz plus 0.05, geteilt durch die dunklere plus 0.05, und reicht damit von 1:1 für dieselbe Farbe bis 21:1 für Schwarz auf Weiß.

Großer Text ist mindestens 18pt (24px) in normaler Schrift oder 14pt (etwa 18.66px) fett. Er braucht für AA nur 3:1 und für AAA 4.5:1. Der Checker fragt nicht nach einer Schriftgröße. Beachten Sie die Zeilen für großen Text daher nur, wenn Ihr Text so groß ist.

AA ist die Stufe, auf die die meisten Gesetze und Richtlinien verweisen, darunter EN 301 549 in der EU und die US-Regelung von 2024 für Websites von Bundesstaaten und Kommunen, die beide WCAG 2.1 AA verwenden. AAA ist strenger und ein gutes Ziel für lange Lesetexte.

Sie testet die 3:1-Regel für Nicht-Text-Teile, WCAG-Erfolgskriterium 1.4.11. Nutzen Sie sie für Icon-Farben, Eingabefeldränder, Fokusrahmen und Diagrammlinien. Tragen Sie die Farbe des Teils in das Feld für die Textfarbe ein und die Farbe dahinter in das Feld für den Hintergrund.

Das angezeigte Verhältnis wird auf zwei Nachkommastellen gerundet, die Prüfungen verwenden jedoch den exakten Wert, wie es WCAG verlangt. Grau #959595 auf Weiß ergibt 2.995:1, wird also als 3.00:1 angezeigt und besteht die 3:1-Zeilen trotzdem nicht. Dunkeln Sie die Farbe etwas ab, damit sie besteht.

Er liest nur 6-stellige Hex-Codes, mit oder ohne #. Kurze Codes wie #fff, 8-stellige Codes mit Transparenz, rgb(), hsl() und Farbnamen ergeben 0.00:1 und bestehen keine Zeile. Schreiben Sie #fff als #ffffff. Ein falscher Buchstabe, wie in #12345g, wird ohne Warnung als andere Farbe gelesen.

21:1, also reines Schwarz #000000 auf reinem Weiß #ffffff. Zwei identische Farben ergeben 1:1, den niedrigsten Wert. Das hier voreingestellte Paar, #1a1a1a auf Weiß, erreicht 17.40:1, und mittleres Grau #767676 auf Weiß liegt bei 4.54:1, knapp über der AA-Grenze von 4.5:1.

Nicht direkt, da jeweils eine einfarbige Fläche mit einer anderen verglichen wird. Suchen Sie bei Text auf einem Verlauf oder Bild die Stelle hinter dem Text, deren Helligkeit der Textfarbe am nächsten kommt. Geben Sie diese Farbe als Hintergrund ein und prüfen Sie sie.

Nein. Es verwendet das Kontrastverhältnis nach WCAG 2.x, auf dem WCAG 2.1, WCAG 2.2 und die aktuellen Gesetze beruhen. APCA ist ein Entwurf für das künftige WCAG 3, der Text nach Größe und Schriftstärke bewertet. Dieses Tool berechnet ihn nicht.

Ja. Er ist kostenlos, ohne Konto und ohne Begrenzung der Prüfungen. Die von Ihnen eingegebenen Farben bleiben in Ihrem Browser und werden nicht gespeichert. Auf der Live-Website zählt Google Analytics die Klicks auf „Verhältnis kopieren“, nie die Farben oder das Verhältnis.