{"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-01-15T12:20:23","modified_gmt":"2026-01-15T11:20:23","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 4.5:1<\/strong> erforderlich. 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<\/strong><\/span><\/p>\r\nThunderbird Red Light, #E31826: 4.74:1<\/strong><\/span> \u2013 Thunderbird Red Light, #E31826: 4.74:1<\/strong><\/span>\r\n\r\nFantasy Dark, #D8757C: 3.1:1<\/strong><\/span> \u2013 Fantasy Dark, #D8757C: 3.1:1<\/strong><\/span>\r\n\r\nFantasy Plain, #F2D1D3: 1.41:1<\/strong><\/span> \u2013 Fantasy Plain, #F2D1D3: 1.41:1<\/strong><\/span>\r\n\r\nFantasy Pastel, #F8E8E9: 1.18:1<\/strong><\/span> \u2013 Fantasy Pastel, #F8E8E9: 1.18:1<\/strong><\/span>\r\n\r\nFantasy Light, #FBF3F4: 1.09:1<\/strong><\/span> \u2013 Fantasy Light, #FBF3F4: 1.09:1<\/strong><\/span>\r\n\r\nGrey Light, #F4F4F4: 1.09:1<\/strong><\/span> \u2013 Grey Light, #F4F4F4: 1.09:1<\/strong><\/span>\r\n\r\nGrey Dark, #767676: 4.54:1<\/strong><\/span> \u2013 Grey Dark, #767676: 4.54:1<\/strong><\/span>\r\n\r\nGreen, #57751c: 5.29:1<\/strong><\/span> \u2013 Green, #57751c: 5.29:1<\/strong><\/span>\r\n\r\nTurqoise, #14776c: 5.4:1<\/strong><\/span> \u2013 Turqoise, #14776c: 5.4:1<\/strong><\/span>\r\n\r\nBlue, #427ca4: 4.51:1<\/strong><\/span> \u2013 Blue, #427ca4: 4.51:1<\/strong><\/span>\r\n\r\nOrange, #b46100: 4.51:1<\/strong><\/span> \u2013 Orange, #b46100: 4.51:1<\/strong><\/span>\r\n

Zu Schwarz<\/h2>\r\n

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

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