18 Jul
Rot-Grün Testbild

Farbblindenmodus für den Browser

Wer gerne mal die Farben Rot und Grün durcheinander bringt, etwa weil er unter einer erblichen Rot-Grüne-Schwäche leidet, der ist auf den sogenannten Farbblindenmodus angewiesen, wie er mittlerweile in vielen Computerspielen angeboten wird. Dabei werden dann statt Grün/Rot für verbündete und feindliche Spieler die Farben Blau und Gelb genutzt, die von rot-grün-schwachen Augen unterschieden werden können. Besonders bei Diagrammen mit feinen Linien, lassen sich rote und grüne Nuancen nur schwer unterscheiden, wenn die beiden Farbwerte eine ähnliche Helligkeit aufweisen.

Mit einer Farbtonrotation im HSL-Farbraum können Farbwerte so verdreht werden, dass Rot zu Grün und Grün zu Blau wird. Ein Farbwert im HSL-Raum besteht aus diesen drei Werten:

  • Farbwert H, angegeben als Winkel von 0° bis 360°
  • Sättigung S, von 0% für Grau bis 100% für volle Farbe
  • Helligkeit L, von 0% für sehr dunkel bis 100 % für sehr hell

Für den Farbwert ist folgende Verteilung definiert:
Farbtonskala

Mit dem CSS-Attribut filter lässt sich eine Farbwert-Rotation um einen bestimmten Winkel durchführen. Da sich noch um ein relativ neues CSS-Feature handelt, muss in Blink-basierten Browsern wie Chrome, Opera und Vivaldi das -webkit-Präfix genutzt werden.

body {
  /* Für Firefox und Edge */
  filter: hue-rotate(90deg);

  /* Für Chrome, Opera und Vivaldi */
  -webkit-filter: hue-rotate(90deg);
}

Um die Farbverschiebung schnell ausführen zu können, können im Browser zwei Bookmarks angelegt werden, die die entsprechenden Styles am aktuellen Tab aktivieren bzw. deaktivieren.

Bookmarks für Chrome

Diese Links kann man direkt in die Lesenzeichenleiste ziehen: ON OFF

Zum Aktivieren:

javascript:(function(){document.body.style.webkitFilter="hue-rotate(90deg)";})()

Zum Deaktivieren:

javascript:(function(){document.body.style.webkitFilter="hue-rotate(0deg)";})()

Bookmarks für Firefox und Edge

Diese Links kann man direkt in die Lesezeichenleiste ziehen: ON OFF

Zum Aktivieren:

javascript:(function(){document.body.style.filter="hue-rotate(90deg)";})()

Zum Deaktivieren:

javascript:(function(){document.body.style.filter="hue-rotate(0deg)";})()

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.