Geprüft am 31.8.2026 · https://www.spiegel.de/
32 kritische Barrieren · zusätzlich 7 zu prüfen.
Wie kommt der Score zustande? (100 Startpunkte)
| {n} Formularfeld(er) ohne erkennbare Beschriftung | -18 |
| {n} Link(s) ohne erkennbaren Namen im HTML | -18 |
| {n} Schaltfläche(n) ohne Namen im HTML | -18 |
| {n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast | -18 |
| {n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast | -6 |
| {n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast | -6 |
| {n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast | -6 |
| {n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast | -6 |
| {n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast | -6 |
| {n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast | -6 |
| {n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast | -6 |
| {n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast | -6 |
| {n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast | -6 |
| {n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast | -6 |
| {n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast | -6 |
| {n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast | -6 |
| {n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast | -6 |
| {n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast | -6 |
| {n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast | -6 |
| {n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast | -6 |
| {n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast | -6 |
| {n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast | -6 |
| {n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast | -6 |
| {n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast | -6 |
| {n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast | -6 |
| {n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast | -6 |
| {n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast | -6 |
| {n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast | -6 |
| {n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast | -6 |
| {n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast | -6 |
| {n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast | -6 |
| {n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast | -6 |
| Keine <h1>-Überschrift im ausgelieferten HTML | -7 |
| {n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast | -2 |
| {n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast | -2 |
| {n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast | -2 |
| {n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast | -2 |
| {n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast | -2 |
| {n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast | -2 |
| Ergebnis | 0 / 100 |
Wahrnehmbar
{n} Formularfeld(er) ohne erkennbare Beschriftung
Prüfe, ob ein per JavaScript gesetztes aria-label existiert.
input, select, textarea
Das solltest du tun: Jedes Feld mit einem <label for>-Element verbinden oder aria-label / aria-labelledby setzen. Nur ein placeholder reicht nicht.
{n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast
Nötig: 4.5:1 (normal) bzw. 3:1 (großer Text). Bei „angenommenem Seitenhintergrund“ konnte der tatsächliche Hintergrund nicht sicher bestimmt werden — im Zweifel im Browser prüfen. Gefunden u. a.: {examples}
.button-spon
Das solltest du tun: Textfarbe abdunkeln oder Hintergrund aufhellen, bis der jeweilige Mindestwert erreicht ist. Farbe nie als einziges Unterscheidungsmerkmal einsetzen.
{n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast
Nötig: 4.5:1 (normal) bzw. 3:1 (großer Text). Bei „angenommenem Seitenhintergrund“ konnte der tatsächliche Hintergrund nicht sicher bestimmt werden — im Zweifel im Browser prüfen. Gefunden u. a.: {examples}
.button-effi
Das solltest du tun: Textfarbe abdunkeln oder Hintergrund aufhellen, bis der jeweilige Mindestwert erreicht ist. Farbe nie als einziges Unterscheidungsmerkmal einsetzen.
{n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast
Nötig: 4.5:1 (normal) bzw. 3:1 (großer Text). Bei „angenommenem Seitenhintergrund“ konnte der tatsächliche Hintergrund nicht sicher bestimmt werden — im Zweifel im Browser prüfen. Gefunden u. a.: {examples}
.button-mmo
Das solltest du tun: Textfarbe abdunkeln oder Hintergrund aufhellen, bis der jeweilige Mindestwert erreicht ist. Farbe nie als einziges Unterscheidungsmerkmal einsetzen.
{n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast
Nötig: 4.5:1 (normal) bzw. 3:1 (großer Text). Bei „angenommenem Seitenhintergrund“ konnte der tatsächliche Hintergrund nicht sicher bestimmt werden — im Zweifel im Browser prüfen. Gefunden u. a.: {examples}
.button-hbm
Das solltest du tun: Textfarbe abdunkeln oder Hintergrund aufhellen, bis der jeweilige Mindestwert erreicht ist. Farbe nie als einziges Unterscheidungsmerkmal einsetzen.
{n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast
Nötig: 4.5:1 (normal) bzw. 3:1 (großer Text). Bei „angenommenem Seitenhintergrund“ konnte der tatsächliche Hintergrund nicht sicher bestimmt werden — im Zweifel im Browser prüfen. Gefunden u. a.: {examples}
input::-moz-placeholder, textarea::-moz-placeholder
Das solltest du tun: Textfarbe abdunkeln oder Hintergrund aufhellen, bis der jeweilige Mindestwert erreicht ist. Farbe nie als einziges Unterscheidungsmerkmal einsetzen.
{n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast
Nötig: 4.5:1 (normal) bzw. 3:1 (großer Text). Bei „angenommenem Seitenhintergrund“ konnte der tatsächliche Hintergrund nicht sicher bestimmt werden — im Zweifel im Browser prüfen. Gefunden u. a.: {examples}
input::placeholder, textarea::placeholder
Das solltest du tun: Textfarbe abdunkeln oder Hintergrund aufhellen, bis der jeweilige Mindestwert erreicht ist. Farbe nie als einziges Unterscheidungsmerkmal einsetzen.
{n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast
Nötig: 4.5:1 (normal) bzw. 3:1 (großer Text). Bei „angenommenem Seitenhintergrund“ konnte der tatsächliche Hintergrund nicht sicher bestimmt werden — im Zweifel im Browser prüfen. Gefunden u. a.: {examples}
body .richtext--inverted p
Das solltest du tun: Textfarbe abdunkeln oder Hintergrund aufhellen, bis der jeweilige Mindestwert erreicht ist. Farbe nie als einziges Unterscheidungsmerkmal einsetzen.
{n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast
Nötig: 4.5:1 (normal) bzw. 3:1 (großer Text). Bei „angenommenem Seitenhintergrund“ konnte der tatsächliche Hintergrund nicht sicher bestimmt werden — im Zweifel im Browser prüfen. Gefunden u. a.: {examples}
body .richtext--inverted a
Das solltest du tun: Textfarbe abdunkeln oder Hintergrund aufhellen, bis der jeweilige Mindestwert erreicht ist. Farbe nie als einziges Unterscheidungsmerkmal einsetzen.
{n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast
Nötig: 4.5:1 (normal) bzw. 3:1 (großer Text). Bei „angenommenem Seitenhintergrund“ konnte der tatsächliche Hintergrund nicht sicher bestimmt werden — im Zweifel im Browser prüfen. Gefunden u. a.: {examples}
body .richtext--inverted a:focus
Das solltest du tun: Textfarbe abdunkeln oder Hintergrund aufhellen, bis der jeweilige Mindestwert erreicht ist. Farbe nie als einziges Unterscheidungsmerkmal einsetzen.
{n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast
Nötig: 4.5:1 (normal) bzw. 3:1 (großer Text). Bei „angenommenem Seitenhintergrund“ konnte der tatsächliche Hintergrund nicht sicher bestimmt werden — im Zweifel im Browser prüfen. Gefunden u. a.: {examples}
.richtextcredit.richtextcredit--inverted a
Das solltest du tun: Textfarbe abdunkeln oder Hintergrund aufhellen, bis der jeweilige Mindestwert erreicht ist. Farbe nie als einziges Unterscheidungsmerkmal einsetzen.
{n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast
Nötig: 4.5:1 (normal) bzw. 3:1 (großer Text). Bei „angenommenem Seitenhintergrund“ konnte der tatsächliche Hintergrund nicht sicher bestimmt werden — im Zweifel im Browser prüfen. Gefunden u. a.: {examples}
.richtextsystem.richtextsystem--inverted a
Das solltest du tun: Textfarbe abdunkeln oder Hintergrund aufhellen, bis der jeweilige Mindestwert erreicht ist. Farbe nie als einziges Unterscheidungsmerkmal einsetzen.
{n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast
Nötig: 4.5:1 (normal) bzw. 3:1 (großer Text). Bei „angenommenem Seitenhintergrund“ konnte der tatsächliche Hintergrund nicht sicher bestimmt werden — im Zweifel im Browser prüfen. Gefunden u. a.: {examples}
.richtextsystem.richtextsystem--inverted a:hover
Das solltest du tun: Textfarbe abdunkeln oder Hintergrund aufhellen, bis der jeweilige Mindestwert erreicht ist. Farbe nie als einziges Unterscheidungsmerkmal einsetzen.
{n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast
Nötig: 4.5:1 (normal) bzw. 3:1 (großer Text). Bei „angenommenem Seitenhintergrund“ konnte der tatsächliche Hintergrund nicht sicher bestimmt werden — im Zweifel im Browser prüfen. Gefunden u. a.: {examples}
.richtextsystem.richtextsystem--inverted a:focus
Das solltest du tun: Textfarbe abdunkeln oder Hintergrund aufhellen, bis der jeweilige Mindestwert erreicht ist. Farbe nie als einziges Unterscheidungsmerkmal einsetzen.
{n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast
Nötig: 4.5:1 (normal) bzw. 3:1 (großer Text). Bei „angenommenem Seitenhintergrund“ konnte der tatsächliche Hintergrund nicht sicher bestimmt werden — im Zweifel im Browser prüfen. Gefunden u. a.: {examples}
.text-shade-base
Das solltest du tun: Textfarbe abdunkeln oder Hintergrund aufhellen, bis der jeweilige Mindestwert erreicht ist. Farbe nie als einziges Unterscheidungsmerkmal einsetzen.
{n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast
Nötig: 4.5:1 (normal) bzw. 3:1 (großer Text). Bei „angenommenem Seitenhintergrund“ konnte der tatsächliche Hintergrund nicht sicher bestimmt werden — im Zweifel im Browser prüfen. Gefunden u. a.: {examples}
.text-shade-light
Das solltest du tun: Textfarbe abdunkeln oder Hintergrund aufhellen, bis der jeweilige Mindestwert erreicht ist. Farbe nie als einziges Unterscheidungsmerkmal einsetzen.
{n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast
Nötig: 4.5:1 (normal) bzw. 3:1 (großer Text). Bei „angenommenem Seitenhintergrund“ konnte der tatsächliche Hintergrund nicht sicher bestimmt werden — im Zweifel im Browser prüfen. Gefunden u. a.: {examples}
.text-shade-lighter
Das solltest du tun: Textfarbe abdunkeln oder Hintergrund aufhellen, bis der jeweilige Mindestwert erreicht ist. Farbe nie als einziges Unterscheidungsmerkmal einsetzen.
{n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast
Nötig: 4.5:1 (normal) bzw. 3:1 (großer Text). Bei „angenommenem Seitenhintergrund“ konnte der tatsächliche Hintergrund nicht sicher bestimmt werden — im Zweifel im Browser prüfen. Gefunden u. a.: {examples}
.text-shade-lightest
Das solltest du tun: Textfarbe abdunkeln oder Hintergrund aufhellen, bis der jeweilige Mindestwert erreicht ist. Farbe nie als einziges Unterscheidungsmerkmal einsetzen.
{n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast
Nötig: 4.5:1 (normal) bzw. 3:1 (großer Text). Bei „angenommenem Seitenhintergrund“ konnte der tatsächliche Hintergrund nicht sicher bestimmt werden — im Zweifel im Browser prüfen. Gefunden u. a.: {examples}
.text-white
Das solltest du tun: Textfarbe abdunkeln oder Hintergrund aufhellen, bis der jeweilige Mindestwert erreicht ist. Farbe nie als einziges Unterscheidungsmerkmal einsetzen.
{n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast
Nötig: 4.5:1 (normal) bzw. 3:1 (großer Text). Bei „angenommenem Seitenhintergrund“ konnte der tatsächliche Hintergrund nicht sicher bestimmt werden — im Zweifel im Browser prüfen. Gefunden u. a.: {examples}
.placeholder-shade-base::-moz-placeholder
Das solltest du tun: Textfarbe abdunkeln oder Hintergrund aufhellen, bis der jeweilige Mindestwert erreicht ist. Farbe nie als einziges Unterscheidungsmerkmal einsetzen.
{n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast
Nötig: 4.5:1 (normal) bzw. 3:1 (großer Text). Bei „angenommenem Seitenhintergrund“ konnte der tatsächliche Hintergrund nicht sicher bestimmt werden — im Zweifel im Browser prüfen. Gefunden u. a.: {examples}
.placeholder-shade-base::placeholder
Das solltest du tun: Textfarbe abdunkeln oder Hintergrund aufhellen, bis der jeweilige Mindestwert erreicht ist. Farbe nie als einziges Unterscheidungsmerkmal einsetzen.
{n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast
Nötig: 4.5:1 (normal) bzw. 3:1 (großer Text). Bei „angenommenem Seitenhintergrund“ konnte der tatsächliche Hintergrund nicht sicher bestimmt werden — im Zweifel im Browser prüfen. Gefunden u. a.: {examples}
.hover\:text-shade-lighter:hover
Das solltest du tun: Textfarbe abdunkeln oder Hintergrund aufhellen, bis der jeweilige Mindestwert erreicht ist. Farbe nie als einziges Unterscheidungsmerkmal einsetzen.
{n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast
Nötig: 4.5:1 (normal) bzw. 3:1 (großer Text). Bei „angenommenem Seitenhintergrund“ konnte der tatsächliche Hintergrund nicht sicher bestimmt werden — im Zweifel im Browser prüfen. Gefunden u. a.: {examples}
.hover\:text-shade-lightest:hover
Das solltest du tun: Textfarbe abdunkeln oder Hintergrund aufhellen, bis der jeweilige Mindestwert erreicht ist. Farbe nie als einziges Unterscheidungsmerkmal einsetzen.
{n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast
Nötig: 4.5:1 (normal) bzw. 3:1 (großer Text). Bei „angenommenem Seitenhintergrund“ konnte der tatsächliche Hintergrund nicht sicher bestimmt werden — im Zweifel im Browser prüfen. Gefunden u. a.: {examples}
.hover\:text-white:hover
Das solltest du tun: Textfarbe abdunkeln oder Hintergrund aufhellen, bis der jeweilige Mindestwert erreicht ist. Farbe nie als einziges Unterscheidungsmerkmal einsetzen.
{n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast
Nötig: 4.5:1 (normal) bzw. 3:1 (großer Text). Bei „angenommenem Seitenhintergrund“ konnte der tatsächliche Hintergrund nicht sicher bestimmt werden — im Zweifel im Browser prüfen. Gefunden u. a.: {examples}
.focus\:text-shade-base:focus
Das solltest du tun: Textfarbe abdunkeln oder Hintergrund aufhellen, bis der jeweilige Mindestwert erreicht ist. Farbe nie als einziges Unterscheidungsmerkmal einsetzen.
{n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast
Nötig: 4.5:1 (normal) bzw. 3:1 (großer Text). Bei „angenommenem Seitenhintergrund“ konnte der tatsächliche Hintergrund nicht sicher bestimmt werden — im Zweifel im Browser prüfen. Gefunden u. a.: {examples}
.focus\:text-shade-lighter:focus
Das solltest du tun: Textfarbe abdunkeln oder Hintergrund aufhellen, bis der jeweilige Mindestwert erreicht ist. Farbe nie als einziges Unterscheidungsmerkmal einsetzen.
{n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast
Nötig: 4.5:1 (normal) bzw. 3:1 (großer Text). Bei „angenommenem Seitenhintergrund“ konnte der tatsächliche Hintergrund nicht sicher bestimmt werden — im Zweifel im Browser prüfen. Gefunden u. a.: {examples}
.focus\:text-white:focus
Das solltest du tun: Textfarbe abdunkeln oder Hintergrund aufhellen, bis der jeweilige Mindestwert erreicht ist. Farbe nie als einziges Unterscheidungsmerkmal einsetzen.
{n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast
Nötig: 4.5:1 (normal) bzw. 3:1 (großer Text). Bei „angenommenem Seitenhintergrund“ konnte der tatsächliche Hintergrund nicht sicher bestimmt werden — im Zweifel im Browser prüfen. Gefunden u. a.: {examples}
.disabled\:text-shade-base:disabled
Das solltest du tun: Textfarbe abdunkeln oder Hintergrund aufhellen, bis der jeweilige Mindestwert erreicht ist. Farbe nie als einziges Unterscheidungsmerkmal einsetzen.
{n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast
Nötig: 4.5:1 (normal) bzw. 3:1 (großer Text). Bei „angenommenem Seitenhintergrund“ konnte der tatsächliche Hintergrund nicht sicher bestimmt werden — im Zweifel im Browser prüfen. Gefunden u. a.: {examples}
.disabled\:text-shade-light:disabled
Das solltest du tun: Textfarbe abdunkeln oder Hintergrund aufhellen, bis der jeweilige Mindestwert erreicht ist. Farbe nie als einziges Unterscheidungsmerkmal einsetzen.
{n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast
Nötig: 4.5:1 (normal) bzw. 3:1 (großer Text). Bei „angenommenem Seitenhintergrund“ konnte der tatsächliche Hintergrund nicht sicher bestimmt werden — im Zweifel im Browser prüfen. Gefunden u. a.: {examples}
.peer:disabled~.peer-disabled\:text-shade-base
Das solltest du tun: Textfarbe abdunkeln oder Hintergrund aufhellen, bis der jeweilige Mindestwert erreicht ist. Farbe nie als einziges Unterscheidungsmerkmal einsetzen.
{n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast
Nötig: 4.5:1 (normal) bzw. 3:1 (großer Text). Bei „angenommenem Seitenhintergrund“ konnte der tatsächliche Hintergrund nicht sicher bestimmt werden — im Zweifel im Browser prüfen. Gefunden u. a.: {examples}
.debug.svelte-1x5iokp
Das solltest du tun: Textfarbe abdunkeln oder Hintergrund aufhellen, bis der jeweilige Mindestwert erreicht ist. Farbe nie als einziges Unterscheidungsmerkmal einsetzen.
{n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast
Nötig: 4.5:1 (normal) bzw. 3:1 (großer Text). Bei „angenommenem Seitenhintergrund“ konnte der tatsächliche Hintergrund nicht sicher bestimmt werden — im Zweifel im Browser prüfen. Gefunden u. a.: {examples}
.text-effi-primary-base
Das solltest du tun: Textfarbe abdunkeln oder Hintergrund aufhellen, bis der jeweilige Mindestwert erreicht ist. Farbe nie als einziges Unterscheidungsmerkmal einsetzen.
{n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast
Nötig: 4.5:1 (normal) bzw. 3:1 (großer Text). Bei „angenommenem Seitenhintergrund“ konnte der tatsächliche Hintergrund nicht sicher bestimmt werden — im Zweifel im Browser prüfen. Gefunden u. a.: {examples}
.text-elf-primary-base
Das solltest du tun: Textfarbe abdunkeln oder Hintergrund aufhellen, bis der jeweilige Mindestwert erreicht ist. Farbe nie als einziges Unterscheidungsmerkmal einsetzen.
{n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast
Nötig: 4.5:1 (normal) bzw. 3:1 (großer Text). Bei „angenommenem Seitenhintergrund“ konnte der tatsächliche Hintergrund nicht sicher bestimmt werden — im Zweifel im Browser prüfen. Gefunden u. a.: {examples}
.text-shade-dark
Das solltest du tun: Textfarbe abdunkeln oder Hintergrund aufhellen, bis der jeweilige Mindestwert erreicht ist. Farbe nie als einziges Unterscheidungsmerkmal einsetzen.
{n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast
Nötig: 4.5:1 (normal) bzw. 3:1 (großer Text). Bei „angenommenem Seitenhintergrund“ konnte der tatsächliche Hintergrund nicht sicher bestimmt werden — im Zweifel im Browser prüfen. Gefunden u. a.: {examples}
.text-spon-primary-base
Das solltest du tun: Textfarbe abdunkeln oder Hintergrund aufhellen, bis der jeweilige Mindestwert erreicht ist. Farbe nie als einziges Unterscheidungsmerkmal einsetzen.
{n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast
Nötig: 4.5:1 (normal) bzw. 3:1 (großer Text). Bei „angenommenem Seitenhintergrund“ konnte der tatsächliche Hintergrund nicht sicher bestimmt werden — im Zweifel im Browser prüfen. Gefunden u. a.: {examples}
.disabled\:text-shade-dark:disabled
Das solltest du tun: Textfarbe abdunkeln oder Hintergrund aufhellen, bis der jeweilige Mindestwert erreicht ist. Farbe nie als einziges Unterscheidungsmerkmal einsetzen.
Bedienbar
{n} Link(s) ohne erkennbaren Namen im HTML
Leere Links oder nur ein Icon/Bild ohne alt. Ein per JavaScript gesetztes aria-label wird hier nicht erkannt.
a
Das solltest du tun: Sichtbaren Linktext ergänzen, oder bei Icon-Links aria-label bzw. ein Bild mit alt verwenden.
{n} Schaltfläche(n) ohne Namen im HTML
Buttons ohne Text und ohne aria-label sind für Screenreader stumm — sofern der Name nicht per JavaScript gesetzt wird.
button
Das solltest du tun: Button-Text ergänzen oder aria-label setzen.
Keine <h1>-Überschrift im ausgelieferten HTML
Jede Seite sollte mit genau einer h1 beginnen. Bei per JavaScript aufgebauten Seiten kann die h1 erst im Browser entstehen — dann im gerenderten DOM prüfen.
body
Das solltest du tun: Eine aussagekräftige <h1> als erste Überschrift einfügen (möglichst schon serverseitig).
Schon richtig gelöst
- Textalternativen: keine automatisch erkennbaren Probleme
- Sprung-Link zum Inhalt vorhanden
- <main>-Landmark vorhanden
Nächste Schritte
- {n} Formularfeld(er) ohne erkennbare Beschriftung. Jedes Feld mit einem <label for>-Element verbinden oder aria-label / aria-labelledby setzen. Nur ein placeholder reicht nicht.
- {n} Link(s) ohne erkennbaren Namen im HTML. Sichtbaren Linktext ergänzen, oder bei Icon-Links aria-label bzw. ein Bild mit alt verwenden.
- {n} Schaltfläche(n) ohne Namen im HTML. Button-Text ergänzen oder aria-label setzen.
- {n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast. Textfarbe abdunkeln oder Hintergrund aufhellen, bis der jeweilige Mindestwert erreicht ist. Farbe nie als einziges Unterscheidungsmerkmal einsetzen.
- {n} CSS-Regel{nPlural} mit möglicherweise zu geringem Textkontrast. Textfarbe abdunkeln oder Hintergrund aufhellen, bis der jeweilige Mindestwert erreicht ist. Farbe nie als einziges Unterscheidungsmerkmal einsetzen.
Wöchentlicher Re-Scan, JS-gerendert, E-Mail bei neuen Barrieren — kommt bald.
Barrierefreiheitserklärung erstellen →
Methodik & Grenzen
Geprüft wurde am 31.8.2026 das HTML, das www.spiegel.de beim ersten Aufruf ohne Login ausliefert, plus bis zu vier verlinkte CSS-Dateien derselben Domain. Geprüft: Farbkontrast (aus CSS), Textalternativen, Formular-Beschriftung, Bedienelement-Namen, Überschriften-Struktur, Seitentitel und -sprache, Zoom-Sperre, doppelte IDs, positive tabindex-Werte, Landmarks.
Nicht geprüft: alles, was per JavaScript entsteht, Tastatur-Bedienbarkeit, sichtbarer Fokus, Fokus-Reihenfolge, Screenreader-Ansage, Inhalte hinter Login, Unterseiten. Der automatische Test findet grob 20–35 % der WCAG-Verstöße — der Rest braucht eine manuelle Prüfung. Momentaufnahme, kein Rechtsurteil.
Overlay-Widgets (Barrierefreiheits-Buttons, die Kontrast oder Schrift umschalten) stellen keine Konformität her — die gefundenen Barrieren müssen im Quellcode behoben werden. Warum Overlays nicht helfen