Vérificateur de contraste des couleurs
Mesurez le contraste entre une couleur de premier plan et un arrière-plan. Consultez les résultats WCAG 2.2 AA et AAA, la couleur conforme la plus proche, les calques transparents et les combinaisons d’une palette.
Gratuit, sans inscription. Fonctionne dans votre navigateur, sans appel à une IA.
Rapport de contraste
4,54:1
| Utilisation | Niveau | Seuil requis | Résultat |
|---|---|---|---|
| Texte normal | AA | 4,5:1 | Réussite |
| Texte de grande taille | AA | 3:1 | Réussite |
| Éléments d’interface et graphiques | AA | 3:1 | Réussite |
| Texte normal | AAA | 7:1 | Échec |
| Texte de grande taille | AAA | 4,5:1 | Réussite |
Cet aperçu utilise le modèle de Machado de 2009 à son niveau de sévérité maximal. Il donne une approximation de la perception des couleurs, pas un diagnostic. Les résultats WCAG utilisent toujours les couleurs visibles d’origine.
Machado, Oliveira et Fernandes : modèle publiéVoici à quoi ressemble un texte normal de 16 pixels.
Texte de grande taille, 24 pixels
Bordure de 2 pixelsLicence du modèle de vision des couleurs
Copyright 2013 Colour Developers Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: 1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. 2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. 3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS “AS IS” AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE
Vérifier une palette
Ajoutez au moins deux couleurs pour comparer une palette. Les couleurs répétées ne sont comptées qu’une fois.
Un vérificateur de contraste des couleurs mesure le rapport entre deux couleurs, de 1:1 à 21:1. Vérifiez les seuils WCAG 2.2 AA et AAA pour le texte et le seuil de 3:1 pour les éléments non textuels. Trouvez une couleur conforme qui conserve la teinte, superposez les calques transparents sur un fond choisi, comparez jusqu’à 12 couleurs d’une palette et prévisualisez les déficiences de la vision des couleurs avec le modèle Machado.
Comment utiliser cet outil
- Saisissez deux couleurs
- Saisissez un code hexadécimal comme #1a1a2e ou #fff, une valeur rgb() ou hsl(), ou un nom de couleur CSS comme navy. Vous pouvez aussi utiliser les sélecteurs de couleur. La transparence est acceptée dans rgba(), hsla() et les codes hexadécimaux à 4 ou 8 chiffres. Choisissez la couleur du fond sous-jacent pour superposer les calques transparents d’arrière-plan et de texte. Les curseurs d’opacité multiplient la valeur alpha déjà présente dans chaque saisie. Le contraste est calculé à partir des couleurs composées non arrondies ; les codes hexadécimaux affichés sont approximatifs.
- Comment le rapport est calculé
- La luminance relative de chaque couleur est calculée selon la formule WCAG. Le rapport correspond à la luminance la plus élevée augmentée de 0.05, divisée par la plus faible augmentée de 0.05. Il est affiché avec deux décimales, arrondies vers le bas : 4.499 n’est donc jamais indiqué comme conforme.
- Ce que signifient les niveaux
- Le niveau AA est celui auquel renvoient la plupart des lois et politiques : 4.5:1 pour le texte courant et 3:1 pour le grand texte. Le niveau AAA exige respectivement 7:1 et 4.5:1. Un grand texte mesure au moins 24 px, ou environ 18.7 px s’il est en gras. Les icônes, les bordures de champs et les contours de focus doivent atteindre 3:1 par rapport aux couleurs qui les entourent.
- La couleur proposée
- Si un seuil n’est pas atteint, nous conservons la teinte et la saturation de la couleur à modifier, puis ajustons sa luminosité par petits pas jusqu’à obtenir un contraste conforme. La couleur conforme la plus proche est affichée avec son propre rapport. « La plus proche » signifie ici le plus petit changement de luminosité HSL, par pas de 0.001, et non la plus faible distance perceptuelle entre les couleurs. Appliquer une suggestion rend ce calque opaque. Si le texte est translucide, choisissez une couleur de remplacement pour le texte : modifier l’arrière-plan changerait les deux couleurs visibles.
- Palettes et aperçus des déficiences visuelles
- Saisissez jusqu’à 12 couleurs opaques distinctes, séparées par des retours à la ligne, des virgules ou des points-virgules. Les lignes représentent les couleurs de premier plan et les colonnes, celles d’arrière-plan. Chaque paire affiche son rapport de contraste et sa conformité au niveau AA pour le texte courant. Sélectionnez une paire pour examiner tous les niveaux. Les aperçus de la protanopie, de la deutéranopie et de la tritanopie utilisent le modèle de Machado, Oliveira et Fernandes (2009) à son intensité maximale, avec des matrices Colour Science sous licence BSD. Ils donnent une approximation de la perception, sans modifier le calcul WCAG ni poser de diagnostic.
Quelques questions avant de commencer
Vérifiez comment votre entreprise apparaît dans les réponses de l’IA
Les vérifications techniques vous aident à corriger une page. Le scan gratuit de visibilité dans l’IA montre les réponses examinées pour votre entreprise et les prochaines améliorations à apporter.