Qu'est-ce que Mode contraste élevé ?

Testez l'apparence de votre contenu web dans différents paramètres de contraste élevé. Collez du HTML ou une capture d'écran d'URL pour prévisualiser les modes de contraste conformes aux WCAG, notamment le Contraste élevé Windows, les couleurs inversées et les thèmes de contraste personnalisés.

Choisis parmi des thèmes prêts à l'emploi (Contraste élevé Windows, Inversé, Jaune sur Noir) ou définis tes propres couleurs de texte et de fond. Le ratio de contraste se met à jour en direct et indique quels niveaux WCAG — AA, AAA, texte normal, gros texte — passent ou non. Le HTML prévisualisé s'exporte avec les styles inline déjà appliqués.

Comment utiliser

1. Étape 1 — Collez votre HTML ou du texte brut dans l'éditeur.
2. Étape 2 — Sélectionnez un mode de contraste parmi les préréglages : Contraste élevé Windows (noir/blanc), Inversé, Jaune sur Noir ou couleurs personnalisées.
3. Étape 3 — Examinez la prévisualisation en direct pour vérifier la lisibilité. Utilisez le vérificateur de taux de contraste pour confirmer la conformité WCAG AA/AAA des éléments de texte.

Quand l'utiliser

• Auditer une landing en WCAG AA avant de lancer une campagne.
• Vérifier que les indicateurs de focus et les boutons sans texte tiennent en Contraste élevé Windows.
• Choisir une couleur de corps qui atteint 4,5:1 contre le fond de marque.

Résultat

Un développeur colle le HTML de sa barre de navigation et bascule en mode Contraste élevé Windows. Il remarque que ses boutons à icônes seules deviennent invisibles sur le fond noir, et leur ajoute donc des étiquettes textuelles visibles.

FAQ

Quel ratio de contraste exige WCAG AA ?

4,5:1 pour le texte courant et 3:1 pour le texte large (18pt régulier ou 14pt gras et au-dessus). AAA passe à 7:1 et 4,5:1. L'outil indique pour chaque combinaison les niveaux qu'elle réussit ou rate.

Pourquoi les icônes disparaissent-elles en Contraste élevé Windows ?

Windows remplace les couleurs par les tokens système et ignore les images de fond. Les icônes posées en background-image ou en SVG avec seulement un fill deviennent invisibles. Utilise un SVG inline avec stroke en currentColor, ou ajoute un libellé textuel visible.

Jaune sur noir, c'est vraiment un thème d'accessibilité ?

Oui. C'est l'un des thèmes Contraste élevé d'origine sous Windows, et de nombreuses personnes malvoyantes l'utilisent encore parce que le jaune reste vif même avec une dégénérescence maculaire. Certains le préfèrent au blanc pur sur noir.

Réussir WCAG AA signifie-t-il que ma page est accessible ?

Le contraste n'est qu'une partie du WCAG. La page doit aussi être navigable au clavier, avoir un HTML sémantique, des textes alternatifs, des libellés de formulaire, des indicateurs de focus, et respecter le mouvement réduit. Le ratio ne parle que de couleur.

Pourquoi mon orange de marque échoue sur fond blanc ?

Les couleurs vives moyennes (orange, jaune, vert citron) descendent souvent sous 3:1 sur blanc parce que leur luminance est trop élevée. Assombris l'orange pour le corps de texte, ou réserve-le aux fonds et grands titres où 3:1 suffit.

Outils similaires