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(76, 73%, 43%)
  • rgb(149, 193, 30)
  • #95C11E
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

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.

1.77268

Nouveau contraste : 17 résultats (5 232 087 couleurs testées)

Contrastes valides
Avant plan Arrière plan Exemple Ratio Distance
  • hsl(72, 36%, 32%)
  • rgb(100, 112, 52)
  • #647034
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

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.50055 86.11
  • hsl(76, 21%, 35%)
  • rgb(100, 111, 72)
  • #646F48
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

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.50044 84.1
  • hsl(74, 31%, 33%)
  • rgb(99, 112, 58)
  • #63703A
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

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.50035 85.93
  • hsl(72, 49%, 29%)
  • rgb(98, 113, 38)
  • #627126
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

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.50026 86.36
  • hsl(77, 28%, 34%)
  • rgb(98, 112, 63)
  • #62703F
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

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.50095 85.64
  • hsl(80, 24%, 35%)
  • rgb(97, 112, 68)
  • #617044
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

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.50021 85.14
  • hsl(76, 36%, 32%)
  • rgb(96, 113, 52)
  • #607134
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

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.5007 86.63
  • hsl(73, 61%, 27%)
  • rgb(95, 114, 27)
  • #5F721B
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

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.50031 86.65
  • hsl(75, 50%, 29%)
  • rgb(94, 114, 37)
  • #5E7225
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

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.50003 87.03
  • hsl(72, 91%, 23%)
  • rgb(92, 115, 5)
  • #5C7305
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

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.50006 87.74
  • hsl(72, 93%, 23%)
  • rgb(92, 115, 4)
  • #5C7304
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

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.50057 87.82
  • hsl(75, 66%, 27%)
  • rgb(91, 115, 23)
  • #5B7317
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

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.50012 87.5
  • hsl(78, 55%, 29%)
  • rgb(90, 115, 33)
  • #5A7321
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

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.50071 87.93
  • hsl(81, 47%, 30%)
  • rgb(89, 115, 41)
  • #597329
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

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.5006 88.33
  • hsl(76, 79%, 25%)
  • rgb(87, 116, 13)
  • #57740D
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

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.50044 88.78
  • hsl(79, 63%, 27%)
  • rgb(86, 116, 26)
  • #56741A
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

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.50097 89.07
  • hsl(80, 80%, 25%)
  • rgb(82, 117, 13)
  • #52750D
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

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.50058 90.64
Pas satisfait ?
Propose moi une palette de couleurs valides