Demo: Muster-Audit an einer selbst erstellten Beispielseite – kein Kundenprojekt.

Vorher-Seite ansehen · Nachher-Seite ansehen

Muster-Report: Deslop-Audit „GrenzCheck 2026“

Eigenes Produkt. GrenzCheck ist ein Morvelt-/Veltok-Prototyp von Moritz Herdt (/workspace/umsatz/grenzcheck/index.html, unveröffentlicht). Dieser Report ist ein Beispiel-Audit am eigenen Asset, kein Kundenauftrag und keine Kundenbewertung.

Datum: 05.11.2026 · Prüfer: Deslop-Audit (Morvelt)
Getestet: 390 px (Mobile) und 1280 px (Desktop), headless Chromium 1248
Grundlage: AUDIT-CHECKLISTE.md (34 Punkte), Kontrast nach WCAG 2.2-Formel nachgerechnet
Dateien: Vorher muster/vorher.html · Nachher muster/nachher.html · Tokens tokens.json

Screenshots

	Mobile	Desktop
Vorher	`muster/screens/vorher-mobile.jpg`	`muster/screens/vorher-desktop.jpg`
Nachher (leer)	`muster/screens/nachher-mobile.jpg`	`muster/screens/nachher-desktop.jpg`
Nachher (Ergebnis, Beispiel 520 € / 6.200 €)	`muster/screens/nachher-mobile-ergebnis.jpg`	–

Ergebnis in einem Satz

Solide Basis (dunkles, ruhiges Farbschema, keine Gradients/Emojis), aber 3 Kontrastfehler nach WCAG, ein Logik-Bug (§-19-Status wird berechnet, aber nie angezeigt) und ein Fake-Ergebnis beim Laden. Score vorher: 21/34 Punkte erfüllt → nachher: 32/34.

10 Fixes nach Priorität

#	Prio	Befund (gemessen)	Checkliste	Fix (umgesetzt in nachher.html)
1	P1	Button „Berechnen“: Weiß auf #3b82f6 = 3,68:1 – unter 4,5:1 (16 px/600 ist kein „großer Text“).	9	Akzent → `#2563eb` = 5,17:1
2	P1	Input-Rahmen #2a3544 auf #0d1218 = 1,51:1 – Felder kaum als Felder erkennbar (WCAG 1.4.11 fordert 3:1).	10	`color.border-strong` #64748b = 3,95:1
3	P1	Statustext auf Tint-Fläche zu schwach: Rot „Grenze überschritten“ = 3,07:1, Grün „im Rahmen“ = 4,11:1.	11	Helle Statustöne auf neutralem Grund: Grün 10,8:1, Rot 6,8:1, Gelb 12,3:1
4	P1	Logik-Bug: `kuOk` wird im Script berechnet, aber nie gerendert – der Kleinunternehmer-Status hat keine Farbe/Status, nur Fließtext.	26	3-stufiger §-19-Status (ok/warn/bad) als Pill + farbiger Satz
5	P1	Fake-Ergebnis beim Laden: Auto-Klick zeigt „0 € → im Rahmen“, bevor der Nutzer etwas eingibt.	34	Empty State „Trag … ein“, `aria-live="polite"`, kein Auto-Calc
6	P2	Hierarchie: Antwort steht als Fließtext unten im Ergebnis; kein Status zuerst.	24	Status-Zeile oben (2 Pills), dann Balken (Trend), dann Detail
7	P2	Status widersprüchlich: 101–110 % der Grenze → gelber Balken, aber Text „Grenze überschritten“ in Rot.	27	Eine Map Status→Farbe→Text („knapp über Grenze“)
8	P2	Touch-Target Checkbox ≈ 13×13 px – unter WCAG 2.5.8 (24 px) und Apple 44 pt.	33	Checkbox 24 px, ganze Label-Zeile `min-height:44px`; Inputs/Button 48 px
9	P2	Slop/Unfertiges im UI: toter Link `href="#"` („Vorlagen-Serie“), „Bald: Pro“-Teaser, interne Notiz „Deploy-Ziel … Vercel Hobby“ im Footer, roter Alarm-Kasten für neutralen Disclaimer.	14, 23, 32	Teaser + Footer-Notiz entfernt, Disclaimer als neutrale Info-Box
10	P3	Kein System: 11 verschiedene Abstandswerte (.3–1.5 rem, nicht 4/8-Raster), 4 Radien (4/8/10/12), 9 Schriftgrößen, Badge 11,2 px, 4 Hex-Werte außerhalb der Variablen, 2 Inline-Styles.	2, 4, 13, 15, 16, 21	`tokens.json`: 7 Spacing-, 3 Radius-, 5 Größenstufen; alles über `var(--…)`

Was schon gut war (bleibt)

Kein Gradient, keine Emoji-Icons, kein Glassmorphism, keine Zufallsschatten (Checkliste 28–30 erfüllt).
Muted-Text kontraststark (6,46:1 auf Karte), Links 7,65:1.
Quellen + Abrufdatum direkt sichtbar – schafft Vertrauen.

Offen (nicht gefixt, für Moritz)

Fokus-Reihenfolge per Tastatur nur kurz geprüft; Validierung negativer/leerer Werte noch nicht gebaut.
Morvelt-Impressum + Datenschutz sind live (https://morvelt.com/impressum · https://morvelt.com/datenschutz). Für das GrenzCheck-Tool selbst gilt weiter: vor Go-Live Tool-Footer mit denselben URLs setzen (wenn Free-Tool deployed wird).

Umsetzung beim Kunden

Tokens aus tokens.json + Prompt aus PROMPT-FÜR-CURSOR.md in Cursor/Claude einfügen.

Screenshots