Slop Colors · gratuit, dans votre navigateur

Vérifier le contraste des couleurs selon WCAG

Un texte gris sur fond blanc paraît élégant, jusqu’à ce que personne ne puisse le lire. Saisissez les deux couleurs : Slop Colors donne le ratio WCAG, les niveaux validés, et la couleur de texte la plus proche qui passe.

Vérifier le contraste

Comment faire

1. Allez à Vérification du contraste (WCAG 2) et saisissez la couleur du texte et celle du fond, en HEX, RGB, HSL ou OKLCH.
2. Lisez le ratio et les cinq résultats : AA et AAA pour le texte normal, AA et AAA pour le texte grand, et les éléments d’interface et graphiques.
3. Regardez l’exemple : un grand titre et un paragraphe dans vos deux couleurs.
4. Si AA pour le texte normal échoue, cliquez sur Corriger la couleur du texte : elle garde sa teinte et devient juste assez claire ou foncée pour passer.
5. Cliquez sur Inverser pour vérifier les couleurs dans l’autre sens.

Vos fichiers restent sur cet appareil : Slop Colors tourne dans votre navigateur, sans envoi, sans compte et sans filigrane.

Questions

Quels ratios demande WCAG ?

Le niveau AA demande 4,5:1 pour le texte normal et 3:1 pour le texte grand (24 px, ou 18,66 px en gras), ainsi que pour les éléments d’interface et les graphiques. Le niveau AAA demande 7:1 et 4,5:1.

Pourquoi affiche-t-il 4,47 et pas 4,48 ?

Le ratio est arrondi par défaut, comme le vérificateur de WebAIM l’affiche, donc une paire à 4,499 n’est jamais donnée comme réussie à 4,5.

Peut-il vérifier une couleur de mon écran ?

Dans Chrome et Edge, Prélever sur l’écran prend n’importe quel pixel de votre écran. Utilisez-le ensuite comme couleur de texte ou de fond depuis le panneau.

Quelque chose est-il envoyé ?

Non. Les couleurs sont vérifiées par la page dans votre navigateur ; rien n’est envoyé.

Plus avec Slop Colors

• Prélever des couleurs sur une image
• Générer une palette de couleurs à partir d’une couleur
• Convertir HEX en RGB, HSL, OKLCH ou CMJN

Applications liées

• PhotoSlop
  En ligne
  Photoshop, refait pour le navigateur.
• SlopVector
  En ligne
  Illustrator, refait pour le navigateur.
• SlopIsolate
  Bêta
  Supprimez les arrière-plans avec une IA qui tourne sur votre appareil.