Checked 8/31/2026 · https://www.spiegel.de/
32 critical barriern · plus 7 to check.
How is the score formed? (100 starting points)
| {n} form fields without a recognisable label | -18 |
| {n} link(s) without a recognisable name in the HTML | -18 |
| {n} button(s) without a name in the HTML | -18 |
| {n} CSS rule{nPlural} with possibly too low text contrast | -18 |
| {n} CSS rule{nPlural} with possibly too low text contrast | -6 |
| {n} CSS rule{nPlural} with possibly too low text contrast | -6 |
| {n} CSS rule{nPlural} with possibly too low text contrast | -6 |
| {n} CSS rule{nPlural} with possibly too low text contrast | -6 |
| {n} CSS rule{nPlural} with possibly too low text contrast | -6 |
| {n} CSS rule{nPlural} with possibly too low text contrast | -6 |
| {n} CSS rule{nPlural} with possibly too low text contrast | -6 |
| {n} CSS rule{nPlural} with possibly too low text contrast | -6 |
| {n} CSS rule{nPlural} with possibly too low text contrast | -6 |
| {n} CSS rule{nPlural} with possibly too low text contrast | -6 |
| {n} CSS rule{nPlural} with possibly too low text contrast | -6 |
| {n} CSS rule{nPlural} with possibly too low text contrast | -6 |
| {n} CSS rule{nPlural} with possibly too low text contrast | -6 |
| {n} CSS rule{nPlural} with possibly too low text contrast | -6 |
| {n} CSS rule{nPlural} with possibly too low text contrast | -6 |
| {n} CSS rule{nPlural} with possibly too low text contrast | -6 |
| {n} CSS rule{nPlural} with possibly too low text contrast | -6 |
| {n} CSS rule{nPlural} with possibly too low text contrast | -6 |
| {n} CSS rule{nPlural} with possibly too low text contrast | -6 |
| {n} CSS rule{nPlural} with possibly too low text contrast | -6 |
| {n} CSS rule{nPlural} with possibly too low text contrast | -6 |
| {n} CSS rule{nPlural} with possibly too low text contrast | -6 |
| {n} CSS rule{nPlural} with possibly too low text contrast | -6 |
| {n} CSS rule{nPlural} with possibly too low text contrast | -6 |
| {n} CSS rule{nPlural} with possibly too low text contrast | -6 |
| {n} CSS rule{nPlural} with possibly too low text contrast | -6 |
| {n} CSS rule{nPlural} with possibly too low text contrast | -6 |
| {n} CSS rule{nPlural} with possibly too low text contrast | -6 |
| No <h1> heading in the delivered HTML | -7 |
| {n} CSS rule{nPlural} with possibly too low text contrast | -2 |
| {n} CSS rule{nPlural} with possibly too low text contrast | -2 |
| {n} CSS rule{nPlural} with possibly too low text contrast | -2 |
| {n} CSS rule{nPlural} with possibly too low text contrast | -2 |
| {n} CSS rule{nPlural} with possibly too low text contrast | -2 |
| {n} CSS rule{nPlural} with possibly too low text contrast | -2 |
| Result | 0 / 100 |
Perceivable
{n} form fields without a recognisable label
Check whether there is an aria-label set via JavaScript.
input, select, textarea
This is what you should do: Link each field to a <label for> element or set aria-label / aria-labelledby. A placeholder alone is not enough.
{n} CSS rule{nPlural} with possibly too low text contrast
Required: 4.5:1 (normal) or 3:1 (large text). With an “assumed page background” the actual background could not be determined reliably — check in the browser if in doubt. Found among others: {examples}
.button-spon
This is what you should do: Darken the text colour or lighten the background until the relevant minimum value is reached. Never use colour as the only distinguishing feature.
{n} CSS rule{nPlural} with possibly too low text contrast
Required: 4.5:1 (normal) or 3:1 (large text). With an “assumed page background” the actual background could not be determined reliably — check in the browser if in doubt. Found among others: {examples}
.button-effi
This is what you should do: Darken the text colour or lighten the background until the relevant minimum value is reached. Never use colour as the only distinguishing feature.
{n} CSS rule{nPlural} with possibly too low text contrast
Required: 4.5:1 (normal) or 3:1 (large text). With an “assumed page background” the actual background could not be determined reliably — check in the browser if in doubt. Found among others: {examples}
.button-mmo
This is what you should do: Darken the text colour or lighten the background until the relevant minimum value is reached. Never use colour as the only distinguishing feature.
{n} CSS rule{nPlural} with possibly too low text contrast
Required: 4.5:1 (normal) or 3:1 (large text). With an “assumed page background” the actual background could not be determined reliably — check in the browser if in doubt. Found among others: {examples}
.button-hbm
This is what you should do: Darken the text colour or lighten the background until the relevant minimum value is reached. Never use colour as the only distinguishing feature.
{n} CSS rule{nPlural} with possibly too low text contrast
Required: 4.5:1 (normal) or 3:1 (large text). With an “assumed page background” the actual background could not be determined reliably — check in the browser if in doubt. Found among others: {examples}
input::-moz-placeholder, textarea::-moz-placeholder
This is what you should do: Darken the text colour or lighten the background until the relevant minimum value is reached. Never use colour as the only distinguishing feature.
{n} CSS rule{nPlural} with possibly too low text contrast
Required: 4.5:1 (normal) or 3:1 (large text). With an “assumed page background” the actual background could not be determined reliably — check in the browser if in doubt. Found among others: {examples}
input::placeholder, textarea::placeholder
This is what you should do: Darken the text colour or lighten the background until the relevant minimum value is reached. Never use colour as the only distinguishing feature.
{n} CSS rule{nPlural} with possibly too low text contrast
Required: 4.5:1 (normal) or 3:1 (large text). With an “assumed page background” the actual background could not be determined reliably — check in the browser if in doubt. Found among others: {examples}
body .richtext--inverted p
This is what you should do: Darken the text colour or lighten the background until the relevant minimum value is reached. Never use colour as the only distinguishing feature.
{n} CSS rule{nPlural} with possibly too low text contrast
Required: 4.5:1 (normal) or 3:1 (large text). With an “assumed page background” the actual background could not be determined reliably — check in the browser if in doubt. Found among others: {examples}
body .richtext--inverted a
This is what you should do: Darken the text colour or lighten the background until the relevant minimum value is reached. Never use colour as the only distinguishing feature.
{n} CSS rule{nPlural} with possibly too low text contrast
Required: 4.5:1 (normal) or 3:1 (large text). With an “assumed page background” the actual background could not be determined reliably — check in the browser if in doubt. Found among others: {examples}
body .richtext--inverted a:focus
This is what you should do: Darken the text colour or lighten the background until the relevant minimum value is reached. Never use colour as the only distinguishing feature.
{n} CSS rule{nPlural} with possibly too low text contrast
Required: 4.5:1 (normal) or 3:1 (large text). With an “assumed page background” the actual background could not be determined reliably — check in the browser if in doubt. Found among others: {examples}
.richtextcredit.richtextcredit--inverted a
This is what you should do: Darken the text colour or lighten the background until the relevant minimum value is reached. Never use colour as the only distinguishing feature.
{n} CSS rule{nPlural} with possibly too low text contrast
Required: 4.5:1 (normal) or 3:1 (large text). With an “assumed page background” the actual background could not be determined reliably — check in the browser if in doubt. Found among others: {examples}
.richtextsystem.richtextsystem--inverted a
This is what you should do: Darken the text colour or lighten the background until the relevant minimum value is reached. Never use colour as the only distinguishing feature.
{n} CSS rule{nPlural} with possibly too low text contrast
Required: 4.5:1 (normal) or 3:1 (large text). With an “assumed page background” the actual background could not be determined reliably — check in the browser if in doubt. Found among others: {examples}
.richtextsystem.richtextsystem--inverted a:hover
This is what you should do: Darken the text colour or lighten the background until the relevant minimum value is reached. Never use colour as the only distinguishing feature.
{n} CSS rule{nPlural} with possibly too low text contrast
Required: 4.5:1 (normal) or 3:1 (large text). With an “assumed page background” the actual background could not be determined reliably — check in the browser if in doubt. Found among others: {examples}
.richtextsystem.richtextsystem--inverted a:focus
This is what you should do: Darken the text colour or lighten the background until the relevant minimum value is reached. Never use colour as the only distinguishing feature.
{n} CSS rule{nPlural} with possibly too low text contrast
Required: 4.5:1 (normal) or 3:1 (large text). With an “assumed page background” the actual background could not be determined reliably — check in the browser if in doubt. Found among others: {examples}
.text-shade-base
This is what you should do: Darken the text colour or lighten the background until the relevant minimum value is reached. Never use colour as the only distinguishing feature.
{n} CSS rule{nPlural} with possibly too low text contrast
Required: 4.5:1 (normal) or 3:1 (large text). With an “assumed page background” the actual background could not be determined reliably — check in the browser if in doubt. Found among others: {examples}
.text-shade-light
This is what you should do: Darken the text colour or lighten the background until the relevant minimum value is reached. Never use colour as the only distinguishing feature.
{n} CSS rule{nPlural} with possibly too low text contrast
Required: 4.5:1 (normal) or 3:1 (large text). With an “assumed page background” the actual background could not be determined reliably — check in the browser if in doubt. Found among others: {examples}
.text-shade-lighter
This is what you should do: Darken the text colour or lighten the background until the relevant minimum value is reached. Never use colour as the only distinguishing feature.
{n} CSS rule{nPlural} with possibly too low text contrast
Required: 4.5:1 (normal) or 3:1 (large text). With an “assumed page background” the actual background could not be determined reliably — check in the browser if in doubt. Found among others: {examples}
.text-shade-lightest
This is what you should do: Darken the text colour or lighten the background until the relevant minimum value is reached. Never use colour as the only distinguishing feature.
{n} CSS rule{nPlural} with possibly too low text contrast
Required: 4.5:1 (normal) or 3:1 (large text). With an “assumed page background” the actual background could not be determined reliably — check in the browser if in doubt. Found among others: {examples}
.text-white
This is what you should do: Darken the text colour or lighten the background until the relevant minimum value is reached. Never use colour as the only distinguishing feature.
{n} CSS rule{nPlural} with possibly too low text contrast
Required: 4.5:1 (normal) or 3:1 (large text). With an “assumed page background” the actual background could not be determined reliably — check in the browser if in doubt. Found among others: {examples}
.placeholder-shade-base::-moz-placeholder
This is what you should do: Darken the text colour or lighten the background until the relevant minimum value is reached. Never use colour as the only distinguishing feature.
{n} CSS rule{nPlural} with possibly too low text contrast
Required: 4.5:1 (normal) or 3:1 (large text). With an “assumed page background” the actual background could not be determined reliably — check in the browser if in doubt. Found among others: {examples}
.placeholder-shade-base::placeholder
This is what you should do: Darken the text colour or lighten the background until the relevant minimum value is reached. Never use colour as the only distinguishing feature.
{n} CSS rule{nPlural} with possibly too low text contrast
Required: 4.5:1 (normal) or 3:1 (large text). With an “assumed page background” the actual background could not be determined reliably — check in the browser if in doubt. Found among others: {examples}
.hover\:text-shade-lighter:hover
This is what you should do: Darken the text colour or lighten the background until the relevant minimum value is reached. Never use colour as the only distinguishing feature.
{n} CSS rule{nPlural} with possibly too low text contrast
Required: 4.5:1 (normal) or 3:1 (large text). With an “assumed page background” the actual background could not be determined reliably — check in the browser if in doubt. Found among others: {examples}
.hover\:text-shade-lightest:hover
This is what you should do: Darken the text colour or lighten the background until the relevant minimum value is reached. Never use colour as the only distinguishing feature.
{n} CSS rule{nPlural} with possibly too low text contrast
Required: 4.5:1 (normal) or 3:1 (large text). With an “assumed page background” the actual background could not be determined reliably — check in the browser if in doubt. Found among others: {examples}
.hover\:text-white:hover
This is what you should do: Darken the text colour or lighten the background until the relevant minimum value is reached. Never use colour as the only distinguishing feature.
{n} CSS rule{nPlural} with possibly too low text contrast
Required: 4.5:1 (normal) or 3:1 (large text). With an “assumed page background” the actual background could not be determined reliably — check in the browser if in doubt. Found among others: {examples}
.focus\:text-shade-base:focus
This is what you should do: Darken the text colour or lighten the background until the relevant minimum value is reached. Never use colour as the only distinguishing feature.
{n} CSS rule{nPlural} with possibly too low text contrast
Required: 4.5:1 (normal) or 3:1 (large text). With an “assumed page background” the actual background could not be determined reliably — check in the browser if in doubt. Found among others: {examples}
.focus\:text-shade-lighter:focus
This is what you should do: Darken the text colour or lighten the background until the relevant minimum value is reached. Never use colour as the only distinguishing feature.
{n} CSS rule{nPlural} with possibly too low text contrast
Required: 4.5:1 (normal) or 3:1 (large text). With an “assumed page background” the actual background could not be determined reliably — check in the browser if in doubt. Found among others: {examples}
.focus\:text-white:focus
This is what you should do: Darken the text colour or lighten the background until the relevant minimum value is reached. Never use colour as the only distinguishing feature.
{n} CSS rule{nPlural} with possibly too low text contrast
Required: 4.5:1 (normal) or 3:1 (large text). With an “assumed page background” the actual background could not be determined reliably — check in the browser if in doubt. Found among others: {examples}
.disabled\:text-shade-base:disabled
This is what you should do: Darken the text colour or lighten the background until the relevant minimum value is reached. Never use colour as the only distinguishing feature.
{n} CSS rule{nPlural} with possibly too low text contrast
Required: 4.5:1 (normal) or 3:1 (large text). With an “assumed page background” the actual background could not be determined reliably — check in the browser if in doubt. Found among others: {examples}
.disabled\:text-shade-light:disabled
This is what you should do: Darken the text colour or lighten the background until the relevant minimum value is reached. Never use colour as the only distinguishing feature.
{n} CSS rule{nPlural} with possibly too low text contrast
Required: 4.5:1 (normal) or 3:1 (large text). With an “assumed page background” the actual background could not be determined reliably — check in the browser if in doubt. Found among others: {examples}
.peer:disabled~.peer-disabled\:text-shade-base
This is what you should do: Darken the text colour or lighten the background until the relevant minimum value is reached. Never use colour as the only distinguishing feature.
{n} CSS rule{nPlural} with possibly too low text contrast
Required: 4.5:1 (normal) or 3:1 (large text). With an “assumed page background” the actual background could not be determined reliably — check in the browser if in doubt. Found among others: {examples}
.debug.svelte-1x5iokp
This is what you should do: Darken the text colour or lighten the background until the relevant minimum value is reached. Never use colour as the only distinguishing feature.
{n} CSS rule{nPlural} with possibly too low text contrast
Required: 4.5:1 (normal) or 3:1 (large text). With an “assumed page background” the actual background could not be determined reliably — check in the browser if in doubt. Found among others: {examples}
.text-effi-primary-base
This is what you should do: Darken the text colour or lighten the background until the relevant minimum value is reached. Never use colour as the only distinguishing feature.
{n} CSS rule{nPlural} with possibly too low text contrast
Required: 4.5:1 (normal) or 3:1 (large text). With an “assumed page background” the actual background could not be determined reliably — check in the browser if in doubt. Found among others: {examples}
.text-elf-primary-base
This is what you should do: Darken the text colour or lighten the background until the relevant minimum value is reached. Never use colour as the only distinguishing feature.
{n} CSS rule{nPlural} with possibly too low text contrast
Required: 4.5:1 (normal) or 3:1 (large text). With an “assumed page background” the actual background could not be determined reliably — check in the browser if in doubt. Found among others: {examples}
.text-shade-dark
This is what you should do: Darken the text colour or lighten the background until the relevant minimum value is reached. Never use colour as the only distinguishing feature.
{n} CSS rule{nPlural} with possibly too low text contrast
Required: 4.5:1 (normal) or 3:1 (large text). With an “assumed page background” the actual background could not be determined reliably — check in the browser if in doubt. Found among others: {examples}
.text-spon-primary-base
This is what you should do: Darken the text colour or lighten the background until the relevant minimum value is reached. Never use colour as the only distinguishing feature.
{n} CSS rule{nPlural} with possibly too low text contrast
Required: 4.5:1 (normal) or 3:1 (large text). With an “assumed page background” the actual background could not be determined reliably — check in the browser if in doubt. Found among others: {examples}
.disabled\:text-shade-dark:disabled
This is what you should do: Darken the text colour or lighten the background until the relevant minimum value is reached. Never use colour as the only distinguishing feature.
Operable
{n} link(s) without a recognisable name in the HTML
Empty links or just an icon/image without alt. An aria-label set via JavaScript is not recognised here.
a
This is what you should do: Add visible link text, or use aria-label or an image with alt for icon links.
{n} button(s) without a name in the HTML
Buttons without text and without an aria-label are mute to screen readers — unless the name is set via JavaScript.
button
This is what you should do: Add button text or set an aria-label.
No <h1> heading in the delivered HTML
Each page should begin with exactly one h1. On pages built via JavaScript the h1 may only appear in the browser — then check in the rendered DOM.
body
This is what you should do: Insert a meaningful <h1> as the first heading (ideally already server-side).
Already handled correctly
- Textalternativen: keine automatisch erkennbaren Probleme
- A skip link to the content exists
- A <main> landmark exists
Next steps
- {n} form fields without a recognisable label. Link each field to a <label for> element or set aria-label / aria-labelledby. A placeholder alone is not enough.
- {n} link(s) without a recognisable name in the HTML. Add visible link text, or use aria-label or an image with alt for icon links.
- {n} button(s) without a name in the HTML. Add button text or set an aria-label.
- {n} CSS rule{nPlural} with possibly too low text contrast. Darken the text colour or lighten the background until the relevant minimum value is reached. Never use colour as the only distinguishing feature.
- {n} CSS rule{nPlural} with possibly too low text contrast. Darken the text colour or lighten the background until the relevant minimum value is reached. Never use colour as the only distinguishing feature.
Weekly re-scan, JS-rendered, email on new barriers — coming soon.
Create an accessibility statement →
Method & limits
On 8/31/2026 the HTML that www.spiegel.de delivers on a first visit without login was checked, plus up to four linked CSS files from the same domain. Checked: colour contrast (from CSS), text alternatives, form labelling, names of controls, heading structure, page title and page language, zoom lock, duplicate ids, positive tabindex values, landmarks.
Not checked: anything that arises via JavaScript, keyboard operability, visible focus, focus order, screen-reader announcement, content behind login, subpages. The automated test finds roughly 20–35% of WCAG breaches — the rest needs a manual check. A snapshot, not a legal decision.