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, 100%, 34%)
  • rgb(174, 0, 0)
  • #AE0000
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

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.14676

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

Contrastes valides
Avant plan Arrière plan Exemple Ratio Distance
  • hsl(0, 96%, 63%)
  • rgb(252, 72, 72)
  • #FC4848
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

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.72301 106.88
  • hsl(0, 96%, 68%)
  • rgb(252, 98, 98)
  • #FC6262
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

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.41534 133.08
  • hsl(0, 66%, 65%)
  • rgb(226, 109, 109)
  • #E26D6D
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

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.09292 139.77
  • hsl(0, 43%, 62%)
  • rgb(200, 117, 117)
  • #C87575
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

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.79788 147.68
  • hsl(0, 36%, 65%)
  • rgb(200, 136, 136)
  • #C88888
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

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.62277 171.55
  • hsl(0, 19%, 60%)
  • rgb(174, 136, 136)
  • #AE8888
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

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.11966 171.35
  • hsl(35, 100%, 39%)
  • rgb(200, 119, 0)
  • #C87700
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

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.67316 119.41
  • hsl(35, 82%, 42%)
  • rgb(200, 127, 19)
  • #C87F13
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

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.9848 127.5
  • hsl(35, 67%, 46%)
  • rgb(200, 135, 39)
  • #C88727
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

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.32964 136.39
  • hsl(35, 56%, 50%)
  • rgb(200, 143, 58)
  • #C88F3A
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

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.70934 146.39
  • hsl(36, 43%, 47%)
  • rgb(174, 132, 68)
  • #AE8444
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

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.74149 137.76
  • hsl(71, 100%, 34%)
  • rgb(140, 174, 0)
  • #8CAE00
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

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.26414 173.57
  • hsl(107, 100%, 34%)
  • rgb(36, 174, 0)
  • #24AE00
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

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.46664 138.21
  • hsl(143, 100%, 34%)
  • rgb(0, 174, 68)
  • #00AE44
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

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.47313 68.0
  • hsl(179, 100%, 34%)
  • rgb(0, 174, 172)
  • #00AEAC
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

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.8659 172.0
  • hsl(215, 96%, 63%)
  • rgb(72, 147, 252)
  • #4893FC
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

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.25597 262.65
  • hsl(215, 70%, 61%)
  • rgb(88, 144, 226)
  • #5890E2
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

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.98588 240.4
  • hsl(214, 48%, 58%)
  • rgb(97, 140, 200)
  • #618CC8
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

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.67235 217.49
  • hsl(215, 43%, 62%)
  • rgb(117, 151, 200)
  • #7597C8
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

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.38047 224.12
  • hsl(214, 25%, 57%)
  • rgb(119, 142, 174)
  • #778EAE
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

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.80366 199.71
  • hsl(251, 95%, 73%)
  • rgb(147, 121, 252)
  • #9379FC
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

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.89293 260.88
  • hsl(251, 61%, 70%)
  • rgb(150, 132, 226)
  • #9684E2
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

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.13392 240.03
  • hsl(252, 36%, 65%)
  • rgb(149, 136, 200)
  • #9588C8
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

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.08645 218.97
  • hsl(252, 19%, 60%)
  • rgb(144, 136, 174)
  • #9088AE
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

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.84501 197.95
  • hsl(287, 96%, 63%)
  • rgb(214, 72, 252)
  • #D648FC
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

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.74772 254.27
  • hsl(286, 96%, 68%)
  • rgb(218, 98, 252)
  • #DA62FC
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

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.47 257.28
  • hsl(287, 66%, 65%)
  • rgb(202, 109, 226)
  • #CA6DE2
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

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.21172 234.29
  • hsl(287, 43%, 62%)
  • rgb(183, 117, 200)
  • #B775C8
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

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.9012 212.55
  • hsl(287, 36%, 65%)
  • rgb(187, 136, 200)
  • #BB88C8
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

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.72674 219.1
  • hsl(287, 19%, 60%)
  • rgb(166, 136, 174)
  • #A688AE
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

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.17897 198.17
Pas satisfait ?