Fork me on GitHub

Trouve-moi les bons contrastes, pour l'accessibilité web,
entre ces deux couleurs :

Couleur du texte : couleur invalide Pour chaque couleur (rouge, vert et bleu), indiquer un nombre entre 0 et 255. La couleur doit être comprise entre #000000 à #FFFFFF
Couleur du fond : couleur invalide Pour chaque couleur (rouge, vert et bleu), indiquer un nombre entre 0 et 255. La couleur doit être comprise entre #000000 à #FFFFFF

Dans la réglementation internationale établie par les WCAG, le critère de succès 1.4.3 demande pour le texte un rapport de contraste minimum de 4.5:1 (et 3:1 pour le texte agrandi).

Ce rapport de contrast minimum est également exigé par la réglementation française, établie par le RGAA 3.0 2016, dans les critères 3.3 et 3.4.

Composante à modifier :
Propose-moi :

Ancien contraste

Contraste invalide
Avant plan Arrière plan Exemple Ratio Distance
  • hsl(0, 0%, 56%)
  • rgb(145, 145, 145)
  • #919191
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Titre de grande taille avec des mots en gras

Ceci est un echantillon de texte avec quelques mots en gras pour illustrer le bon contraste.

3.15175

Nouveau contraste : 4 résultats (48 couleurs testées)

Contrastes valides
Avant plan Arrière plan Exemple Ratio Distance
  • hsl(0, 0%, 37%)
  • rgb(95, 95, 95)
  • #5F5F5F
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Titre de grande taille avec des mots en gras

Ceci est un echantillon de texte avec quelques mots en gras pour illustrer le bon contraste.

6.38549 72.11
  • hsl(0, 5%, 44%)
  • rgb(120, 108, 108)
  • #786C6C
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Titre de grande taille avec des mots en gras

Ceci est un echantillon de texte avec quelques mots en gras pour illustrer le bon contraste.

5.04786 48.9
  • hsl(0, 11%, 42%)
  • rgb(120, 96, 96)
  • #786060
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Titre de grande taille avec des mots en gras

Ceci est un echantillon de texte avec quelques mots en gras pour illustrer le bon contraste.

5.76817 63.07
  • hsl(0, 16%, 48%)
  • rgb(145, 103, 103)
  • #916767
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Titre de grande taille avec des mots en gras

Ceci est un echantillon de texte avec quelques mots en gras pour illustrer le bon contraste.

4.83882 52.92
Pas satisfait ?
Propose moi les couleurs valides et très proches de la couleur initiale