🌓Farbkontrast-Checker

Was ist Kontrastverhältnis?

Das Kontrastverhältnis ist eine Kennzahl, die den Helligkeitsunterschied zwischen einer Textfarbe und einer Hintergrundfarbe auf einer Skala von 1:1 bis 21:1 ausdrückt. Die Kombination von Schwarz und Weiß erreicht das Maximum von 21:1, während die gleiche Farbe das Minimum von 1:1 ergibt.

• Berechnungsmechanismus：Das Kontrastverhältnis wird berechnet, indem zwei Farben in die relative Helligkeit des sRGB-Farbraums konvertiert werden und dann (hellere Helligkeit + 0,05) durch (dunklere Helligkeit + 0,05) dividiert wird.
• Zahlenwerte als Orientierung：Auf weißem Hintergrund (#FFFFFF) hat Grau #777777 ein Kontrastverhältnis von 4,47:1, #999999 von 2,84:1 und Schwarz (#000000) von 21:1.

Unterschied zwischen WCAG AA und AAA

WCAG ist ein internationaler Leitfaden für die Barrierefreiheit von Webinhalten und definiert Kontrastverhältnis-Bestandensgrenzen in zwei Stufen: AA und AAA.

• AA (Standard-Stufe)：AA erfordert mindestens 4,5:1 für normalen Text und mindestens 3,0:1 für großen Text und ist der Standard, auf den sich typische Websites ausrichten
• AAA (striktere Stufe)：AAA erfordert mindestens 7:1 für normalen Text und mindestens 4,5:1 für großen Text und zielt auf Lesbarkeit auch für Menschen mit niedriger Sehkraft ab

Definition von großem Text

Großer Text nach WCAG bezieht sich auf Text, der ungefähr 18 Punkte (24px) oder größer ist, oder fett gedruckter Text mit mindestens 14 Punkten (etwa 18,7px).

• Normaler Text：Normaler Text ist Text, der nicht die Größe für großen Text erfüllt, wie z.B. Fließtext oder Fußnoten, und erfordert ein Kontrastverhältnis von mindestens 4,5:1.
• Beziehung zu Überschriften：Überschriften unter 24px, die nicht fett sind, werden als normaler Text behandelt, daher müssen sowohl Größe als auch Gewicht überprüft werden.