Barrierefreie Schrift leicht gemacht: Tipps aus der Praxis

7. Oktober 2024

""

Eine barrierefreie Schrift ist besonders gut für Menschen mit Sehschwäche oder Lesestörungen wie Legasthenie geeignet.

Eine barrierefreie Schriftart zeichnet sich durch klare Linien aus, die es einfach machen, Buchstaben und Wörter zu erkennen. Zum Beispiel sieht ein grosses “I” nicht wie die Zahl “1” aus.

Warum barrierefreie Schriften?

Kurz und knapp: Weil du es so allen Menschen einfacher machst, deine Texte zu lesen.

Denn immerhin sind 10 % der Bevölkerung von einer Legasthenie (Lese-Rechtschreibstörung) betroffen. Das sind Millionen von Menschen, denen du es einfacher machen kannst, deine Website zu nutzen. Einfach, indem du eine gut leserliche Schrift wählst.

Gleichzeitig hilfst du damit allen Website-Besuchern.

Denn auch Menschen, die keine Sehschwäche haben, profitieren davon. Beispielsweise, wenn sie deine Texte bei schlechten Lichtverhältnissen lesen.

Zur Website des Legathenie-Verbandes

 

Es sind die Buchstaben 1 I l O 0 6 9 r n m w s abgebilddet in der Schrift Inclusive Sans.

Warum viele Schriften für Menschen mit Sehschwäche schwierig zu lesen sind

Leider sind die meisten Schriften bisher nicht so gestaltet worden, dass sie besonders gut leserlich sind.

Ich zeige dir hier fünf Probleme auf die Menschen mit Sehschwäche oder anderen Lesestörungen immer wieder stossen.

Imposter – Zeichen und Zahlen sehen fast gleich aus

Hierbei geht es um Buchstaben, die wie andere Zeichen aussehen. Zum Beispiel sieht das grosse “I” aus wie die Zahl “1” oder das kleine “l” wie das grosse “I”. Das macht das Lesen auch für Menschen ohne Einschränkungen schwierig.

Imposter: Schriften die zeigen was Imposter sind. Es sind die 1, das grosse I und das grosse O sowie ein 0 abgebildet.

Buchstaben die fast geschlossen sind

Für Menschen mit Sehbehinderungen sind die Buchstaben c, e und o schwer zu unterscheiden, wenn das c oder e fast wie ein geschlossener Kreis aussieht.

Geschlossene Buchstaben: c, o, e sind abgebildet. Einmal in einer nicht barrierefreien Schrift, einmal in einer barrierefreien Schrift.

Spiegelungen – Zahlen und Zeichen die gespiegelt gleich aussehen

Das betrifft vor allem die Buchstaben „d“ und „b“ oder „p“ und „q“ sowie die Zahlen „6“ und „9“, können schwierig zu erkennen sein. Viele Schriften sind so gestaltet, weil Designer Wert auf ein einheitliches Aussehen legen.

Leider erschwert das das Lesen für Menschen mit Legasthenie.

Gespiegelte Buchstaben: d. b, p, q, 69 sind abgebildet. Einmal in einer nicht barrierefreien Schrift, einmal in einer barrierefreien Schrift.

Strichstärken verändern sich stark.

Das belastet die Augen und es erfordert mehr Konzentration, solche Schriften zu lesen. Für Menschen mit Dyslexie (Leseschwierigkeit) wird es dadurch auch schwieriger, die Buchstaben auseinanderzuhalten.

Buchstaben mit verschiedenen Strichstärken sind abgebildet. Einmal in einer nicht barrierefreien Schrift, einmal in einer barrierefreien Schrift.

Crowding-Effekt – Enger Buchstabenabstand

Dieses Problem tritt vor allem auf, wenn ähnliche Buchstaben, wie „r“ und „n“, direkt hintereinander stehen. Dann kann es schnell so aussehen, als wäre es ein „m“.

