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%, 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.

3.25029

Nouveau contraste : 29 résultats (336 couleurs testées)

Contrastes valides
Avant plan Arrière plan Exemple Ratio Distance
  • hsl(19, 71%, 30%)
  • rgb(135, 58, 22)
  • #873A16
  • 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.

7.93355 102.89
  • hsl(19, 59%, 33%)
  • rgb(135, 66, 34)
  • #874222
  • 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.

7.41378 101.53
  • hsl(18, 45%, 29%)
  • rgb(110, 62, 41)
  • #6E3E29
  • 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.

8.80847 126.35
  • hsl(19, 37%, 31%)
  • rgb(110, 70, 50)
  • #6E4632
  • 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.

8.12341 125.66
  • hsl(17, 27%, 33%)
  • rgb(110, 76, 62)
  • #6E4C3E
  • 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.

7.59127 125.08
  • hsl(18, 13%, 29%)
  • rgb(85, 71, 65)
  • #554741
  • 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.

8.88368 150.15
  • hsl(10, 6%, 31%)
  • rgb(85, 76, 74)
  • #554C4A
  • 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.

8.33691 149.57
  • hsl(0, 2%, 32%)
  • rgb(85, 81, 81)
  • #555151
  • 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.

7.82984 148.95
  • hsl(19, 88%, 28%)
  • rgb(135, 50, 8)
  • #873208
  • 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.

8.43398 105.3
  • hsl(54, 71%, 19%)
  • rgb(85, 78, 14)
  • #554E0E
  • 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.

8.45971 150.41
  • hsl(53, 58%, 20%)
  • rgb(85, 78, 22)
  • #554E16
  • 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.

8.44187 150.27
  • hsl(54, 46%, 22%)
  • rgb(85, 80, 31)
  • #55501F
  • 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.

8.22398 150.16
  • hsl(54, 38%, 24%)
  • rgb(85, 81, 38)
  • #555126
  • 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.

8.10429 150.14
  • hsl(53, 27%, 26%)
  • rgb(85, 81, 48)
  • #555130
  • 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.

8.0586 150.12
  • hsl(51, 20%, 27%)
  • rgb(85, 81, 56)
  • #555138
  • 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.

8.01424 150.05
  • hsl(51, 13%, 29%)
  • rgb(85, 82, 65)
  • #555241
  • 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.

7.86662 149.83
  • hsl(49, 6%, 31%)
  • rgb(85, 83, 74)
  • #55534A
  • 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.

7.71366 149.41
  • hsl(60, 2%, 32%)
  • rgb(85, 85, 81)
  • #555551
  • 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.

7.48803 148.89
  • hsl(54, 88%, 17%)
  • rgb(85, 78, 5)
  • #554E05
  • 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.

8.47387 150.73
  • hsl(91, 71%, 19%)
  • rgb(48, 85, 14)
  • #30550E
  • 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.

8.63694 187.18
  • hsl(92, 58%, 20%)
  • rgb(51, 85, 22)
  • #335516
  • 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.

8.56532 184.09
  • hsl(93, 46%, 22%)
  • rgb(55, 85, 31)
  • #37551F
  • 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.

8.46218 180.05
  • hsl(91, 38%, 24%)
  • rgb(60, 85, 38)
  • #3C5526
  • 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.

8.33492 175.05
  • hsl(92, 27%, 26%)
  • rgb(65, 85, 48)
  • #415530
  • 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.

8.18125 170.05
  • hsl(95, 20%, 27%)
  • rgb(68, 85, 56)
  • #445538
  • 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.

8.06981 166.99
  • hsl(90, 13%, 29%)
  • rgb(75, 85, 65)
  • #4B5541
  • 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.

7.85076 159.81
  • hsl(98, 6%, 31%)
  • rgb(78, 85, 74)
  • #4E554A
  • 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.

7.71428 156.43
  • hsl(105, 2%, 32%)
  • rgb(82, 85, 81)
  • #525551
  • 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.

7.56216 151.93
  • hsl(92, 88%, 17%)
  • rgb(42, 85, 5)
  • #2A5505
  • 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.

8.74986 193.36
Pas satisfait ?
Propose moi les couleurs valides et très proches de la couleur initiale