Vérificateur de contraste pour une page d'événement
Une date, un accès ou un bouton de billet peut devenir difficile à lire si les couleurs sont trop proches. Cet outil calcule le contraste de deux couleurs unies. Vérifiez ensuite la page publiée : un résultat favorable ne certifie pas l'accessibilité de tout le site.
La rédaction de Boletolibre
Publié
Utiliser le calculateur interactif
Ouvrir le vérificateur interactif (interface en anglais)
Saisissez les valeurs hexadécimales du premier plan et de l'arrière-plan ou utilisez les sélecteurs. L'outil affiche le rapport et les résultats pour le texte courant, le grand texte, le contraste renforcé et les éléments graphiques nécessaires. Il compare le rapport non arrondi, même si deux décimales sont affichées. Essayez les couleurs réelles des dates, prix, liens et erreurs.
Comprendre les seuils
Le critère minimal WCAG 2.2 demande 4,5:1 pour le texte courant et 3:1 pour le grand texte. Le critère renforcé demande 7:1 et 4,5:1. Les informations visuelles nécessaires des commandes et graphiques demandent généralement 3:1 avec les couleurs adjacentes. Grand texte signifie au moins 18 points ordinaires ou 14 points gras. Ne faites pas passer un résultat insuffisant par arrondi.[1][2][3]
Tester le parcours réel
Examinez date, lieu, prix, billet, formulaire, erreurs, confirmation et contact sur la vraie page, sur téléphone et ordinateur. L'outil ne traite ni photos, ni dégradés, ni transparence : contrôlez la zone la moins lisible. Vérifiez aussi les états de focus, de survol et d'erreur. Un paiement externe doit être examiné séparément.[1][3]
Consigner les corrections
Notez l'URL, l'état, les couleurs, le rapport, le critère, le responsable et le nouveau contrôle. Une couleur partagée peut toucher plusieurs pages. Pour un événement affiché sur Boletolibre.com, examinez les informations et le trajet vers le billet tels que les voit le public; le site de l'organisateur et le paiement externe exigent leur propre examen.
Sources et lectures complémentaires
- Understanding SC 1.4.3 Contrast (Minimum)W3C WAI · Consulté
- Understanding SC 1.4.6 Contrast (Enhanced)W3C WAI · Consulté
- Understanding SC 1.4.11 Non-text ContrastW3C WAI · Consulté