Je kleiner die Schrift ist, desto grösser das Hindernis. Besonders betroffen sind Menschen mit eingeschränkter Sehschärfe.

Crowding Effekt r n m sind abgebildet. Einmal in einer nicht barrierefreien Schrift, einmal in einer barrierefreien Schrift.

Welche Schrift lässt sich am besten lesen?

In den 5 Beispielen hast du schon gesehen, worauf du achten musst, wenn du eine barrierearme Schriftart für deine Website auswählen willst.

Natürlich gibt es mittlerweile auch einige barrierefreie Fonts. Auch kostenlos bei Google.

Gefällt dir, was du liest?

Dann abonniere doch meinen Newsletter. In meinen Website-Tipps bekommst du Woche für Woche inspirierenden Input und leicht umsetzbare Tipps für deine Website.

Barrierefreie Google-Schriftarten

Google bietet verschiedene Schriftarten an, die barrierefrei oder zumindest barrierearm sind.

Zum Beispiel die Schriftart «Inclusive Sans»:

Es sind die Buchstaben 1 I l O 0 6 9 r n m w s abgebilddet in der Schrift Inclusive Sans.

Wie du siehst, ist hier zum Beispiel ein Punkt in der Null, damit es sich klar vom grossen O unterscheidet.

Du wirst aber auch noch andere Schriften finden, die viele der wichtigen Punkte berücksichtigen und damit zumindest ausreichend barrierefrei sind.

Zum Beispiel:

Es sind die Buchstaben 1 I l O 0 6 9 r n m w s abgebilddet in der Schrift Fira Sans.
Es sind die Buchstaben 1 I l O 0 6 9 r n m w s abgebilddet in der Schrift Signika.
Es sind die Buchstaben 1 I l O 0 6 9 r n m w s abgebilddet in der Schrift Reddit Mono.
Es sind die Buchstaben 1 I l O 0 6 9 r n m w s abgebilddet in der Schrift Sometype Mono.
Es sind die Buchstaben 1 I l O 0 6 9 r n m w s abgebilddet in der Schrift Nunito Sans.
Es sind die Buchstaben 1 I l O 0 6 9 r n m w s abgebilddet in der Schrift Mooli.
Es sind die Buchstaben 1 I l O 0 6 9 r n m w s abgebilddet in der Schrift ABeeZee.
Es sind die Buchstaben 1 I l O 0 6 9 r n m w s abgebilddet in der Schrift Allerta.
Es sind die Buchstaben 1 I l O 0 6 9 r n m w s abgebilddet in der Schrift Finlandica.
Es sind die Buchstaben 1 I l O 0 6 9 r n m w s abgebilddet in der Schrift AR One Sans.

Atkinson Hyperlegible Font – besonders gut leserlich

Auch das ist eine Schrift, die du direkt bei Google Fonts herunterladen kannst.

Die Atkinson Hyperlegible wurde extra entwickelt, um Menschen mit Sehbehinderungen das Lesen zu erleichtern. Sie stammt vom Braille Institute und wurde in Zusammenarbeit mit der Designagentur Applied aus New York gestaltet. Ihren Namen verdankt sie J. Robert Atkinson, dem Gründer des Braille Institute.

Die Schrift ist perfekt für alle, die eine gut lesbare Schriftart brauchen – besonders für Menschen mit eingeschränktem Sehvermögen. Ihr klares Design und die deutliche Unterscheidung der Buchstaben sorgen dafür, dass Texte leichter zu lesen sind und barrierefreier werden.

Es sind die Buchstaben 1 I l O 0 6 9 r n m w s abgebilddet in der Schrift Aktinson Hyperlegible.

Lexend

Auch das ist eine Schrift, die du direkt bei Google Fonts herunterladen kannst.

Die Lexend gilt laut Studien als besonders gut leserlich. Deshalb nutze ich sie nun auch auf meiner Website für den Fliesstext. Das heisst, du liest diesen Text gerade in Lexend. 

