{"id":459,"date":"2023-12-14T20:02:20","date_gmt":"2023-12-14T19:02:20","guid":{"rendered":"https:\/\/digital.hfh.ch\/eaccessibility\/?post_type=chapter&p=459"},"modified":"2026-08-26T15:35:05","modified_gmt":"2026-08-26T13:35:05","slug":"kontraste-der-hfh-farben","status":"publish","type":"chapter","link":"https:\/\/digital.hfh.ch\/eaccessibility\/chapter\/kontraste-der-hfh-farben\/","title":{"raw":"Kontraste der HfH-Farben","rendered":"Kontraste der HfH-Farben"},"content":{"raw":"Damit farbiger Text gut lesbar ist, muss zwischen Schriftfarbe und\u00a0 Texthintergrund ein ausreichend hoher Kontrast bestehen. F\u00fcr barrierefreie Texte in Standardgr\u00f6sse ist ein Farbkontrast von mindestens 4.5:1 erforderlich.<\/strong> Folgende Auflistung zeigt die exakten Kontrastwerte der HfH-Farben vor weissem respektive schwarzem Hintergrund.<\/span>\r\n

Zu Weiss<\/h2>\r\n

Thunderbird Red, #BE1925: 6.25:1<\/strong><\/span> \u2013 Thunderbird Red, #BE1925: 6.25:1 (Kontrast ausreichend)<\/strong><\/span><\/p>\r\nThunderbird Red Light, #E31826: 4.74:1<\/strong><\/span> \u2013 Thunderbird Red Light, #E31826: 4.74:1 (Kontrast ausreichend)<\/strong><\/span>\r\n\r\nFantasy Dark, #D8757C: 3.1:1<\/strong><\/span> \u2013 Fantasy Dark, #D8757C: 3.1:1 (Kontrast zu gering)<\/strong><\/span>\r\n\r\nFantasy Plain, #F2D1D3: 1.41:1<\/strong><\/span> \u2013 Fantasy Plain, #F2D1D3: 1.41:1 (Kontrast zu gering)<\/strong><\/span>\r\n\r\nFantasy Pastel, #F8E8E9: 1.18:1<\/strong><\/span> \u2013 Fantasy Pastel, #F8E8E9: 1.18:1 (Kontrast zu gering)<\/strong><\/span>\r\n\r\nFantasy Light, #FBF3F4: 1.09:1<\/strong><\/span> \u2013 Fantasy Light, #FBF3F4: 1.09:1 (Kontrast zu gering)<\/strong><\/span>\r\n\r\nGrey Light, #F4F4F4: 1.09:1<\/strong><\/span> \u2013 Grey Light, #F4F4F4: 1.09:1 (Kontrast zu gering)<\/strong><\/span>\r\n\r\nGrey Dark, #767676: 4.54:1<\/strong><\/span> \u2013 Grey Dark, #767676: 4.54:1 (Kontrast ausreichend)<\/strong><\/span>\r\n\r\nGreen, #57751c: 5.29:1<\/strong><\/span> \u2013 Green, #57751c: 5.29:1 (Kontrast ausreichend)<\/strong><\/span>\r\n\r\nTurqoise, #14776c: 5.4:1<\/strong><\/span> \u2013 Turqoise, #14776c: 5.4:1 (Kontrast ausreichend)<\/strong><\/span>\r\n\r\nBlue, #427ca4: 4.51:1<\/strong><\/span> \u2013 Blue, #427ca4: 4.51:1 (Kontrast ausreichend)<\/strong><\/span>\r\n\r\nOrange, #b46100: 4.51:1<\/strong><\/span> \u2013 Orange, #b46100: 4.51:1 (Kontrast ausreichend<\/strong><\/span>\r\n

Zu Schwarz<\/h2>\r\n

Thunderbird Red, #BE1925: 3.35:1<\/strong><\/span> \u2013 Thunderbird Red, #BE1925: 3.35:1 (Kontrast zu gering)<\/strong><\/span><\/p>\r\nThunderbird Red Light, #E31826: 4.42:1<\/strong><\/span> \u2013 Thunderbird Red Light, #E31826: 4.42:1 (Kontrast zu gering)<\/strong><\/span>\r\n\r\nFantasy Dark, #D8757C: 6.75:1<\/strong><\/span> \u2013 Fantasy Dark, #D8757C: 6.75:1 (Kontrast ausreichend)<\/strong><\/span>\r\n\r\nFantasy Plain, #F2D1D3: 14.83:1<\/strong><\/span> \u2013 Fantasy Plain, #F2D1D3: 14.83:1 (Kontrast ausreichend)<\/strong><\/span>\r\n\r\nFantasy Pastel, #F8E8E9: 17.71:1<\/strong><\/span> \u2013 Fantasy Pastel, #F8E8E9: 17.71:1 (Kontrast ausreichend)<\/strong><\/span>\r\n\r\nFantasy Light, #FBF3F4: 19.22:1<\/strong><\/span> \u2013 Fantasy Light, #FBF3F4: 19.22:1 (Kontrast ausreichend)<\/strong><\/span>\r\n\r\nGrey Light, #F4F4F4: 19.22:1<\/strong><\/span> \u2013 Grey Light, #F4F4F4: 19.22:1 (Kontrast ausreichend)<\/strong><\/span>\r\n\r\nGrey Dark, #767676: 4.62:1<\/strong><\/span> \u2013 Grey Dark, #767676: 4.62:1 (Kontrast ausreichend)<\/strong><\/span>\r\n\r\nGreen, #57751c: 3.96:1 <\/strong><\/span> \u2013 Green, #57751c: 3.96:1 (Kontrast zu gering)<\/strong><\/span>\r\n\r\nTurqoise, #14776c: 3.88:1<\/strong><\/span> \u2013 Turqoise, #14776c: 3.88:1 (Kontrast zu gering)<\/strong><\/span>\r\n\r\nBlue, #427ca4: 4.65:1<\/strong><\/span> \u2013 Blue, #427ca4: 4.65:1 (Kontrast ausreichend)<\/strong><\/span>\r\n\r\nOrange, #b46100: 4.65:1<\/strong><\/span> \u2013 Orange, #b46100: 4.65:1 (Kontrast ausreichend)<\/strong><\/span>\r\n

Kontraste Boxen Zuugs<\/h2>\r\n
\r\n

Beispiele<\/p>\r\n\r\n<\/header>\r\n

\r\n\r\nHellblau #dbeffd zu dunklerem Dunkelblau! #3a6f92: 4.59:1 (Kontrast ausreichend)<\/strong><\/span>\u00a0(statt zu #427ca4: 3.82:1, Kontrast ungen\u00fcgend<\/strong>).<\/span>\r\n\r\n<\/div>\r\n<\/div>\r\n
\r\n

Aufgaben<\/p>\r\n\r\n<\/header>\r\n

\r\n\r\nHellrot #f8e8e9 (Fantasy Pastel) zu Thunderbird Red, #BE1925: 5.27:1 (Kontrast ausreichend)<\/strong><\/span>\r\n\r\n<\/div>\r\n<\/div>\r\n
\r\n

Zusammenfassung<\/p>\r\n\r\n<\/header>\r\n

Hellt\u00fcrkis, #ecf9f7 zu T\u00fcrkis, #14776c 5.01:1 (Kontrast ausreichend)<\/strong><\/span><\/div>\r\n<\/div>\r\n
\r\n

Lernziele<\/p>\r\n\r\n<\/header>\r\n

Hellgr\u00fcn, #eef5e0 zu Gr\u00fcn, #57751c 4.73:1 (Kontrast ausreichend)<\/strong><\/span><\/div>\r\n<\/div>\r\n

Weitere Kontraste zwischen bestimmten Farben<\/h2>\r\n