CARGRAPHIC×Marc Märdian Softwaredevelopment
← Zurück zur Übersicht
Punkt 04

Barrierefreiheit — was das BFSG vom Webshop verlangt

Seit dem 28.06.2025 ist Barrierefreiheit für Verbraucher-Webshops kein Nice-to-have mehr, sondern gesetzliche Pflicht. Was das konkret heißt und was passieren kann.

28.06.2025
BFSG in Kraft — seit 13 Monaten
WCAG 2.1 AA
Prüfmaßstab via EN 301 549
bis 100.000 €
Bußgeldrahmen § 37 BFSG
3,23 : 1
Orange auf Weiß — gefordert sind 4,5:1
1 · Geltungsbereich

Betrifft das CARGRAPHIC überhaupt?

Das Barrierefreiheitsstärkungsgesetz (BFSG) setzt die EU-Richtlinie 2019/882 („European Accessibility Act") um. Drei Fragen entscheiden — für einen B2C-Webshop lauten alle drei Antworten gleich.

Frage 01

Dienstleistung im elektronischen Geschäftsverkehr?

Erfasst ist jede Website, über die ein Verbraucher einen Vertrag abschließen kann — Warenkorb, Bestellstrecke, Kundenkonto. Auch Anfrage- und Buchungsformulare, die auf einen Vertragsschluss zielen, werden von der Praxis überwiegend darunter gefasst.

Ja — Webshop vorhanden
Frage 02

Richtet sich das Angebot an Verbraucher (B2C)?

Reines B2B — also Angebote ausschließlich an Händler und Werkstätten mit entsprechender Zugangsbeschränkung — fällt nicht unter das BFSG. Sobald Privatkunden bestellen können, greift es.

Ja — Privatkunden kaufen
Frage 03

Greift die Kleinstunternehmen-Ausnahme?

Befreit sind für Dienstleistungen nur Unternehmen mit weniger als 10 Beschäftigten und höchstens 2 Mio. € Jahresumsatz bzw. Bilanzsumme (§ 3 Abs. 3 BFSG). Für Produkte gilt diese Ausnahme ohnehin nicht.

Nein — Schwelle deutlich überschritten
Ergebnis: Der Webshop fällt in den Anwendungsbereich — die Pflicht besteht bereits seit dem 28.06.2025, es läuft keine Schonfrist mehr. Die Übergangsregelung des § 38 BFSG (Weiterbetrieb bis 27.06.2030) betrifft Dienstleistungen, die vor dem Stichtag eingesetzte Produkte verwenden — etwa Terminals und Automaten. Auf Websites lässt sie sich nach überwiegender Auffassung nicht anwenden.

Eine Nuance für die Diskussion: Die reine Informations-Website ohne Bestellmöglichkeit ist rechtlich der Graubereich; sobald dort ein Anfrage- oder Terminformular steht (siehe Punkte 02 und 12), verschiebt sich die Bewertung Richtung „erfasst".
2 · Anforderungen

Was technisch und inhaltlich sitzen muss

Das Gesetz selbst nennt keine Pixel. Die Konkretisierung läuft über die BFSG-Verordnung (BFSGV) und die harmonisierte Norm EN 301 549 — und die verweist auf die WCAG 2.1, Konformitätsstufe AA. Das ist der Maßstab, an dem geprüft wird.

Wahrnehmbar

WCAG 1.1 – 1.4
  • Alt-Texte für alle informativen Bilder — Produktfotos, Logos, Icons
  • Textkontrast mind. 4,5:1, große Schrift und Bedienelemente 3:1
  • Zoom bis 200 % ohne Textverlust, Umbruch bei 320 px Breite
  • Videos mit Untertiteln — betrifft die Sound- und Fahrzeugvideos

Bedienbar

WCAG 2.1 – 2.5
  • Alles per Tastatur erreichbar: Navigation, Filter, Warenkorb, Checkout
  • Sichtbarer Fokus-Indikator auf jedem Element
  • Keine Tastaturfalle in Overlays, Cookie-Banner, Bildergalerien
  • „Zum Inhalt springen"-Link vor der Hauptnavigation

Verständlich

WCAG 3.1 – 3.3
  • lang="de" gesetzt, fremdsprachige Passagen ausgezeichnet
  • Jedes Formularfeld mit sichtbarem, verknüpftem Label
  • Fehlermeldungen benennen Feld und Korrekturvorschlag
  • Konsistente Navigation über alle Seiten

Robust

WCAG 4.1
  • Valides, semantisches HTML — Überschriftenhierarchie ohne Sprünge
  • Screenreader-Test mit NVDA (Windows) und VoiceOver (macOS/iOS)
  • ARIA nur, wo natives HTML nicht reicht — falsches ARIA ist schlimmer als keins
  • Status-Meldungen (z. B. „in den Warenkorb gelegt") ansagbar

Der Kontrast-Check am eigenen Design

Das ist kein theoretisches Kriterium, sondern eine Messgröße — und beim CARGRAPHIC-Orange gibt es einen konkreten Befund. Zuerst: was die Zahl überhaupt bedeutet.

Das Kontrastverhältnis vergleicht die Helligkeit zweier Farben — Schrift gegen Hintergrund. Es wird nicht geschätzt, sondern nach einer festen Formel aus den RGB-Werten berechnet (relative Luminanz, WCAG 1.4.3). Die Skala reicht von 1:1 (beide Farben identisch, Text unsichtbar) bis 21:1 (Schwarz auf Weiß, das Maximum). WCAG 2.1 Level AA verlangt mindestens 4,5:1 für normalen Text; für große Schrift ab 24 px sowie für Bedienelemente und Icons genügen 3:1.

1:1 — unsichtbar 8:1 — sehr gut lesbar  (Maximum: 21:1)
Grenzwert 4,5:1
3,23:1 #FF530D auf Weiß
weiße Schrift auf orangem Button
6,12:1 #FF530D auf Schwarz
Header, Kicker, dunkle Flächen

3,23:1 heißt konkret: dem Marken-Orange fehlen rund 28 % zum geforderten Wert. Es ist kein Grenzfall, der sich wegdiskutieren lässt — jedes Prüfwerkzeug meldet die Stelle automatisch, und ein Prüfer sieht sie in unter einer Minute. Praktisch spürbar wird das bei hellem Umgebungslicht auf dem Handy, bei älteren Displays und bei nachlassender Kontrastempfindlichkeit ab etwa 50 — betroffen ist ausgerechnet der Kaufbutton.

Warum ausgerechnet Orange? Die Farbe wirkt kräftig und signalstark, ihre gemessene Helligkeit liegt aber nah an Weiß. Genau deshalb funktioniert sie auf schwarzem Grund hervorragend (6,12:1) und auf weißem Grund nicht. Der Fehler entsteht nicht beim Farbton, sondern beim Untergrund.

Die vier Kombinationen, die auf der Website tatsächlich vorkommen — Werte nach der WCAG-Formel berechnet, nicht geschätzt:

Jetzt konfigurieren
#FF530D auf #FFFFFF
3,23:1 Fällt durch
In den Warenkorb
#FFFFFF auf #FF530D
3,23:1 Fällt durch
Jetzt konfigurieren
#FF530D auf #0A0A0A
6,12:1 Bestanden
Jetzt konfigurieren
#D63E00 auf #FFFFFF
4,62:1 Bestanden
Die Marke muss dafür nicht angefasst werden. Das Orange bleibt exakt wie es ist — auf schwarzem Header, als Flächenfarbe, als Linie, für große Headlines ab 24 px. Nur zwei Stellen brauchen einen Ton dunkler: orangefarbener Fließtext und Links auf hellem Grund, sowie weiße Beschriftung auf orangefarbenen Buttons. Ein abgedunkelter Zweitton wie #D63E00 erfüllt dort 4,5:1 und ist im direkten Vergleich kaum unterscheidbar. Ein zweiter CSS-Custom-Property, mehr ist es technisch nicht.

Tastaturbedienung: der Unterschied ist erlebbar

Beide Mockups sind echt bedienbar. Klicken Sie einmal in die jeweilige Box und drücken Sie dann Tab — links passiert sichtbar nichts, rechts sieht man jederzeit, wo man steht.

outline: none Fokus unsichtbar WCAG 2.4.7 verletzt
Fokusring 3 px Reihenfolge logisch WCAG 2.4.7 erfüllt

Hinweis: outline:none ohne Ersatz ist der mit Abstand häufigste Einzelfehler in gewachsenen Shop-Themes — meist ein Ein-Zeilen-Erbe aus einem alten CSS-Reset.

Was ein Screenreader vorliest

Dieselbe Produktkachel, zweimal ausgelesen. Links ohne Alt-Texte und Labels, rechts mit.

NVDA · Produktkachel — Ist
Grafik — DSC_4831.jpg
Link — hier klicken
Eingabefeld — leer, unbeschriftet
Schaltfläche — Grafik cart_icon.png
→ Der Nutzer weiß nicht, welches Produkt, welcher Preis, welches Feld.
NVDA · Produktkachel — Soll
Grafik — Sportabgasanlage Porsche 992 GT3, Edelstahl poliert
Link — Produktdetails Sportabgasanlage 992 GT3
Eingabefeld — Menge, Zahl, Wert 1
Schaltfläche — In den Warenkorb, Art.-Nr. CARG-992-GT3-01
→ Vollständig bedienbar, ohne den Bildschirm zu sehen.

Die Barrierefreiheitserklärung ist Pflicht — und wird zuerst kontrolliert

Nach § 14 BFSGV müssen die Informationen zur Barrierefreiheit auf der Website leicht auffindbar, in Textform und selbst barrierefrei bereitgestellt werden. Sie fehlt derzeit — und sie ist das Erste, was eine Behörde ohne jeden Aufwand prüfen kann.

cargraphic.de/barrierefreiheit

Erklärung zur Barrierefreiheit

  • Allgemeine Beschreibung der Dienstleistung und wie sie barrierefrei genutzt werden kann
  • Angewandte Norm: EN 301 549 / WCAG 2.1 Level AA, Stand des letzten Tests mit Datum
  • Bekannte Einschränkungen offen benannt — mit Zeitplan zur Behebung
  • Barrierefreier Kontaktweg für Rückmeldungen: Formular, E-Mail und Telefon
  • Hinweis auf die Marktüberwachungsbehörde und das Durchsetzungsverfahren
Im Footer verlinkt Aktualisierungsdatum Als HTML, nicht als PDF
Zusätzlich abgestimmt

Hinweis-Banner: „Wir arbeiten daran"

Barrierefreiheit ist nicht an einem Tag fertig — die Umsetzung läuft schrittweise. Bis dahin wird auf der Website offen kommuniziert, dass daran gearbeitet wird, mit einem direkten Kontaktweg für Rückmeldungen. Das ist genau das, was § 14 BFSGV unter „bekannte Einschränkungen mit Zeitplan" verlangt — und es zeigt gegenüber der Marktüberwachung nachweisbares Bemühen statt Schweigen.

Wir arbeiten an der Barrierefreiheit dieser Website

Einzelne Bereiche sind noch nicht vollständig barrierefrei nutzbar. Wir setzen die Anforderungen nach WCAG 2.1 AA schrittweise um. Stoßen Sie auf eine Barriere, melden Sie sie uns — wir helfen Ihnen direkt weiter.

Barriere melden Erklärung zur Barrierefreiheit
Einmal schließbar, dauerhaft im Footer erreichbar Tastaturbedienbar & screenreader-tauglich Verlinkt auf Erklärung + Kontaktweg
Wichtig fürs Verständnis: Der Banner ersetzt die Umsetzung nicht — er entbindet nicht von der Pflicht und schützt allein nicht vor einem Verfahren. Er ist der ehrliche Zwischenschritt: er dokumentiert den laufenden Prozess, öffnet einen barrierefreien Rückmeldeweg und nimmt einer Beschwerde die Schärfe, solange der Zeitplan auch eingehalten wird.
3 · Strafen & Sanktionen

Was passieren kann

Zuständig ist die Marktüberwachungsstelle der Länder für die Barrierefreiheit von Produkten und Dienstleistungen (MLBF) mit Sitz in Magdeburg — eine bundesweit einheitliche Stelle, angesiedelt beim Landesamt für Verbraucherschutz Sachsen-Anhalt.

bis 100.000 € Höchstrahmen

Vor allem, wenn eine vollziehbare Anordnung der Behörde nicht befolgt wird oder eine Dienstleistung trotz Untersagung weiter angeboten wird (§ 37 BFSG). Nicht die erste Rechnung, die ins Haus flattert — aber der Deckel, wenn man die Behörde ignoriert.

bis 10.000 € Formalverstöße

Für die „kleineren" Tatbestände — insbesondere fehlende oder unvollständige Informationen zur Barrierefreiheit. Genau der Punkt, der ohne Erklärungsseite offen liegt.

Untersagung des Angebots Schärfste Maßnahme

Die Behörde kann anordnen, die Dienstleistung einzuschränken oder ganz einzustellen, wenn Mängel nicht fristgerecht beseitigt werden. Für einen Webshop heißt das im Extremfall: Verkauf aus.

So läuft ein Verfahren typischerweise ab

Schritt 01

Auslöser

Beschwerde eines Verbrauchers oder Verbands, Hinweis eines Wettbewerbers — oder eine Stichprobe der Marktüberwachung.

Schritt 02

Prüfung & Aufforderung

Die Behörde fordert zur Stellungnahme auf und setzt eine Frist zur Mängelbeseitigung.

Schritt 03

Anordnung

Bleibt die Nachbesserung aus, folgt eine vollziehbare Anordnung mit konkreten Auflagen.

Schritt 04

Bußgeld / Untersagung

Erst hier greifen Geldbuße und im Extremfall die Einstellung des Angebots.

Abmahnrisiko separat betrachten: Neben dem behördlichen Weg können qualifizierte Einrichtungen und Verbraucherverbände Verstöße verfolgen; ob BFSG-Vorgaben zusätzlich Marktverhaltensregeln im Sinne des UWG sind und damit Wettbewerber-Abmahnungen tragen, ist rechtlich noch nicht abschließend geklärt. Eine DSGVO-artige Abmahnwelle ist bislang nicht eingetreten — die Behördenschiene ist derzeit der realistische Weg.

Quellen & Stand

Stand der Zusammenstellung: August 2026.

Keine Rechtsberatung. Diese Zusammenstellung dient der internen Einordnung und Priorisierung im Rahmen des Web-Pitches. Sie ersetzt keine anwaltliche Prüfung des Einzelfalls — insbesondere die Fragen, ob die Kleinstunternehmen-Ausnahme greift, wer bei einem extern betriebenen Shop verantwortlich ist und wie die reine Informations-Website einzuordnen ist, sollten vor verbindlichen Entscheidungen juristisch abgeklärt werden.