Zur Schrift Lexend

Es sind die Buchstaben 1 I l O 0 6 9 rn m w s c o e abgebildet in der Schrift Lexend.

Weitere wichtige Kriterien für barrierefreie Typografie

Die Font-Auswahl ist die Grundlage für barrierefreie Texte. Aber natürlich gibt es noch etliche weitere Punkte, die beachtet werden sollten.

Kontrast der Schrift zum Hintergrund

Ein klarer Kontrast zwischen der Schriftfarbe und dem Hintergrund macht einen riesigen Unterschied, wenn es um Barrierefreiheit und Lesbarkeit geht.

Deshalb hat die WCAG (Web Content Accessibility Guidelines) auch klare Regeln dafür erlassen. Ob der Kontrast ausreicht, kannst du mit dem Tool von leserlich.info testen. So stellst du sicher, dass auch Menschen mit einer Sehschwäche deine Texte gut lesen können.

Zu den Web Content Accessibility Guidelines

Zum Tool von leserlich.info

Dark Mode

Immer häufiger sieht man Apps oder auch Websites im sogenannten «Dark Mode». Also dunkler Hintergrund mit weisser Schrift. Das kann tatsächlich für einige Menschen den Text leserlicher machen. Aber andere, zum Beispiel Menschen, die an einer Hornhautverkrümmung leiden, wie ich, haben mehr Mühe diese Texte zu lesen.

Das merke ich bei mir selbst auch immer wieder. Überlege dir also gut, ob das bei deiner Website Sinn macht, denn in Europa sind immerhin zwischen 30 bis 60 % der Bevölkerung von einer Hornhautverkrümmung betroffen.

Zum Wikipedia-Eintrag über Hornhautverkrümmung

Ein Beispiel für den Dark Mode. Weisse Schrift auf schwarzem Hintergrund.

Gefällt dir, was du liest?

Dann abonniere doch meinen Newsletter. In meinen Website-Tipps bekommst du Woche für Woche inspirierenden Input und leicht umsetzbare Tipps für deine Website.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Die Strichstärke: Ein entscheidender Faktor für die Lesbarkeit

Die Strichstärke einer Schriftart, also wie dick die Linien der Buchstaben sind, beeinflusst stark, wie gut wir sie lesen können.

Zu dünne Striche:

  • Wenig Kontrast: Dünne Striche können auf dem Bildschirm oder bei schlechtem Licht verschwimmen.
  • Buchstaben-Wirrwarr: Buchstaben, die sich ähnlich sehen, wie „l“ und „I“, werden bei dünnen Linien noch schneller verwechselt.

Bei zu dünnen Linien müssen wir uns sehr stark konzentrieren, um die feinen Linien zu erkennen. Das macht müde.

Ein Beispiel für eine Schrift mit sehr dünnen Strichstärken. Sie wird dadurch schwer zu lesen.

Zu dicke Striche:

  • Verschwommen bei kleinen Grössen: Wenn die Schrift klein ist, können dicke Buchstaben ineinanderlaufen. Dann sieht man nur noch eine Buchstaben-Suppe.

Du siehst: Ideal sind Schriften mit mittleren Strichstärken.

Ein Beispiel für eine Schrift mit fetten Buchstaben, die dadurch schwer leserlich ist.

Ausreichende Schriftgrösse

Es gibt leider keine perfekte Schriftgrösse, die für alle Schriftarten und jeden Menschen gilt. Wichtig ist, dass die Schriftgrösse vom Nutzer angepasst werden kann. Deshalb sollten Schriftgrössen auch nicht in px, sondern in rem angegeben werden.

Ich empfehle dir jedoch, mindestens 18px (also 1.125 rem) zu wählen, um auf der sicheren Seite zu sein.

Ein Beispiel dafür, wie eine sehr kleine Schrift den Text schwer leserlich macht.

Ausreichend Zeilenabstand

