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(179, 100%, 37%)
  • rgb(0, 192, 189)
  • #00C0BD
  • 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.

2.26423

Nouveau contraste : 30 résultats (294 couleurs testées)

Contrastes valides
Avant plan Arrière plan Exemple Ratio Distance
  • hsl(178, 100%, 22%)
  • rgb(0, 117, 114)
  • #007572
  • 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.54456 94.49
  • hsl(178, 82%, 25%)
  • rgb(11, 117, 114)
  • #0B7572
  • 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.52381 94.44
  • hsl(178, 67%, 27%)
  • rgb(23, 117, 114)
  • #177572
  • 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.49173 94.04
  • hsl(177, 54%, 29%)
  • rgb(34, 117, 114)
  • #227572
  • 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.44675 93.0
  • hsl(177, 43%, 31%)
  • rgb(46, 117, 114)
  • #2E7572
  • 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.37956 90.71
  • hsl(177, 34%, 34%)
  • rgb(57, 117, 114)
  • #397572
  • 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.30106 87.0
  • hsl(177, 25%, 36%)
  • rgb(69, 117, 115)
  • #457573
  • 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.19144 79.3
  • hsl(176, 18%, 38%)
  • rgb(80, 117, 115)
  • #507573
  • 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.08084 68.05
  • hsl(177, 11%, 40%)
  • rgb(92, 117, 116)
  • #5C7574
  • 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.93912 31.82
  • hsl(175, 6%, 43%)
  • rgb(103, 117, 116)
  • #677574
  • 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.80173 65.56
  • hsl(180, 0%, 45%)
  • rgb(115, 117, 117)
  • #737575
  • 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.6354 89.87
  • hsl(142, 100%, 22%)
  • rgb(0, 117, 44)
  • #00752C
  • 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.86447 151.4
  • hsl(143, 82%, 25%)
  • rgb(11, 117, 53)
  • #0B7535
  • 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.81693 143.19
  • hsl(142, 67%, 27%)
  • rgb(23, 117, 59)
  • #17753B
  • 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.76274 137.63
  • hsl(143, 54%, 29%)
  • rgb(34, 117, 66)
  • #227542
  • 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.6892 130.91
  • hsl(143, 43%, 31%)
  • rgb(46, 117, 74)
  • #2E754A
  • 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.58575 122.66
  • hsl(142, 34%, 34%)
  • rgb(57, 117, 80)
  • #397550
  • 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.47684 115.27
  • hsl(143, 25%, 36%)
  • rgb(69, 117, 88)
  • #457558
  • 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.33201 103.96
  • hsl(142, 18%, 38%)
  • rgb(80, 117, 94)
  • #50755E
  • 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.18872 91.55
  • hsl(144, 11%, 40%)
  • rgb(92, 117, 102)
  • #5C7566
  • 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.01021 67.07
  • hsl(141, 6%, 43%)
  • rgb(103, 117, 108)
  • #67756C
  • 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.8412 51.85
  • hsl(150, 0%, 45%)
  • rgb(115, 117, 116)
  • #737574
  • 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.64019 89.21
  • hsl(214, 100%, 42%)
  • rgb(0, 91, 218)
  • #005BDA
  • 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.98491 100.2
  • hsl(215, 81%, 41%)
  • rgb(19, 91, 192)
  • #135BC0
  • 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.39215 100.77
  • hsl(251, 89%, 57%)
  • rgb(85, 48, 244)
  • #5530F4
  • 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.74077 130.17
  • hsl(251, 67%, 55%)
  • rgb(94, 65, 218)
  • #5E41DA
  • 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.4726 106.07
  • hsl(251, 47%, 52%)
  • rgb(99, 76, 192)
  • #634CC0
  • 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.31491 83.9
  • hsl(286, 100%, 37%)
  • rgb(150, 0, 192)
  • #9600C0
  • 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.86732 154.71
  • hsl(322, 100%, 37%)
  • rgb(192, 0, 119)
  • #C00077
  • 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.98687 70.0
  • hsl(358, 100%, 37%)
  • rgb(192, 0, 4)
  • #C00004
  • 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.47539 185.0
Pas satisfait ?