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(330, 100%, 66%)
  • rgb(255, 82, 167)
  • #FF52A7
  • hsl(330, 100%, 45%)
  • rgb(230, 0, 113)
  • #E60071

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.

1.52441

Nouveau contraste : 21 résultats (240 couleurs testées)

Contrastes valides
Avant plan Arrière plan Exemple Ratio Distance
  • hsl(330, 100%, 66%)
  • rgb(255, 82, 167)
  • #FF52A7
  • hsl(330, 100%, 25%)
  • rgb(130, 0, 63)
  • #82003F

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.47211 104.0
  • hsl(330, 100%, 66%)
  • rgb(255, 82, 167)
  • #FF52A7
  • hsl(331, 81%, 28%)
  • rgb(130, 13, 69)
  • #820D45

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.3531 102.69
  • hsl(330, 100%, 66%)
  • rgb(255, 82, 167)
  • #FF52A7
  • hsl(330, 66%, 30%)
  • rgb(130, 26, 77)
  • #821A4D

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.18359 100.96
  • hsl(330, 100%, 66%)
  • rgb(255, 82, 167)
  • #FF52A7
  • hsl(330, 54%, 26%)
  • rgb(105, 31, 68)
  • #691F44

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.73217 126.29
  • hsl(330, 100%, 66%)
  • rgb(255, 82, 167)
  • #FF52A7
  • hsl(331, 42%, 28%)
  • rgb(105, 42, 72)
  • #692A48

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.46444 124.89
  • hsl(330, 100%, 66%)
  • rgb(255, 82, 167)
  • #FF52A7
  • hsl(330, 34%, 30%)
  • rgb(105, 51, 78)
  • #69334E

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.21259 123.05
  • hsl(330, 100%, 66%)
  • rgb(255, 82, 167)
  • #FF52A7
  • hsl(330, 25%, 25%)
  • rgb(80, 48, 64)
  • #503040

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.81788 150.1
  • hsl(330, 100%, 66%)
  • rgb(255, 82, 167)
  • #FF52A7
  • hsl(331, 18%, 26%)
  • rgb(80, 55, 67)
  • #503743

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.56439 148.97
  • hsl(330, 100%, 66%)
  • rgb(255, 82, 167)
  • #FF52A7
  • hsl(337, 11%, 28%)
  • rgb(80, 64, 70)
  • #504046

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.24423 147.24
  • hsl(330, 100%, 66%)
  • rgb(255, 82, 167)
  • #FF52A7
  • hsl(330, 6%, 29%)
  • rgb(80, 70, 75)
  • #50464B

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.02615 145.6
  • hsl(330, 100%, 66%)
  • rgb(255, 82, 167)
  • #FF52A7
  • hsl(0, 0%, 21%)
  • rgb(55, 55, 55)
  • #373737

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.97765 175.31
  • hsl(330, 100%, 66%)
  • rgb(255, 82, 167)
  • #FF52A7
  • hsl(294, 100%, 25%)
  • rgb(117, 0, 130)
  • #750082

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.37559 112.87
  • hsl(330, 100%, 66%)
  • rgb(255, 82, 167)
  • #FF52A7
  • hsl(294, 81%, 28%)
  • rgb(119, 13, 130)
  • #770D82

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.24212 110.81
  • hsl(330, 100%, 66%)
  • rgb(255, 82, 167)
  • #FF52A7
  • hsl(293, 66%, 30%)
  • rgb(119, 26, 130)
  • #771A82

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.11243 110.39
  • hsl(330, 100%, 66%)
  • rgb(255, 82, 167)
  • #FF52A7
  • hsl(292, 54%, 26%)
  • rgb(96, 31, 105)
  • #601F69

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.6983 133.45
  • hsl(330, 100%, 66%)
  • rgb(255, 82, 167)
  • #FF52A7
  • hsl(292, 42%, 28%)
  • rgb(97, 42, 105)
  • #612A69

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.43386 131.6
  • hsl(330, 100%, 66%)
  • rgb(255, 82, 167)
  • #FF52A7
  • hsl(293, 34%, 30%)
  • rgb(99, 51, 105)
  • #633369

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.17789 128.38
  • hsl(330, 100%, 66%)
  • rgb(255, 82, 167)
  • #FF52A7
  • hsl(292, 25%, 25%)
  • rgb(76, 48, 80)
  • #4C3050

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.80132 152.94
  • hsl(330, 100%, 66%)
  • rgb(255, 82, 167)
  • #FF52A7
  • hsl(290, 18%, 26%)
  • rgb(76, 55, 80)
  • #4C3750

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.56259 152.14
  • hsl(330, 100%, 66%)
  • rgb(255, 82, 167)
  • #FF52A7
  • hsl(285, 11%, 28%)
  • rgb(76, 64, 80)
  • #4C4050

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.25385 150.75
  • hsl(330, 100%, 66%)
  • rgb(255, 82, 167)
  • #FF52A7
  • hsl(288, 6%, 29%)
  • rgb(78, 70, 80)
  • #4E4650

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.02997 147.43
Pas satisfait ?