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(120, 32%, 40%)
  • rgb(70, 136, 71)
  • #468847
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

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

Nouveau contraste : 17 résultats (3 672 320 couleurs testées)

Contrastes valides
Avant plan Arrière plan Exemple Ratio Distance
  • hsl(117, 32%, 31%)
  • rgb(57, 107, 55)
  • #396B37
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

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.50075 31.31
  • hsl(122, 31%, 31%)
  • rgb(56, 107, 58)
  • #386B3A
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

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.5006 30.84
  • hsl(123, 36%, 30%)
  • rgb(50, 108, 53)
  • #326C35
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

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 32.95
  • hsl(117, 44%, 29%)
  • rgb(45, 109, 42)
  • #2D6D2A
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

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.50041 39.08
  • hsl(120, 42%, 30%)
  • rgb(44, 109, 45)
  • #2C6D2D
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

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.50044 37.99
  • hsl(117, 52%, 28%)
  • rgb(37, 110, 34)
  • #256E22
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

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.50086 47.05
  • hsl(120, 50%, 28%)
  • rgb(36, 110, 37)
  • #246E25
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

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 45.82
  • hsl(123, 51%, 28%)
  • rgb(35, 110, 40)
  • #236E28
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

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.5004 44.85
  • hsl(117, 65%, 26%)
  • rgb(27, 111, 23)
  • #1B6F17
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

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.50003 59.03
  • hsl(120, 62%, 26%)
  • rgb(26, 111, 26)
  • #1A6F1A
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

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.50021 57.68
  • hsl(124, 64%, 26%)
  • rgb(24, 111, 31)
  • #186F1F
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

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.5005 56.14
  • hsl(117, 91%, 22%)
  • rgb(10, 112, 5)
  • #0A7005
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

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.50001 80.28
  • hsl(116, 93%, 22%)
  • rgb(10, 112, 4)
  • #0A7004
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

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.5006 80.96
  • hsl(118, 88%, 23%)
  • rgb(9, 112, 7)
  • #097007
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

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.50057 79.53
  • hsl(121, 86%, 23%)
  • rgb(8, 112, 10)
  • #08700A
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

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.50053 78.25
  • hsl(123, 88%, 23%)
  • rgb(7, 112, 13)
  • #07700D
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

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.50035 77.14
  • hsl(125, 89%, 23%)
  • rgb(6, 112, 15)
  • #06700F
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

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 76.72
Pas satisfait ?
Propose moi une palette de couleurs valides