Wenn die Zeilen zu dicht aufeinander sind, wird es schnell anstrengend den Text zu lesen. Die Buchstaben vermischen sich und es braucht viel Konzentration, um den Text zu entziffern.

Deshalb: Lass genug Luft zwischen den Zeilen, damit das Lesen entspannt bleibt!

Ein Beispiel für zu wenig Zeilenabstand. Dadurch wird der Text schwer lesbar.

Barrierefreie Schriften: Antworten auf die häufigsten Fragen

Welche Rolle spielt die Schriftgrösse für die Lesbarkeit?

Je kleiner die Schrift, desto mehr musst du dich anstrengen. Besonders Menschen mit Sehschwäche oder ältere Leser tun sich dann schwer. Eine zu kleine Schrift kann sogar dazu führen, dass Texte gar nicht gelesen werden. Darum: lieber eine Nummer grösser – und am besten so, dass Nutzer die Grösse selbst anpassen können (z. B. mit rem statt px).

Wie wirken sich Farben und Kontraste auf die Schriftlesbarkeit aus?

Hellgrau auf Weiss mag schick aussehen, ist aber für viele Augen eine Zumutung. Gute Lesbarkeit braucht starken Kontrast: Dunkle Schrift auf hellem Hintergrund oder umgekehrt. Auch für Menschen ohne Sehschwäche ist das angenehmer. Testtools wie der Kontrastrechner helfen dir, das zu prüfen.

Sind Serifen-Schriften grundsätzlich schlechter lesbar?

Nicht unbedingt – aber im Web meistens schon. Vor allem in kleinen Grössen oder auf mobilen Geräten wirken Serifen schnell unruhig. Barrierearme Websites setzen deshalb oft auf serifenlose Schriften (Sans-Serif), weil sie klarer und gleichmässiger wirken.

Welche Schriftarten gelten als barrierefrei bzw. besonders barrierearm?

Es gibt keine offizielle Liste, aber einige Schriften wurden gezielt für mehr Lesbarkeit entwickelt. Dazu gehören zum Beispiel Lexend, Atkinson Hyperlegible oder Inclusive Sans. Auch Fira Sans, Signika oder Nunito Sans schneiden gut ab. Wichtig ist, dass die Buchstaben klar unterscheidbar sind – vor allem 1, l, I, 0 und O.

Warum ist der Zeilenabstand bei Schrift wichtig?

Wenn die Zeilen zu dicht aneinanderkleben, wird der Text zur Textwand. Besonders Menschen mit Leseschwierigkeiten verlieren dabei schnell die Orientierung. Ein ausreichender Zeilenabstand schafft Luft zwischen den Zeilen und sorgt dafür, dass das Auge leichter von einer zur nächsten springt. Faustregel: Zeilenhöhe = ca. 1.5-fache Schriftgrösse.Wenn die Zeilen zu dicht aneinanderkleben, wird der Text zur Textwand. Besonders Menschen mit Leseschwierigkeiten verlieren dabei schnell die Orientierung. Ein ausreichender Zeilenabstand schafft Luft zwischen den Zeilen und sorgt dafür, dass das Auge leichter von einer zur nächsten springt. Faustregel: Zeilenhöhe = ca. 1.5-fache Schriftgrösse.

Wie erkenne ich welche Schrift auf einer Website ist?

Dazu kannst du Browser-Erweiterungen wie „WhatFont“ oder die Entwicklertools (Rechtsklick → „Element untersuchen“) nutzen. So findest du schnell heraus, welche Schriftfamilie auf einer Website verwendet wird. In meinem Artikel Schriftarten erkennen zeige ich dir wie du vorgehst.

Wie finde ich eine schöne Schrift für meine Website?

