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(97, 58%, 43%)
  • rgb(95, 177, 47)
  • #5FB12F
  • 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.

2.25078

Nouveau contraste : 20 résultats (6 086 476 couleurs testées)

Contrastes valides
Avant plan Arrière plan Exemple Ratio Distance
  • hsl(93, 16%, 37%)
  • rgb(94, 112, 80)
  • #5E7050
  • 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.50018 62.03
  • hsl(96, 33%, 34%)
  • rgb(81, 116, 58)
  • #51743A
  • 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.50055 61.13
  • hsl(100, 30%, 34%)
  • rgb(80, 116, 62)
  • #50743E
  • 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.50091 61.0
  • hsl(93, 42%, 32%)
  • rgb(78, 117, 47)
  • #4E752F
  • 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.50011 60.45
  • hsl(100, 35%, 33%)
  • rgb(76, 117, 56)
  • #4C7538
  • 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.50078 60.56
  • hsl(95, 46%, 31%)
  • rgb(73, 118, 43)
  • #49762B
  • 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.50006 60.01
  • hsl(102, 38%, 33%)
  • rgb(71, 118, 52)
  • #477634
  • 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.50083 60.28
  • hsl(93, 60%, 29%)
  • rgb(69, 119, 29)
  • #45771D
  • 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.5001 60.23
  • hsl(96, 54%, 30%)
  • rgb(68, 119, 35)
  • #447723
  • 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.50093 60.05
  • hsl(100, 48%, 31%)
  • rgb(67, 119, 41)
  • #437729
  • 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.50022 60.12
  • hsl(94, 69%, 27%)
  • rgb(63, 120, 22)
  • #3F7816
  • 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.50009 61.59
  • hsl(94, 70%, 27%)
  • rgb(63, 120, 21)
  • #3F7815
  • 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.50096 61.76
  • hsl(98, 61%, 29%)
  • rgb(62, 120, 29)
  • #3E781D
  • 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.50051 61.0
  • hsl(101, 54%, 30%)
  • rgb(61, 120, 35)
  • #3D7823
  • 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.50037 60.93
  • hsl(96, 79%, 26%)
  • rgb(56, 121, 14)
  • #38790E
  • 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.50018 64.7
  • hsl(96, 80%, 26%)
  • rgb(56, 121, 13)
  • #38790D
  • 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.50079 64.97
  • hsl(100, 69%, 28%)
  • rgb(55, 121, 22)
  • #377916
  • 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.50072 63.43
  • hsl(100, 83%, 26%)
  • rgb(47, 122, 11)
  • #2F7A0B
  • 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.5001 68.66
  • hsl(100, 84%, 25%)
  • rgb(47, 122, 10)
  • #2F7A0A
  • 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.50062 68.94
  • hsl(97, 12%, 38%)
  • rgb(96, 111, 87)
  • #606F57
  • 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.50097 60.69
Pas satisfait ?
Propose moi une palette de couleurs valides