Reihenfolge fuer bessere Text-Lesbarkeit – ZenBlocks buttonBasic
Fazit
Bei schlechter Lesbarkeit funktioniert diese Reihenfolge am besten: **Kontrast -> Typografie -> Textschatten -> Hintergrund-Überlagerung**. Immer nur einen Punkt auf einmal anpassen.
—
Ursachen
1. **Zu wenig Kontrast** zwischen Text und Hintergrund.
2. **Zu kleine Schrift**, vor allem auf Mobilgeraeten.
3. **Text direkt auf unruhigem Bild** ohne Überlagerung.
4. **Unpassende Zeilenhoehe oder Zeichenabstand**.—
Loesung
### Schritt 1: Kontrast pruefen
1. Textfarbe und Hintergrundfarbe pruefen.
2. Helligkeitsunterschied erhoehen.
3. An WCAG AA orientieren (mind. 4.5:1).
4. Transparenz des Texts pruefen.### Schritt 2: Typografie anpassen
1. `Schriftgröße`: mobil mindestens 14px.
2. `Font Stärke`: bei komplexem Hintergrund eher 600-700.
3. `Zeilenhöhe`: etwa 1.4-1.8.
4. `Zeichenabstand`: bei Bedarf 0.02-0.05em.### Schritt 3: Textschatten nutzen
1. Textschatten-Bereich oeffnen.
2. Schattenfarbe passend zum Hintergrund waehlen.
3. Blur moderat halten (2-4px).
4. Opazitaet zuerst moderat setzen (0.3-0.5).### Schritt 4: Hintergrund-Überlagerung setzen
1. Überlagerung im Hintergrund-Panel aktivieren.
2. Halbtransparentes Überlagerung setzen (dunkel oder hell je nach Textfarbe).
3. Alpha meist zwischen 0.3 und 0.6 abstimmen.### Schritt 5: Responsive pruefen
1. Desktop -> Tablet -> Smartphone kontrollieren.
2. Geraetespezifische Schriftgroessen bei Bedarf anpassen.—
Hinweise
– Mikrotext und Subtext duerfen dezenter sein, muessen aber lesbar bleiben.
– Microcopy/Subcopy ausserhalb des Knopfs immer gegen den echten Seitenhintergrund pruefen.—
Verwandte Einstellungen
– [Stileinstellungen](../style/)
– [Schrifteinstellungen](../font/)
– [Hintergrundeinstellungen](../background/)
– [Microtext Settings](../microtext/)
– [Subtext Settings](../subtext/)