Hub Global d'Outils
Langue actuelle: French
Retour aux guides

Guide

Comment corriger un texte à faible contraste sur un site web

Suivez un processus concret pour identifier et corriger rapidement les textes peu lisibles.

Quand les utilisateurs signalent un texte difficile à lire, il est souvent possible de corriger vite sans tout refondre. Ce guide propose une méthode pas à pas.

Audit the worst readability problems first

Start with body text, form labels, buttons, and links on high-traffic pages.

Collect failing pairs in a short list so your fixes stay focused.

  • Homepage hero text
  • Primary/secondary buttons
  • Form helper and error text

Measure each text/background pair

Run each pair in a contrast checker and note failed AA/AAA targets.

Keep one table with current value, target, and proposed fix.

Adjust color without breaking brand style

Change lightness first before changing hue.

Small shifts can improve readability while keeping your visual identity recognizable.

Retest UI states and responsive layouts

Check hover, focus, disabled, and visited states.

Confirm results on mobile where smaller text magnifies contrast problems.

Ship and document new color tokens

After fixes pass, update your design system tokens and component docs.

This prevents the same low-contrast values from returning later.

When this guide helps

  • Fixing readability complaints from users.
  • Improving old pages before relaunch.
  • Cleaning up inconsistent legacy color styles.

Fix contrast in controlled iterations

Work through the highest-impact text first, test each change, and lock improved values into your design tokens.

Outils associés

Vérificateur de Contraste

Comparez texte et fond pour vérifier le contraste et les niveaux WCAG.

Open Contrast Checker

Autres guides

Parcourez un autre article court pour continuer à découvrir des workflows utiles.