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(120, 32%, 40%)
  • rgb(70, 136, 71)
  • #468847
  • 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.

3.61029

Nouveau contraste : 40 résultats (374 couleurs testées)

Contrastes valides
Avant plan Arrière plan Exemple Ratio Distance
  • hsl(121, 32%, 32%)
  • rgb(57, 111, 58)
  • #396F3A
  • 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.

5.01396 27.15
  • hsl(120, 24%, 35%)
  • rgb(68, 111, 68)
  • #446F44
  • 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.88288 25.02
  • hsl(120, 16%, 37%)
  • rgb(80, 111, 80)
  • #506F50
  • 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.71578 24.04
  • hsl(120, 9%, 39%)
  • rgb(91, 111, 91)
  • #5B6F5B
  • 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.54643 11.78
  • hsl(120, 4%, 32%)
  • rgb(79, 86, 79)
  • #4F564F
  • 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.

6.33653 49.83
  • hsl(120, 41%, 30%)
  • rgb(46, 111, 47)
  • #2E6F2F
  • 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.

5.12773 35.11
  • hsl(122, 53%, 28%)
  • rgb(34, 111, 37)
  • #226F25
  • 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.

5.22285 46.66
  • hsl(122, 65%, 26%)
  • rgb(23, 111, 26)
  • #176F1A
  • 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.

5.29099 59.49
  • hsl(122, 81%, 23%)
  • rgb(11, 111, 15)
  • #0B6F0F
  • 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.

5.33952 73.47
  • hsl(122, 99%, 21%)
  • rgb(0, 111, 5)
  • #006F05
  • 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.

5.37038 86.45
  • hsl(84, 32%, 32%)
  • rgb(89, 111, 57)
  • #596F39
  • 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.682 22.58
  • hsl(85, 24%, 35%)
  • rgb(93, 111, 68)
  • #5D6F44
  • 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.60232 15.16
  • hsl(85, 16%, 37%)
  • rgb(98, 111, 80)
  • #626F50
  • 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.50075 19.18
  • hsl(86, 10%, 30%)
  • rgb(79, 86, 70)
  • #4F5646
  • 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.

6.39286 49.9
  • hsl(94, 4%, 32%)
  • rgb(82, 86, 79)
  • #52564F
  • 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.

6.27704 49.7
  • hsl(84, 41%, 30%)
  • rgb(84, 111, 46)
  • #546F2E
  • 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.76756 30.55
  • hsl(84, 53%, 28%)
  • rgb(79, 111, 34)
  • #4F6F22
  • 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.84751 40.32
  • hsl(85, 65%, 26%)
  • rgb(74, 111, 23)
  • #4A6F17
  • 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.91799 50.15
  • hsl(85, 81%, 23%)
  • rgb(69, 111, 11)
  • #456F0B
  • 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.98158 61.41
  • hsl(85, 99%, 21%)
  • rgb(64, 111, 0)
  • #406F00
  • 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.

5.03847 72.03
  • hsl(156, 32%, 32%)
  • rgb(57, 111, 90)
  • #396F5A
  • 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.89327 22.21
  • hsl(156, 24%, 35%)
  • rgb(68, 111, 94)
  • #446F5E
  • 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.77921 15.13
  • hsl(154, 16%, 37%)
  • rgb(80, 111, 98)
  • #506F62
  • 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.64049 17.17
  • hsl(153, 10%, 30%)
  • rgb(70, 86, 79)
  • #46564F
  • 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.

6.50531 49.93
  • hsl(145, 4%, 32%)
  • rgb(79, 86, 82)
  • #4F5652
  • 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.

6.3162 49.72
  • hsl(156, 41%, 30%)
  • rgb(46, 111, 86)
  • #2E6F56
  • 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.99194 29.65
  • hsl(157, 53%, 28%)
  • rgb(34, 111, 82)
  • #226F52
  • 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.

5.07941 39.35
  • hsl(157, 65%, 26%)
  • rgb(23, 111, 78)
  • #176F4E
  • 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.

5.14388 49.2
  • hsl(157, 81%, 23%)
  • rgb(11, 111, 74)
  • #0B6F4A
  • 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.

5.1945 60.46
  • hsl(157, 99%, 21%)
  • rgb(0, 111, 70)
  • #006F46
  • 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.

5.23262 71.05
  • hsl(194, 32%, 32%)
  • rgb(57, 98, 111)
  • #39626F
  • 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.

5.58411 19.07
  • hsl(193, 24%, 35%)
  • rgb(68, 101, 111)
  • #44656F
  • 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.

5.27248 27.64
  • hsl(195, 16%, 37%)
  • rgb(80, 103, 111)
  • #50676F
  • 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.

5.01126 30.75
  • hsl(195, 9%, 39%)
  • rgb(91, 106, 111)
  • #5B6A6F
  • 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.70912 35.9
  • hsl(205, 4%, 32%)
  • rgb(79, 83, 86)
  • #4F5356
  • 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.

6.50604 52.51
  • hsl(193, 41%, 30%)
  • rgb(46, 96, 111)
  • #2E606F
  • 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.

5.82777 24.0
  • hsl(193, 52%, 34%)
  • rgb(42, 115, 136)
  • #2A7388
  • 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.50385 62.44
  • hsl(230, 32%, 40%)
  • rgb(70, 81, 136)
  • #465188
  • 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.

6.29925 47.66
  • hsl(266, 32%, 40%)
  • rgb(99, 70, 136)
  • #634688
  • 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.

6.36948 22.58
  • hsl(302, 32%, 40%)
  • rgb(136, 70, 133)
  • #884685
  • 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.

5.39404 62.0
Pas satisfait ?