So benutzt du den Prüfer
- Wähl eine Textfarbe und eine Hintergrundfarbe oder füg ihre Codes ein.
- Lies das Kontrastverhältnis und die vier Ergebnisse darunter.
- Schau dir die Vorschau an. Sie zeigt großen Text, normalen Text und Kleingedrucktes in deinen Farben.
- Besteht eine Stufe nicht, zeigt der Prüfer die nächste Textfarbe und den nächsten Hintergrund, die bestehen. Drück auf Übernehmen, um eine auszuprobieren.
Tauschen dreht die Farben um, zum Beispiel für weißen Text auf einem farbigen Button. Die Farben stecken auch in der Adresse der Seite, du kannst den Link also an jemanden schicken.
Was die Zahlen bedeuten
Das Kontrastverhältnis vergleicht, wie hell die beiden Farben sind, von 1:1 (dieselbe Farbe) bis 21:1 (Schwarz auf Weiß). WCAG 2.2, die Regeln, auf die sich die meisten Barrierefreiheitsgesetze beziehen, setzt diese Mindestwerte:
- AA, normaler Text: 4,5:1. Die Stufe, die du auf Websites, in E-Mails und Posts anpeilen solltest.
- AA, großer Text: 3:1. Für Text ab 24 px oder 18,66 px in Fett.
- AAA, normaler Text: 7:1. Die strengere Stufe, gut für lange Texte.
- AAA, großer Text: 4,5:1.
Buttons, Icons und die Ränder von Formularfeldern brauchen 3:1 gegenüber dem, was daneben liegt. WCAG rundet nie auf, 4,49:1 besteht AA also nicht. Der Prüfer rundet aus demselben Grund ab.
So wird der Vorschlag gefunden
Der Prüfer behält Farbton und Stärke deiner Farbe und ändert nur ihre Helligkeit, dunkler oder heller, bis das Verhältnis besteht. Er macht das in OKLCH, wo ein Helligkeitsschritt bei jeder Farbe gleich aussieht, und wählt die kleinste Änderung. Dein Blau bleibt Blau, nur etwas tiefer. Erreicht keine Helligkeit in diesem Farbton die Stufe, sagt er das, und der Ausweg ist, die andere Farbe zu ändern.
In sozialen Medien
Ein Post wird oft auf einem kleinen Handy in der Sonne gesehen, im Vorbeigehen. Peil für jede Textzeile in einem Bild mindestens 4,5:1 an, auch für die große Überschrift. Text auf einem Foto hat einen Hintergrund, der sich von Buchstabe zu Buchstabe ändert, setz ihn also auf eine ruhige Stelle im Foto oder auf eine einfarbige Fläche.
Nutz ihn im Design-Editor von Postfjord
Lege im Design-Editor deine Markenfarben einmal unter Einstellungen, Marke fest. Mischen probiert andere Mischungen deiner eigenen Farben und setzt Text nie auf eine Farbe, auf der er schwer zu lesen ist. Marke anwenden behält die Farbe von Text, der direkt auf einem Foto sitzt, damit er leicht lesbar bleibt. Prüf hier ein Paar, bevor du es in deiner Marke speicherst.
FAQ
Welches Kontrastverhältnis brauche ich?
4,5:1 für normalen Text und 3:1 für großen Text erfüllen WCAG 2.2 AA, die Stufe, die die meisten Gesetze und Richtlinien verlangen. 7:1 erfüllt AAA.
Was zählt als großer Text?
Text ab 18 Punkt, etwa 24 Pixel, oder ab 14 Punkt in Fett, etwa 18,66 Pixel.
Warum sieht meine Farbe gut aus und besteht trotzdem nicht?
Dein Bildschirm, das Licht im Raum und deine Augen unterscheiden sich alle von denen deiner Leser. Das Verhältnis ist ein Maß, das auch für Menschen mit schwächerer Sehkraft funktioniert und für ein Handy in der Sonne.
Funktioniert der Prüfer für WCAG 3?
Nein. WCAG 3 ist noch ein Entwurf, und seine neue Kontrastmethode, APCA, kann sich ändern. Der Prüfer nutzt WCAG 2.2, den heutigen Standard.
Speichert der Prüfer meine Farben?
Nein. Er läuft in deinem Browser. Die Farben stehen nur in der Adresse der Seite, und nichts wird an Postfjord gesendet.