Ordre de réglage quand le texte est difficile à lire – ZenBlocks buttonBasic
Conclusion
Pour corriger un texte peu lisible, l’ordre le plus efficace est: **contraste -> réglages typographiques -> ombre de texte -> overlay de fond**. Modifiez un paramètre à la fois.
—
Causes
Les causes les plus fréquentes sont:
1. **Contraste insuffisant** entre la couleur du texte et le fond.
2. **Taille de police trop petite**, surtout sur smartphone.
3. **Texte posé sur une image complexe** sans overlay.
4. **Interligne ou espacement des lettres inadaptés**.—
Procédure (ordre recommandé)
### Étape 1: vérifier le contraste texte/fond
1. Vérifiez la couleur du texte dans les paramètres de style.
2. Vérifiez l’écart de luminosité avec le fond.
3. Utilisez WCAG AA (ratio 4.5:1+) comme repère.
4. Vérifiez aussi que l’alpha du texte n’est pas trop faible.### Étape 2: ajuster la typographie
1. **Font Size**: assurez au moins 14px sur mobile.
2. **Font Weight**: sur fond chargé, préférez 600-700.
3. **Line Height**: réglez entre 1.4 et 1.8.
4. **Letter Spacing**: ajoutez 0.02-0.05em si nécessaire.### Étape 3: utiliser l’ombre de texte
1. Ouvrez la section ombre de texte dans les réglages de police.
2. Choisissez une couleur d’ombre adaptée au fond.
3. Réglez un blur léger (2-4px).
4. Commencez avec une opacité modérée (0.3-0.5).### Étape 4: ajouter un overlay de fond
1. Ouvrez l’overlay dans les paramètres d’arrière-plan.
2. Ajoutez un overlay semi-transparent (noir ou blanc selon le texte).
3. Ajustez l’alpha (0.3-0.6) pour équilibrer image et lisibilité.### Étape 5: valider en responsive
1. Vérifiez desktop -> tablette -> smartphone.
2. Ajustez la taille du texte par appareil si nécessaire.—
Points d’attention
– Microtexte et sous-texte peuvent être plus discrets que le texte principal, mais ils doivent rester lisibles.
– Microcopy et subcopy étant hors du bouton, vérifiez aussi leur lisibilité sur le fond réel de la page.—
Paramètres liés
– [Paramètres de style](../04-style-settings.md)
– [Paramètres de police](../05-font-settings.md)
– [Paramètres d’arrière-plan](../06-background-settings.md)
– [Paramètres de microtexte](../13-micro-text-settings.md)
– [Paramètres de sous-texte](../14-sub-text-settings.md)