"

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 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

Thunderbird Red Light, #E31826: 4.74:1 – Thunderbird Red Light, #E31826: 4.74:1

Fantasy Dark, #D8757C: 3.1:1 – Fantasy Dark, #D8757C: 3.1:1

Fantasy Plain, #F2D1D3: 1.41:1 – Fantasy Plain, #F2D1D3: 1.41:1

Fantasy Pastel, #F8E8E9: 1.18:1 – Fantasy Pastel, #F8E8E9: 1.18:1

Fantasy Light, #FBF3F4: 1.09:1 – Fantasy Light, #FBF3F4: 1.09:1

Grey Light, #F4F4F4: 1.09:1 – Grey Light, #F4F4F4: 1.09:1

Grey Dark, #767676: 4.54:1 – Grey Dark, #767676: 4.54:1

Green, #57751c: 5.29:1 – Green, #57751c: 5.29:1

Turqoise, #14776c: 5.4:1 – Turqoise, #14776c: 5.4:1

Blue, #427ca4: 4.51:1 – Blue, #427ca4: 4.51:1

Orange, #b46100: 4.51:1 – Orange, #b46100: 4.51:1

Zu Schwarz

Thunderbird Red, #BE1925: 3.35:1 – Thunderbird Red, #BE1925: 3.35:1

Thunderbird Red Light, #E31826: 4.42:1 – Thunderbird Red Light, #E31826: 4.42:1

Fantasy Dark, #D8757C: 6.75:1 – Fantasy Dark, #D8757C: 6.75:1

Fantasy Plain, #F2D1D3: 14.83:1 – Fantasy Plain, #F2D1D3: 14.83:1

Fantasy Pastel, #F8E8E9: 17.71:1 – Fantasy Pastel, #F8E8E9: 17.71:1

Fantasy Light, #FBF3F4: 19.22:1 – Fantasy Light, #FBF3F4: 19.22:1

Grey Light, #F4F4F4: 19.22:1 – Grey Light, #F4F4F4: 19.22:1

Grey Dark, #767676: 4.62:1 – Grey Dark, #767676: 4.62:1

Green, #57751c: 3.96:1 – Green, #57751c: 3.96:1

Turqoise, #14776c: 3.88:1 – Turqoise, #14776c: 3.88:1

Blue, #427ca4: 4.65:1 – Blue, #427ca4: 4.65:1

Orange, #b46100: 4.65:1 – Orange, #b46100: 4.65:1

Kontraste Boxen Zuugs

Beispiele

Hellblau #dbeffd zu dunklerem Dunkelblau! #3a6f92: 4.59:1 (statt zu #427ca4: 3.82:1).

Aufgaben

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

Zusammenfassung

Helltürkis, #ecf9f7 zu Türkis, #14776c 5.01:1

Lernziele

Hellgrün, #eef5e0 zu Grün, #57751c 4.73:1

Weitere Kontraste zwischen bestimmten Farben

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

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.