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(19, 83%, 53%)
  • rgb(235, 102, 38)
  • #EB6626
  • hsl(0, 0%, 96%)
  • rgb(245, 245, 245)
  • #F5F5F5

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

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

Contrastes valides
Avant plan Arrière plan Exemple Ratio Distance
  • hsl(19, 72%, 42%)
  • rgb(185, 80, 30)
  • #B9501E
  • hsl(0, 0%, 96%)
  • rgb(245, 245, 245)
  • #F5F5F5

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.55466 51.45
  • hsl(19, 59%, 39%)
  • rgb(160, 79, 41)
  • #A04F29
  • hsl(0, 0%, 96%)
  • rgb(245, 245, 245)
  • #F5F5F5

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.28431 75.71
  • hsl(19, 46%, 42%)
  • rgb(160, 91, 59)
  • #A05B3B
  • hsl(0, 0%, 96%)
  • rgb(245, 245, 245)
  • #F5F5F5

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.75099 74.53
  • hsl(19, 37%, 38%)
  • rgb(135, 86, 62)
  • #87563E
  • hsl(0, 0%, 96%)
  • rgb(245, 245, 245)
  • #F5F5F5

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.61434 99.67
  • hsl(18, 27%, 41%)
  • rgb(135, 94, 76)
  • #875E4C
  • hsl(0, 0%, 96%)
  • rgb(245, 245, 245)
  • #F5F5F5

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.1563 98.15
  • hsl(17, 20%, 44%)
  • rgb(135, 103, 90)
  • #87675A
  • hsl(0, 0%, 96%)
  • rgb(245, 245, 245)
  • #F5F5F5

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.6776 95.07
  • hsl(18, 13%, 38%)
  • rgb(110, 92, 84)
  • #6E5C54
  • hsl(0, 0%, 96%)
  • rgb(245, 245, 245)
  • #F5F5F5

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.79852 122.91
  • hsl(12, 6%, 40%)
  • rgb(110, 99, 96)
  • #6E6360
  • hsl(0, 0%, 96%)
  • rgb(245, 245, 245)
  • #F5F5F5

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.32593 120.69
  • hsl(11, 2%, 42%)
  • rgb(110, 106, 105)
  • #6E6A69
  • hsl(0, 0%, 96%)
  • rgb(245, 245, 245)
  • #F5F5F5

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.90302 118.22
  • hsl(19, 88%, 38%)
  • rgb(185, 68, 11)
  • #B9440B
  • hsl(0, 0%, 96%)
  • rgb(245, 245, 245)
  • #F5F5F5

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.94589 56.88
  • hsl(54, 71%, 25%)
  • rgb(110, 101, 18)
  • #6E6512
  • hsl(0, 0%, 96%)
  • rgb(245, 245, 245)
  • #F5F5F5

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.4517 125.17
  • hsl(54, 59%, 27%)
  • rgb(110, 102, 28)
  • #6E661C
  • hsl(0, 0%, 96%)
  • rgb(245, 245, 245)
  • #F5F5F5

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.37996 125.02
  • hsl(54, 45%, 29%)
  • rgb(110, 104, 41)
  • #6E6829
  • hsl(0, 0%, 96%)
  • rgb(245, 245, 245)
  • #F5F5F5

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.24115 125.0
  • hsl(55, 37%, 31%)
  • rgb(110, 105, 50)
  • #6E6932
  • hsl(0, 0%, 96%)
  • rgb(245, 245, 245)
  • #F5F5F5

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.1645 124.96
  • hsl(53, 27%, 33%)
  • rgb(110, 105, 62)
  • #6E693E
  • hsl(0, 0%, 96%)
  • rgb(245, 245, 245)
  • #F5F5F5

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.13216 124.7
  • hsl(51, 20%, 35%)
  • rgb(110, 105, 73)
  • #6E6949
  • hsl(0, 0%, 96%)
  • rgb(245, 245, 245)
  • #F5F5F5

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.09598 124.08
  • hsl(53, 13%, 38%)
  • rgb(110, 107, 84)
  • #6E6B54
  • hsl(0, 0%, 96%)
  • rgb(245, 245, 245)
  • #F5F5F5

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.94646 122.89
  • hsl(51, 6%, 40%)
  • rgb(110, 108, 96)
  • #6E6C60
  • hsl(0, 0%, 96%)
  • rgb(245, 245, 245)
  • #F5F5F5

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.84343 120.69
  • hsl(60, 2%, 42%)
  • rgb(110, 110, 105)
  • #6E6E69
  • hsl(0, 0%, 96%)
  • rgb(245, 245, 245)
  • #F5F5F5

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.70107 118.21
  • hsl(54, 89%, 22%)
  • rgb(110, 101, 6)
  • #6E6506
  • hsl(0, 0%, 96%)
  • rgb(245, 245, 245)
  • #F5F5F5

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.46113 125.7
  • hsl(91, 71%, 25%)
  • rgb(62, 110, 18)
  • #3E6E12
  • hsl(0, 0%, 96%)
  • rgb(245, 245, 245)
  • #F5F5F5

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.59302 173.08
  • hsl(91, 59%, 27%)
  • rgb(67, 110, 28)
  • #436E1C
  • hsl(0, 0%, 96%)
  • rgb(245, 245, 245)
  • #F5F5F5

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.52584 168.01
  • hsl(93, 45%, 29%)
  • rgb(71, 110, 41)
  • #476E29
  • hsl(0, 0%, 96%)
  • rgb(245, 245, 245)
  • #F5F5F5

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.45617 163.99
  • hsl(91, 37%, 31%)
  • rgb(78, 110, 50)
  • #4E6E32
  • hsl(0, 0%, 96%)
  • rgb(245, 245, 245)
  • #F5F5F5

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.35 156.97
  • hsl(92, 27%, 33%)
  • rgb(84, 110, 62)
  • #546E3E
  • hsl(0, 0%, 96%)
  • rgb(245, 245, 245)
  • #F5F5F5

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.23865 150.79
  • hsl(94, 20%, 35%)
  • rgb(89, 110, 73)
  • #596E49
  • hsl(0, 0%, 96%)
  • rgb(245, 245, 245)
  • #F5F5F5

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.13468 145.32
  • hsl(90, 13%, 38%)
  • rgb(97, 110, 84)
  • #616E54
  • hsl(0, 0%, 96%)
  • rgb(245, 245, 245)
  • #F5F5F5

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.98154 136.27
  • hsl(98, 6%, 40%)
  • rgb(101, 110, 96)
  • #656E60
  • hsl(0, 0%, 96%)
  • rgb(245, 245, 245)
  • #F5F5F5

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.87322 130.27
  • hsl(95, 2%, 42%)
  • rgb(107, 110, 105)
  • #6B6E69
  • hsl(0, 0%, 96%)
  • rgb(245, 245, 245)
  • #F5F5F5

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.74489 121.55
  • hsl(91, 89%, 22%)
  • rgb(55, 110, 6)
  • #376E06
  • hsl(0, 0%, 96%)
  • rgb(245, 245, 245)
  • #F5F5F5

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.67288 180.33
Pas satisfait ?