Die richtige Schrift unterstützt deine Inhalte, wirkt stimmig zu deiner Zielgruppe und bleibt gut lesbar – auf allen Geräten. Frag dich: Was willst du ausstrahlen? Was brauchen deine Leserinnen?
Viele Tipps bekommst du im Artikel: Schöne, lesbare Schriftarten für deine Website auswählen. Viele barrierefreie und schöne Schriften findest du bei Google. So nutzt du die Schriften von Google.

Fazit:

Schriften sind ein wichtiges Kriterium für barrierefreie Websites – vor allem, weil viele Menschen eine Sehschwäche haben. Und je älter die Bevölkerung wird, desto mehr Menschen sind davon betroffen.

Ich selbst habe seit meiner Kindheit mit einer ziemlich starken Hornhautverkrümmung und kann dir aus eigener Erfahrung sagen: Kleine Schriften können verschwimmen und sind so nur noch sehr mühsam zu lesen. Und jetzt, wo ich älter werde, freue ich mich jedes Mal, wenn die Schrift etwas grösser ist – trotz Brille!

Aber wie du gesehen hast, ist es wirklich kein Hexenwerk, barrierefreie Schriften auszuwählen und so einen kleinen Beitrag zur digitalen Barrierefreiheit zu leisten. Besonders, wenn bei dir ein Relaunch ansteht oder du deine Website gerade baust, lohnt es sich, auf inklusives Design zu setzen.

Und keine Sorge, ich habe noch mehr Lesestoff zum Thema inklusive Gestaltung in der Pipeline – es bleibt spannend!

Melde dich für meinen Newsletter an, damit dir keine aktuellen Tipps mehr entgehen:

Gefällt dir, was du liest?

Dann abonniere doch meinen Newsletter. In meinen Website-Tipps bekommst du Woche für Woche inspirierenden Input und leicht umsetzbare Tipps für deine Website.

Was denkst du? Ich freu mich auf deinen Kommentar.

  • Ein toller, sehr hilfreicher Beitrag, Dankeschön! Deinen Newsletter habe ich gerade abonniert!

    • Claudia Barfuss

      Hallo Nicole, danke dir vielmals für dein tolles Feedback und ich freue mich, dich in meiner Newsletter-Communitiy begrüssen zu dürfen.

  • Natalie Schilling

    Vielen Dank, Claudia, für diesen inspirierenden Blogartikel! Dank der vielen Beispiele konnte ich die Unterschiede und Wirkungen sehr gut erkennen.

    • Claudia Barfuss

      Danke Natalie, das freut mich natürlich sehr. Es ist so ein spannendes Thema.

  • Gabriele Sauerland | communicanis

    Danke Claudia für diesen sehr interessanten und hilfreichen Beitrag. Die Barrierefreiheit rückt mehr in den Vordergrund, das ist gut, obgleich für uns alle mit viel Arbeit verbunden, für alle Betroffenen aber sicher sehr wichtig.
    Mich würde interessieren, wie Betroffene es sehen, was sie sich wünschen.

    • Claudia Barfuss

      Liebe Gabriele
      Ich freue mich, dass dir dieser Beitrag gefallen hat. Ich bin im Austausch mit einer Betroffenen und das ist sehr spannend. Das ganze Thema betrifft tatsächlich uns alle. Stell dir nur vor, du hast einen gebrochenen Arm und kannst die Maus nicht mehr nutzen. Oder du leidest unter dem grauen Star und Buchstaben verschwimmen leicht. Deshalb finde ich das Thema so faszinierend, denn es stellt die Nutzer der Website noch stärker in den Fokus.

Claudia Barfuss

Seit über 24 Jahren begleite ich als Designerin mit Herz und einem Blick für kreative Lösungen Frauen dabei, ihre Website so zu gestalten, dass sie sich rundum stimmig anfühlt.

In meinen Blogartikel findest du erprobte Tipps aus meinem Alltag – für alle, die ihre Website klar, strukturiert und persönlich gestalten wollen.

Porträtfoto von Claudia Barfuss, Webdesignerin für selbstständige Frauen sitzend, mit einem silbernen Tablet in der Hand