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)
| 1 Formularfeld(er) ohne zugeordnete Beschriftung | -18 |
| 3 Link(s) ohne erkennbaren Namen | -18 |
| 21 Schaltfläche(n) ohne Namen | -18 |
| Zu geringer Textkontrast: 1.00:1 (nötig 4.5:1) | -18 |
| Zu geringer Textkontrast: 1.00:1 (nötig 4.5:1) | -6 |
| Zu geringer Textkontrast: 1.00:1 (nötig 4.5:1) | -6 |
| Zu geringer Textkontrast: 1.00:1 (nötig 4.5:1) | -6 |
| Zu geringer Textkontrast: 2.54:1 (nötig 4.5:1) | -6 |
| Zu geringer Textkontrast: 2.54:1 (nötig 4.5:1) | -6 |
| Zu geringer Textkontrast: 1.00:1 (nötig 4.5:1) | -6 |
| Zu geringer Textkontrast: 1.00:1 (nötig 4.5:1) | -6 |
| Zu geringer Textkontrast: 1.00:1 (nötig 4.5:1) | -6 |
| Zu geringer Textkontrast: 1.00:1 (nötig 4.5:1) | -6 |
| Zu geringer Textkontrast: 1.15:1 (nötig 4.5:1) | -6 |
| Zu geringer Textkontrast: 1.15:1 (nötig 4.5:1) | -6 |
| Zu geringer Textkontrast: 1.15:1 (nötig 4.5:1) | -6 |
| Zu geringer Textkontrast: 2.95:1 (nötig 4.5:1) | -6 |
| Zu geringer Textkontrast: 1.96:1 (nötig 4.5:1) | -6 |
| Zu geringer Textkontrast: 1.38:1 (nötig 4.5:1) | -6 |
| Zu geringer Textkontrast: 1.15:1 (nötig 4.5:1) | -6 |
| Zu geringer Textkontrast: 1.00:1 (nötig 4.5:1) | -6 |
| Zu geringer Textkontrast: 2.95:1 (nötig 4.5:1) | -6 |
| Zu geringer Textkontrast: 2.95:1 (nötig 4.5:1) | -6 |
| Zu geringer Textkontrast: 1.38:1 (nötig 4.5:1) | -6 |
| Zu geringer Textkontrast: 1.15:1 (nötig 4.5:1) | -6 |
| Zu geringer Textkontrast: 1.00:1 (nötig 4.5:1) | -6 |
| Zu geringer Textkontrast: 2.95:1 (nötig 4.5:1) | -6 |
| Zu geringer Textkontrast: 1.38:1 (nötig 4.5:1) | -6 |
| Zu geringer Textkontrast: 1.00:1 (nötig 4.5:1) | -6 |
| Zu geringer Textkontrast: 2.95:1 (nötig 4.5:1) | -6 |
| Zu geringer Textkontrast: 1.96:1 (nötig 4.5:1) | -6 |
| Zu geringer Textkontrast: 2.95:1 (nötig 4.5:1) | -6 |
| Keine <h1>-Überschrift | -7 |
| Zu geringer Textkontrast: 4.00:1 (nötig 4.5:1) | -2 |
| Zu geringer Textkontrast: 4.04:1 (nötig 4.5:1) | -2 |
| Zu geringer Textkontrast: 4.29:1 (nötig 4.5:1) | -2 |
| Zu geringer Textkontrast: 4.04:1 (nötig 4.5:1) | -2 |
| Zu geringer Textkontrast: 4.04:1 (nötig 4.5:1) | -2 |
| Zu geringer Textkontrast: 4.04:1 (nötig 4.5:1) | -2 |
| Ergebnis | 0 / 100 |
Wahrnehmbar
1 Formularfeld(er) ohne zugeordnete Beschriftung
Beispiele: input#search-input-field
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.
Zu geringer Textkontrast: 1.00:1 (nötig 4.5:1)
Regel `.button-spon`: Vordergrund #FFFFFF, Hintergrund Seitenhintergrund.
.button-spon
Das solltest du tun: Farben anpassen, bis mindestens 4.5:1 erreicht ist (dunklerer Text oder hellerer Hintergrund). Ein Kontrast-Prüfer hilft beim Feinjustieren.
Zu geringer Textkontrast: 1.00:1 (nötig 4.5:1)
Regel `.button-effi`: Vordergrund #FFFFFF, Hintergrund Seitenhintergrund.
.button-effi
Das solltest du tun: Farben anpassen, bis mindestens 4.5:1 erreicht ist (dunklerer Text oder hellerer Hintergrund). Ein Kontrast-Prüfer hilft beim Feinjustieren.
Zu geringer Textkontrast: 1.00:1 (nötig 4.5:1)
Regel `.button-mmo`: Vordergrund #FFFFFF, Hintergrund Seitenhintergrund.
.button-mmo
Das solltest du tun: Farben anpassen, bis mindestens 4.5:1 erreicht ist (dunklerer Text oder hellerer Hintergrund). Ein Kontrast-Prüfer hilft beim Feinjustieren.
Zu geringer Textkontrast: 1.00:1 (nötig 4.5:1)
Regel `.button-hbm`: Vordergrund #FFFFFF, Hintergrund Seitenhintergrund.
.button-hbm
Das solltest du tun: Farben anpassen, bis mindestens 4.5:1 erreicht ist (dunklerer Text oder hellerer Hintergrund). Ein Kontrast-Prüfer hilft beim Feinjustieren.
Zu geringer Textkontrast: 2.54:1 (nötig 4.5:1)
Regel `input::-moz-placeholder, textarea::-moz-placeholder`: Vordergrund #9ca3af, Hintergrund Seitenhintergrund.
input::-moz-placeholder, textarea::-moz-placeholder
Das solltest du tun: Farben anpassen, bis mindestens 4.5:1 erreicht ist (dunklerer Text oder hellerer Hintergrund). Ein Kontrast-Prüfer hilft beim Feinjustieren.
Zu geringer Textkontrast: 2.54:1 (nötig 4.5:1)
Regel `input::placeholder, textarea::placeholder`: Vordergrund #9ca3af, Hintergrund Seitenhintergrund.
input::placeholder, textarea::placeholder
Das solltest du tun: Farben anpassen, bis mindestens 4.5:1 erreicht ist (dunklerer Text oder hellerer Hintergrund). Ein Kontrast-Prüfer hilft beim Feinjustieren.
Zu geringer Textkontrast: 1.00:1 (nötig 4.5:1)
Regel `body .richtext--inverted p`: Vordergrund #fff, Hintergrund Seitenhintergrund.
body .richtext--inverted p
Das solltest du tun: Farben anpassen, bis mindestens 4.5:1 erreicht ist (dunklerer Text oder hellerer Hintergrund). Ein Kontrast-Prüfer hilft beim Feinjustieren.
Zu geringer Textkontrast: 1.00:1 (nötig 4.5:1)
Regel `body .richtext--inverted a`: Vordergrund #fff, Hintergrund Seitenhintergrund.
body .richtext--inverted a
Das solltest du tun: Farben anpassen, bis mindestens 4.5:1 erreicht ist (dunklerer Text oder hellerer Hintergrund). Ein Kontrast-Prüfer hilft beim Feinjustieren.
Zu geringer Textkontrast: 1.00:1 (nötig 4.5:1)
Regel `body .richtext--inverted a:focus`: Vordergrund #fff, Hintergrund Seitenhintergrund.
body .richtext--inverted a:focus
Das solltest du tun: Farben anpassen, bis mindestens 4.5:1 erreicht ist (dunklerer Text oder hellerer Hintergrund). Ein Kontrast-Prüfer hilft beim Feinjustieren.
Zu geringer Textkontrast: 1.00:1 (nötig 4.5:1)
Regel `.richtextcredit.richtextcredit--inverted a`: Vordergrund #fff, Hintergrund Seitenhintergrund.
.richtextcredit.richtextcredit--inverted a
Das solltest du tun: Farben anpassen, bis mindestens 4.5:1 erreicht ist (dunklerer Text oder hellerer Hintergrund). Ein Kontrast-Prüfer hilft beim Feinjustieren.
Zu geringer Textkontrast: 1.15:1 (nötig 4.5:1)
Regel `.richtextsystem.richtextsystem--inverted a`: Vordergrund #f1efed, Hintergrund Seitenhintergrund.
.richtextsystem.richtextsystem--inverted a
Das solltest du tun: Farben anpassen, bis mindestens 4.5:1 erreicht ist (dunklerer Text oder hellerer Hintergrund). Ein Kontrast-Prüfer hilft beim Feinjustieren.
Zu geringer Textkontrast: 1.15:1 (nötig 4.5:1)
Regel `.richtextsystem.richtextsystem--inverted a:hover`: Vordergrund #f1efed, Hintergrund Seitenhintergrund.
.richtextsystem.richtextsystem--inverted a:hover
Das solltest du tun: Farben anpassen, bis mindestens 4.5:1 erreicht ist (dunklerer Text oder hellerer Hintergrund). Ein Kontrast-Prüfer hilft beim Feinjustieren.
Zu geringer Textkontrast: 1.15:1 (nötig 4.5:1)
Regel `.richtextsystem.richtextsystem--inverted a:focus`: Vordergrund #f1efed, Hintergrund Seitenhintergrund.
.richtextsystem.richtextsystem--inverted a:focus
Das solltest du tun: Farben anpassen, bis mindestens 4.5:1 erreicht ist (dunklerer Text oder hellerer Hintergrund). Ein Kontrast-Prüfer hilft beim Feinjustieren.
Zu geringer Textkontrast: 2.95:1 (nötig 4.5:1)
Regel `.text-shade-base`: Vordergrund #989694, Hintergrund Seitenhintergrund.
.text-shade-base
Das solltest du tun: Farben anpassen, bis mindestens 4.5:1 erreicht ist (dunklerer Text oder hellerer Hintergrund). Ein Kontrast-Prüfer hilft beim Feinjustieren.
Zu geringer Textkontrast: 1.96:1 (nötig 4.5:1)
Regel `.text-shade-light`: Vordergrund #bbb9b7, Hintergrund Seitenhintergrund.
.text-shade-light
Das solltest du tun: Farben anpassen, bis mindestens 4.5:1 erreicht ist (dunklerer Text oder hellerer Hintergrund). Ein Kontrast-Prüfer hilft beim Feinjustieren.
Zu geringer Textkontrast: 1.38:1 (nötig 4.5:1)
Regel `.text-shade-lighter`: Vordergrund #dddbd9, Hintergrund Seitenhintergrund.
.text-shade-lighter
Das solltest du tun: Farben anpassen, bis mindestens 4.5:1 erreicht ist (dunklerer Text oder hellerer Hintergrund). Ein Kontrast-Prüfer hilft beim Feinjustieren.
Zu geringer Textkontrast: 1.15:1 (nötig 4.5:1)
Regel `.text-shade-lightest`: Vordergrund #f1efed, Hintergrund Seitenhintergrund.
.text-shade-lightest
Das solltest du tun: Farben anpassen, bis mindestens 4.5:1 erreicht ist (dunklerer Text oder hellerer Hintergrund). Ein Kontrast-Prüfer hilft beim Feinjustieren.
Zu geringer Textkontrast: 1.00:1 (nötig 4.5:1)
Regel `.text-white`: Vordergrund #fff, Hintergrund Seitenhintergrund.
.text-white
Das solltest du tun: Farben anpassen, bis mindestens 4.5:1 erreicht ist (dunklerer Text oder hellerer Hintergrund). Ein Kontrast-Prüfer hilft beim Feinjustieren.
Zu geringer Textkontrast: 2.95:1 (nötig 4.5:1)
Regel `.placeholder-shade-base::-moz-placeholder`: Vordergrund #989694, Hintergrund Seitenhintergrund.
.placeholder-shade-base::-moz-placeholder
Das solltest du tun: Farben anpassen, bis mindestens 4.5:1 erreicht ist (dunklerer Text oder hellerer Hintergrund). Ein Kontrast-Prüfer hilft beim Feinjustieren.
Zu geringer Textkontrast: 2.95:1 (nötig 4.5:1)
Regel `.placeholder-shade-base::placeholder`: Vordergrund #989694, Hintergrund Seitenhintergrund.
.placeholder-shade-base::placeholder
Das solltest du tun: Farben anpassen, bis mindestens 4.5:1 erreicht ist (dunklerer Text oder hellerer Hintergrund). Ein Kontrast-Prüfer hilft beim Feinjustieren.
Zu geringer Textkontrast: 1.38:1 (nötig 4.5:1)
Regel `.hover\:text-shade-lighter:hover`: Vordergrund #dddbd9, Hintergrund Seitenhintergrund.
.hover\:text-shade-lighter:hover
Das solltest du tun: Farben anpassen, bis mindestens 4.5:1 erreicht ist (dunklerer Text oder hellerer Hintergrund). Ein Kontrast-Prüfer hilft beim Feinjustieren.
Zu geringer Textkontrast: 1.15:1 (nötig 4.5:1)
Regel `.hover\:text-shade-lightest:hover`: Vordergrund #f1efed, Hintergrund Seitenhintergrund.
.hover\:text-shade-lightest:hover
Das solltest du tun: Farben anpassen, bis mindestens 4.5:1 erreicht ist (dunklerer Text oder hellerer Hintergrund). Ein Kontrast-Prüfer hilft beim Feinjustieren.
Zu geringer Textkontrast: 1.00:1 (nötig 4.5:1)
Regel `.hover\:text-white:hover`: Vordergrund #fff, Hintergrund Seitenhintergrund.
.hover\:text-white:hover
Das solltest du tun: Farben anpassen, bis mindestens 4.5:1 erreicht ist (dunklerer Text oder hellerer Hintergrund). Ein Kontrast-Prüfer hilft beim Feinjustieren.
Zu geringer Textkontrast: 2.95:1 (nötig 4.5:1)
Regel `.focus\:text-shade-base:focus`: Vordergrund #989694, Hintergrund Seitenhintergrund.
.focus\:text-shade-base:focus
Das solltest du tun: Farben anpassen, bis mindestens 4.5:1 erreicht ist (dunklerer Text oder hellerer Hintergrund). Ein Kontrast-Prüfer hilft beim Feinjustieren.
Zu geringer Textkontrast: 1.38:1 (nötig 4.5:1)
Regel `.focus\:text-shade-lighter:focus`: Vordergrund #dddbd9, Hintergrund Seitenhintergrund.
.focus\:text-shade-lighter:focus
Das solltest du tun: Farben anpassen, bis mindestens 4.5:1 erreicht ist (dunklerer Text oder hellerer Hintergrund). Ein Kontrast-Prüfer hilft beim Feinjustieren.
Zu geringer Textkontrast: 1.00:1 (nötig 4.5:1)
Regel `.focus\:text-white:focus`: Vordergrund #fff, Hintergrund Seitenhintergrund.
.focus\:text-white:focus
Das solltest du tun: Farben anpassen, bis mindestens 4.5:1 erreicht ist (dunklerer Text oder hellerer Hintergrund). Ein Kontrast-Prüfer hilft beim Feinjustieren.
Zu geringer Textkontrast: 2.95:1 (nötig 4.5:1)
Regel `.disabled\:text-shade-base:disabled`: Vordergrund #989694, Hintergrund Seitenhintergrund.
.disabled\:text-shade-base:disabled
Das solltest du tun: Farben anpassen, bis mindestens 4.5:1 erreicht ist (dunklerer Text oder hellerer Hintergrund). Ein Kontrast-Prüfer hilft beim Feinjustieren.
Zu geringer Textkontrast: 1.96:1 (nötig 4.5:1)
Regel `.disabled\:text-shade-light:disabled`: Vordergrund #bbb9b7, Hintergrund Seitenhintergrund.
.disabled\:text-shade-light:disabled
Das solltest du tun: Farben anpassen, bis mindestens 4.5:1 erreicht ist (dunklerer Text oder hellerer Hintergrund). Ein Kontrast-Prüfer hilft beim Feinjustieren.
Zu geringer Textkontrast: 2.95:1 (nötig 4.5:1)
Regel `.peer:disabled~.peer-disabled\:text-shade-base`: Vordergrund #989694, Hintergrund Seitenhintergrund.
.peer:disabled~.peer-disabled\:text-shade-base
Das solltest du tun: Farben anpassen, bis mindestens 4.5:1 erreicht ist (dunklerer Text oder hellerer Hintergrund). Ein Kontrast-Prüfer hilft beim Feinjustieren.
Zu geringer Textkontrast: 4.00:1 (nötig 4.5:1)
Regel `.debug.svelte-1x5iokp`: Vordergrund red, Hintergrund Seitenhintergrund.
.debug.svelte-1x5iokp
Das solltest du tun: Farben anpassen, bis mindestens 4.5:1 erreicht ist (dunklerer Text oder hellerer Hintergrund). Ein Kontrast-Prüfer hilft beim Feinjustieren.
Zu geringer Textkontrast: 4.04:1 (nötig 4.5:1)
Regel `.text-effi-primary-base`: Vordergrund #e64415, Hintergrund Seitenhintergrund.
.text-effi-primary-base
Das solltest du tun: Farben anpassen, bis mindestens 4.5:1 erreicht ist (dunklerer Text oder hellerer Hintergrund). Ein Kontrast-Prüfer hilft beim Feinjustieren.
Zu geringer Textkontrast: 4.29:1 (nötig 4.5:1)
Regel `.text-elf-primary-base`: Vordergrund #3c8771, Hintergrund Seitenhintergrund.
.text-elf-primary-base
Das solltest du tun: Farben anpassen, bis mindestens 4.5:1 erreicht ist (dunklerer Text oder hellerer Hintergrund). Ein Kontrast-Prüfer hilft beim Feinjustieren.
Zu geringer Textkontrast: 4.04:1 (nötig 4.5:1)
Regel `.text-shade-dark`: Vordergrund #807e7c, Hintergrund Seitenhintergrund.
.text-shade-dark
Das solltest du tun: Farben anpassen, bis mindestens 4.5:1 erreicht ist (dunklerer Text oder hellerer Hintergrund). Ein Kontrast-Prüfer hilft beim Feinjustieren.
Zu geringer Textkontrast: 4.04:1 (nötig 4.5:1)
Regel `.text-spon-primary-base`: Vordergrund #e64415, Hintergrund Seitenhintergrund.
.text-spon-primary-base
Das solltest du tun: Farben anpassen, bis mindestens 4.5:1 erreicht ist (dunklerer Text oder hellerer Hintergrund). Ein Kontrast-Prüfer hilft beim Feinjustieren.
Zu geringer Textkontrast: 4.04:1 (nötig 4.5:1)
Regel `.disabled\:text-shade-dark:disabled`: Vordergrund #807e7c, Hintergrund Seitenhintergrund.
.disabled\:text-shade-dark:disabled
Das solltest du tun: Farben anpassen, bis mindestens 4.5:1 erreicht ist (dunklerer Text oder hellerer Hintergrund). Ein Kontrast-Prüfer hilft beim Feinjustieren.
Bedienbar
3 Link(s) ohne erkennbaren Namen
Leere Links oder nur ein Icon/Bild ohne alt. Beispiele: <a target="_self" class="block svelte-1x5iokp">, <a target="_self" class="flex flex-col text-black dark:text-shade-ligh, <a target="_self" class="text-black dark:text-shade-lightest block">
a
Das solltest du tun: Sichtbaren Linktext ergänzen, oder bei Icon-Links aria-label bzw. ein Bild mit alt verwenden.
21 Schaltfläche(n) ohne Namen
Buttons ohne Text und ohne aria-label sind für Screenreader stumm.
button
Das solltest du tun: Button-Text ergänzen oder aria-label setzen.
Keine <h1>-Überschrift
Jede Seite sollte mit genau einer h1 beginnen.
body
Das solltest du tun: Eine aussagekräftige <h1> als erste Überschrift einfügen.
Schon richtig gelöst
- Textalternativen: keine automatisch erkennbaren Probleme
- Sprung-Link zum Inhalt vorhanden
- <main>-Landmark vorhanden
Nächste Schritte
- 1 Formularfeld(er) ohne zugeordnete Beschriftung. Jedes Feld mit einem <label for>-Element verbinden oder aria-label / aria-labelledby setzen. Nur ein placeholder reicht nicht.
- 3 Link(s) ohne erkennbaren Namen. Sichtbaren Linktext ergänzen, oder bei Icon-Links aria-label bzw. ein Bild mit alt verwenden.
- 21 Schaltfläche(n) ohne Namen. Button-Text ergänzen oder aria-label setzen.
- Zu geringer Textkontrast: 1.00:1 (nötig 4.5:1). Farben anpassen, bis mindestens 4.5:1 erreicht ist (dunklerer Text oder hellerer Hintergrund). Ein Kontrast-Prüfer hilft beim Feinjustieren.
- Zu geringer Textkontrast: 1.00:1 (nötig 4.5:1). Farben anpassen, bis mindestens 4.5:1 erreicht ist (dunklerer Text oder hellerer Hintergrund). Ein Kontrast-Prüfer hilft beim Feinjustieren.
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.