Barrierefreie Schriftarten: Was eine Schrift wirklich lesbar macht
Barrierefreie Website – wenn wir davon sprechen, denken viele zuerst an Screenreader, Alt-Texte oder Tastaturnavigation.
Klar, alles wichtige Aspekte. Aber was viele übersehen: Barrierefreiheit beginnt viel früher – nämlich beim Corporate Design.
Nachfolgend schauen wir uns an, wie du deinen Markenauftritt anpassen kannst, damit deine Website auch im Hinblick auf dein Corporate Design barrierefrei ist.
Falls du dich gerade fragst, was Corporate Design ist, habe ich es dir aufgeschrieben.
Gerade bei der gewählten Schrift innerhalb deines Corporate Designs kannst du relativ einfach die Anpassung hin zu einer barrierefreien Schrift vornehmen. Auf was du dabei achten solltest, habe ich dir einmal zusammengefasst.
Grundsatz Nr. 1: Keine schnörkelige Schrift
Ich weiß, gerade Schreibschrift oder gewisse Handschriften sind sehr beliebt, da sie oft den gewissen Pepp oder auch eine persönliche Note einfließen lassen – da blutet auch mein Designerherz, glaube mir!
Aber diese Schriften sorgen nicht für einen 100%igen barrierefreien Markenauftritt.
Grundsatz Nr. 2: So testest du deine barrierefreie Schriftart
Wenn du dir eine passende Schrift für dein Corporate Design aussuchst, dann kannst du mit einem kleinen Trick direkt die Barrierefreiheit der Schrift testen!
Oft kann man die Schriften vorab testen, indem man ein kleines Sätzchen schreibt und dieses wird dann in der entsprechenden Schriftart angezeigt.
Schreibe in dieses Kästchen einen Satz, der die Zeichen „O – großes O“, „0 – Null“, „I – großes I“, „1 – Eins“, „l – kleines L“ hat und schaue, wie ähnlich sich die Zeichen sind.
Fiktiver Beispielsatz: Illusionen zu Ostern sind nicht selten, wenn der Osterhase 0 Eier bringt in 1 Osternest.
Kann man das „O“ von der „0“ unterscheiden?
Wie sieht es mit dem großen „I“ und dem kleinen „l“ aus?
Barrierefreie Schriftarten: Meine Empfehlung
- Barrierearme sans-serif Schriften
- Noto Sans
- PT Sans
- Atkinson Hyperlegible
- Work Sans
- Barrierearme serifen Schriften
- Ananda Pro
- Arvo
- EB Garamond
- Libre Caslon Text
- Lora
- Noto Serif
- PT Serif
- Roboto Serif
- Roboto Slab
Grundsatz Nr. 3: Die richtige Schriftgröße für barrierefreie Schrift
Achte gerade bei einem barrierefreien Webdesign darauf, dass die Größe des Fließtextes mind. 16 px groß ist.
Du kannst diese Einstellung in deinem Backend z.B. bei WordPress / Elementor manuell in den globalen Einstellungen hinterlegen.
Die meisten gängigen Browser haben auch schon die Grundeinstellung, dass der Fließtext in 16 px übernommen & dargestellt wird, wenn du beispielsweise in WordPress / Elementor die Schriftgröße auf 1 rem einstellst.
Wenn du gerade eh an deiner Website arbeitest, dann könnte dich der Aufbau einer Website und die Struktur auch in dem Zuge interessieren.
Barrierefreie Farben: Kontraste, die wirklich funktionieren
Farbkontraste in der Barrierefreiheit
Genau hier setzen auch die Kontrastverhältnisse von Markenfarben an. Je nach Größe des Textes und der benötigten Stufe der Barrierefreiheit, sind andere Verhältnisse gefordert.
- 4.5:1 – Kontrastverhältnis von normalen Text zu Hintergrund (Level AA)
- 3:1 – für große Schriften & Überschriften
- 7:1 – für höchste Barrierefreiheit, gerade für Fließtext ist dieses Verhältnis am angenehmsten zu lesen (Level AAA)
Welche Level der Barrierefreiheit es gibt und wen die barrierefreie Website Pflicht betrifft, erkläre ich dir hier.
Beispiel verschiedener Kontrastverhältnisse:
Barrierefreie Farben prüfen: kostenlose Tools
- Adobe Farbrad
- Colour Contrast Checker
- WCAG Color Contrast Checker
- Colorblindly – Chrome Erweiterung für Farbenblindheit
- Silktide – Chrome Erweiterung u.a. für Kontrastcheck und mehr
Logo Design & Markenelemente - auch ohne Farbe
Damit dein Logo auch ohne Farbe bzw. in Farbverfälschungen immer noch einsatzbereit ist, sollte es folgende Komponente haben:
- klare Formgebung
- keine zu filigranen Details
- gute Skalierbarkeit
- Erkennbarkeit unabhängig von der Farbgebung
Und denk dran: Ein barrierefreies Logo zahlt direkt auf dein Personal Branding ein – weil es zeigt, dass du Verantwortung übernimmst. Du kannst dein Logo ebenfalls mit den Farbkontrast Tools checken, die ich dir unter den Markenfarben verlinkt habe.
Checkliste: Barrierefreie Schriftarten & Farben im Branding
- Klare lesbare Schriftart
- Schriftgröße mind. 16 px & gute Unterscheidbarkeit der Buchstaben
- Kontrastreiche Markenfarben
- Logodesign funktioniert auch in Grau-Stufen
Beachte diese Punkte bereits im Designprozess bei der Entwicklung deines Corporate Designs. Und wenn dein Markenauftritt schon steht, kannst du über die genannten Stellschrauben die entsprechenden Anpassungen vornehmen.
Du traust dich selbst nicht an das Thema ran? Dann kannst du dir bei mir ein Corporate Design erstellen lassen unter Berücksichtigung barrierefreier Aspekte.
Fazit: Gutes Design ist für alle da
Barrierefreiheit ist kein Add-on, sondern ein Grundprinzip für ein inklusives, zukunftsfähiges Web.
Wenn dein Branding nicht alle erreicht, lässt du nicht nur potenzielle Kund:innen außen vor, du verschenkst auch wertvolle Wirkungskraft.
Die gute Nachricht: Meist sind es nur kleinere Stellschrauben, die zu bearbeiten sind.
Zeit für ein Branding, das heute und auch noch morgen funktioniert?
Wenn dein Markenauftritt langsam nicht mehr zu dir passt oder du merkst, dass er auf kleinen Bildschirmen unter geht, dann ist das ein guter Moment, dein Corporate Design zeitgemäß zu überarbeiten.
Lass uns unverbindlich sprechen und ich sage dir ehrlich, ob eine Überarbeitung deines Designs sich für dich gerade lohnt.
FAQ - zu barrierefreie Schriftarten & Farben
Barrierefreie Schriftarten haben klar unterscheidbare Buchstaben und wenig Schnörkel. Gut funktionieren z.B. Nunito Serif, Noto Sans, PT Sans oder Roboto Serif. Der schnellste Test: Kannst du ein O und eine 0 sowie ein großes I und ein kleines i eindeutig auseinanderhalten?
Nur bedingt. Arial ist meist überall verfügbar und auch gut lesbar, außer: Das große I und das kleine i sehen praktisch identisch aus. Für Fließtext geht es aber meist in Ordnung. Alternativ kannst du dir Roboto oder Noto Sans anschauen.
Fließtext sollte auf Websites mind. 16 Pixel groß sein. Das entsprich 1 rem und ist in den meisten Browsern auch die Standardeinstellung.
Nach WCAG braucht ein normaler Fließtext ein Kontrastverhältnis von mind. 4,5:1 zur Hintergrundfarbe.
Bei größeren Schriften ab 18 Pixel reichen schon ein 3:1 Verhältnis. Wenn du die höchste Barrierefreiheitsstufe AAA benötigst, ist sogar ein Verhältnis von 7:1 nötig.
Für das Logo gibt es keine gesetzliche Vorgaben, trotzdem lohnt es sich das Logo so zu gestalten, dass es auch in schwarz/weiß bzw. Graustufen gut erkennbar ist. Achte auf klare Formen, wenig filigrane Details und gute Skalierbarkeit in der Größe.
