"

Für Web-Editor:innen

Kontraste der HfH-Farben

Damit farbiger Text gut lesbar ist, muss zwischen Schriftfarbe und  Texthintergrund ein ausreichend hoher Kontrast bestehen. Für barrierefreie Texte in Standardgrösse ist ein Farbkontrast von mindestens 4.5:1 erforderlich. Folgende Auflistung zeigt die exakten Kontrastwerte der HfH-Farben vor weissem respektive schwarzem Hintergrund.

Zu Weiss

Thunderbird Red, #BE1925: 6.25:1 – Thunderbird Red, #BE1925: 6.25:1 (Kontrast ausreichend)

Thunderbird Red Light, #E31826: 4.74:1 – Thunderbird Red Light, #E31826: 4.74:1 (Kontrast ausreichend)

Fantasy Dark, #D8757C: 3.1:1 – Fantasy Dark, #D8757C: 3.1:1 (Kontrast zu gering)

Fantasy Plain, #F2D1D3: 1.41:1 – Fantasy Plain, #F2D1D3: 1.41:1 (Kontrast zu gering)

Fantasy Pastel, #F8E8E9: 1.18:1 – Fantasy Pastel, #F8E8E9: 1.18:1 (Kontrast zu gering)

Fantasy Light, #FBF3F4: 1.09:1 – Fantasy Light, #FBF3F4: 1.09:1 (Kontrast zu gering)

Grey Light, #F4F4F4: 1.09:1 – Grey Light, #F4F4F4: 1.09:1 (Kontrast zu gering)

Grey Dark, #767676: 4.54:1 – Grey Dark, #767676: 4.54:1 (Kontrast ausreichend)

Green, #57751c: 5.29:1 – Green, #57751c: 5.29:1 (Kontrast ausreichend)

Turqoise, #14776c: 5.4:1 – Turqoise, #14776c: 5.4:1 (Kontrast ausreichend)

Blue, #427ca4: 4.51:1 – Blue, #427ca4: 4.51:1 (Kontrast ausreichend)

Orange, #b46100: 4.51:1 – Orange, #b46100: 4.51:1 (Kontrast ausreichend

Zu Schwarz

Thunderbird Red, #BE1925: 3.35:1 – Thunderbird Red, #BE1925: 3.35:1 (Kontrast zu gering)

Thunderbird Red Light, #E31826: 4.42:1 – Thunderbird Red Light, #E31826: 4.42:1 (Kontrast zu gering)

Fantasy Dark, #D8757C: 6.75:1 – Fantasy Dark, #D8757C: 6.75:1 (Kontrast ausreichend)

Fantasy Plain, #F2D1D3: 14.83:1 – Fantasy Plain, #F2D1D3: 14.83:1 (Kontrast ausreichend)

Fantasy Pastel, #F8E8E9: 17.71:1 – Fantasy Pastel, #F8E8E9: 17.71:1 (Kontrast ausreichend)

Fantasy Light, #FBF3F4: 19.22:1 – Fantasy Light, #FBF3F4: 19.22:1 (Kontrast ausreichend)

Grey Light, #F4F4F4: 19.22:1 – Grey Light, #F4F4F4: 19.22:1 (Kontrast ausreichend)

Grey Dark, #767676: 4.62:1 – Grey Dark, #767676: 4.62:1 (Kontrast ausreichend)

Green, #57751c: 3.96:1 – Green, #57751c: 3.96:1 (Kontrast zu gering)

Turqoise, #14776c: 3.88:1 – Turqoise, #14776c: 3.88:1 (Kontrast zu gering)

Blue, #427ca4: 4.65:1 – Blue, #427ca4: 4.65:1 (Kontrast ausreichend)

Orange, #b46100: 4.65:1 – Orange, #b46100: 4.65:1 (Kontrast ausreichend)

Kontraste Boxen Zuugs

Beispiele

Hellblau #dbeffd zu dunklerem Dunkelblau! #3a6f92: 4.59:1 (Kontrast ausreichend) (statt zu #427ca4: 3.82:1, Kontrast ungenügend).

Aufgaben

Hellrot #f8e8e9 (Fantasy Pastel) zu Thunderbird Red, #BE1925: 5.27:1 (Kontrast ausreichend)

Zusammenfassung

Helltürkis, #ecf9f7 zu Türkis, #14776c 5.01:1 (Kontrast ausreichend)

Lernziele

Hellgrün, #eef5e0 zu Grün, #57751c 4.73:1 (Kontrast ausreichend)

Weitere Kontraste zwischen bestimmten Farben

  • Hellorange/braun: #FFF0DB zu Orange/Braun #b46100: 4.02:1 (Kontrast zu gering)
  • Hellorange/braun: #FFF0DB zu Dunkelorange/braun: #A85A00 4.52:1 (Kontrast ausreichend)
  • NEU/DRAFT: #ff8800 für Maskottchen
  • Maskottchen zu Weiss: 2.39:1 (Kontrast zu gering), Maskottchen zu Schwarz: 8.77:1 (Kontrast ausreichend)

Zu Weiss UND zu Schwarz

Folgende Farben eignen sich für Text sowohl in Kombination mit Schwarz als auch mit Weiss, da sie einen Kontrast von > 4.5:1 aufweisen:

  • Grey Dark
  • Blue
  • Orange

Für graphische Elemente ist ein Farbkontrast von mindestens 3:1 erforderlich. Folgende Farben eignen sich für graphische Elemente sowohl in Kombination mit Schwarz als auch mit Weiss, da sie einen Kontrast von > 3:1 aufweisen:

  • Thunderbird Red
  • Thunderbird Red Light
  • Fantasy Dark
  • Grey Dark
  • Green
  • Turqoise
  • Blue
  • Orange

Lizenz

Icon für Creative Commons Namensnennung-Nicht kommerziell-Weitergabe unter gleichen Bedinungen 4.0 International

E-Accessibility an der HfH Copyright © 2022 by Interkantonale Hochschule für Heilpädagogik is licensed under a Creative Commons Namensnennung-Nicht kommerziell-Weitergabe unter gleichen Bedinungen 4.0 International, except where otherwise noted.