fix: Hero-Text war ueber hellem Bildmaterial nicht lesbar
Docker Image bauen und veroeffentlichen / build-and-push (push) Successful in 2m12s

Die Ortszeile ueber der Ueberschrift stand in honey-light auf einem Foto mit
25 % Grundabdunklung plus einem to-tr-Verlauf, der die Textspalte bei rund
44 % Gesamtdeckung liegen liess. Gegen ein helles Motiv (Holz, Himmel)
gerechnet ergab das:

    Ortszeile    1,34:1   (WCAG AA verlangt 4,5:1 bei 12 px)
    Ueberschrift 2,73:1   (verlangt 3:1 bei grosser Schrift)
    Fussnote     1,90:1

Lighthouse meldet davon nichts und gibt der Seite weiterhin 100 fuer
Accessibility — Kontrast von Text ueber Bildern laesst sich nicht statisch
pruefen, weil der Hintergrund vom hochgeladenen Motiv abhaengt. Genau deshalb
muss die Abdunklung den schlechtesten Fall abdecken und nicht das Bild, das
gerade hinterlegt ist.

Drei Aenderungen, alle nachgerechnet:

- Verlauf ab md waagerecht (85 % -> 70 % -> 0) statt diagonal. Die Textspalte
  endet bei etwa 45 % Breite und liegt damit ganz im dunklen Teil, waehrend
  die rechte Bildhaelfte unangetastet bleibt.
- Auf schmalen Schirmen senkrecht, weil der Text dort ueber die volle Breite
  laeuft und rechts sonst in den durchsichtigen Teil geriete.
- Neuer Farbton honey-pale (#e4cfa4) fuer die Ortszeile; honey-light haelt
  4,5:1 selbst bei 89 % Abdunklung nicht (4,14:1). Fussnote von cream/60 auf
  cream/80.

Ergebnis in der Textspalte: Ortszeile 4,81:1 bis 6,97:1, Ueberschrift 6,41:1
bis 9,28:1, Fussnote 4,80:1 bis 6,59:1 — AA auf allen Breiten.

tsc: 0 Fehler. vitest: 359/359 gruen. eslint: 0 Warnungen. next build: gruen.

Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>
This commit is contained in:
Nick SzaunigandClaude Opus 5 committed 2026-09-20 04:04:36 +02:00
1 parent 368985c0cf
commit 3393de2286
2 files changed
+25 -3

No files matched your search

+8
View File
@@ -9,6 +9,13 @@
hellem Grund (Hintergrund/Cream), -light fuer Text auf bg-forest. */
--color-honey-dark: #8a6531;
--color-honey-light: #c9a468;
/* Fuer Text ueber BILDERN statt ueber einer Volltonflaeche. -light besteht
4.5:1 nur gegen deckendes bg-forest; im Hero liegt der Text aber auf einem
Foto mit halbdurchlaessiger Abdunklung, und je nach Motiv (helles Holz,
Himmel) sank der Kontrast dort auf 1,34:1 — die Zeile war praktisch
unsichtbar. -pale haelt bei der im Hero gesetzten Abdunklung 4,8:1 bis
7,0:1 und behaelt den Honigton. */
--color-honey-pale: #e4cfa4;
--color-background: #faf8f3;
--color-ink: #242424;
--color-sage: #788774;
@@ -20,6 +27,7 @@
--color-honey: var(--color-honey);
--color-honey-dark: var(--color-honey-dark);
--color-honey-light: var(--color-honey-light);
--color-honey-pale: var(--color-honey-pale);
--color-background: var(--color-background);
--color-ink: var(--color-ink);
--color-sage: var(--color-sage);