Vérificateur de Contraste OKLCH
Vérifiez les rapports de contraste des couleurs pour la conformité d'accessibilité en utilisant les couleurs OKLCH avec évaluation WCAG en temps réel.
How to use
Tune both colors
Adjust the OKLCH values for the foreground and background colors to see the contrast ratio update in real time.
Review WCAG results
Check whether the combination passes AA or AAA accessibility thresholds for normal and large text.
Preview real UI states
Switch between text, button, and card previews to understand how the pairing behaves in actual interfaces.
Generate new ideas
Use Randomize to explore fresh color pairs when you want inspiration or a quick starting point.
Copy the final values
Copy the resulting colors once you find a pair that looks right and meets your accessibility target.
Couleur de premier plan
Couleur d'arrière-plan
Actions
Aperçu
Exemple de texte d'en-tête
Ceci est un exemple de texte de paragraphe pour tester la lisibilité avec votre combinaison de couleurs choisie.
Exemple de petit texte pour des tests détaillés.
Résultats de contraste
Informations sur les couleurs
Premier plan
#0e171ergb(14, 23, 30)hsl(204.95, 38.07%, 8.59%)oklch(20% 0.020 240)Arrière-plan
#e9f0f5rgb(233, 240, 245)hsl(205.78, 36.37%, 93.6%)oklch(95% 0.010 240)