Vérificateur de contraste des couleurs
À propos de la précision du moniteur
Le Colour Contrast Checker de GrackleDocs peut donner des résultats différents selon les écrans, en particulier si la configuration de l'écran n'est pas " native ". Les écrans ont des calibrages de couleur, des luminosités et des contrastes différents, ce qui peut affecter la précision de l'outil pipette utilisé pour sélectionner les couleurs, entraînant des incohérences dans les rapports de contraste calculés. Pour garantir des résultats cohérents et précis, il est préférable d'utiliser l'outil sur un seul écran intégré.
Aide - Vérificateur de contraste des couleurs
Pour commencer
Cet outil vous aide à vérifier si vos combinaisons de couleurs répondent aux normes d'accessibilité WCAG 2.2. Saisissez une couleur de premier plan (texte) et une couleur d'arrière-plan pour voir le rapport de contraste et l'état de conformité.
Visez au moins 4.5:1 pour un texte normal (AA) ou 7:1 pour une meilleure accessibilité (AAA).
Saisie des couleurs
Saisir les couleurs en utilisant :
- Sélecteur de couleurs : Cliquez sur le carré de couleur pour une sélection visuelle
- Hex : Saisissez des codes tels que
#FF5733ouFF5733 - RGB : Valeurs de 0 à 255 pour le rouge, le vert et le bleu
- HSL : Teinte (0-360), Saturation (0-100%), Luminosité (0-100%)
- HSV : Teinte (0-360), Saturation (0-100%), Valeur (0-100%)
- Noms de couleurs : Les noms CSS comme
rouge,darkslategray
Outil EyeDropper
Choisissez n'importe quelle couleur sur votre écran à l'aide de la pipette.
Curseurs de couleur et Alpha
Cliquez sur "Colour Sliders" (curseurs de couleur) pour faire apparaître les commandes réglables :
- RGB : Rouge, vert, bleu (0-255)
- HSL : Teinte, saturation, luminosité
- HSV : Teinte, saturation, valeur
- Alpha : Transparence (0-1)
Critères de réussite WCAG 2.2
| Critère | Niveau | Normal | Grandes dimensions |
|---|---|---|---|
| SC 1.4.3 (minimum) | AA | 4.5:1 | 3:1 |
| SC 1.4.6 (amélioré) | AAA | 7:1 | 4.5:1 |
| SC 1.4.11 (hors texte) | AA | 3:1 | |
Couleurs accessibles suggérées
En cas d'échec, l'outil propose des alternatives accessibles :
- Suggestions AA/AAA : Couleurs conformes aux exigences
- Cliquez pour appliquer : Cliquez sur une suggestion pour l'utiliser
- Annuler : Revenir en arrière à l'aide du bouton Annuler
Simulation visuelle
Prévisualisez l'apparence des couleurs en fonction des différentes conditions de vision :
- Protanopie/Deutéranopie/Tritanopie : Types de daltonisme
- Monochromie : Cécité totale des couleurs
- Acuité visuelle : Vision trouble (20/40 à 20/400)
- Vision en tunnel : Perte de la vision périphérique
Copier les résultats
- Résumé de la copie : Résumé du rapport de contraste et de l'état
- Copie détaillée : Rapport complet sur la conformité aux WCAG
- Couleur de la copie : Valeurs individuelles des couleurs
Navigation au clavier
- Onglet - Naviguer dans les contrôles
- S'évader - Fermer les dialogues
- Touches fléchées - Régler les curseurs
Couleur de premier plan
Couleur d'arrière-plan
EXEMPLE : Premier plan sur arrière-plan
Rapport de contraste: 21.00:1
Critères de réussite WCAG 2.2
Ceci est un texte normal illustrant le contraste entre les couleurs de premier plan et d'arrière-plan.
Ceci est un texte en gros caractères (24 px en gras).
Éléments interactifs : Exemple de lien
Couleurs accessibles suggérées
Cliquez sur une suggestion pour l'appliquer comme couleur de premier plan.