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(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(180, 47%, 56%)
  • rgb(91, 197, 197)
  • #5BC5C5

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

Nouveau contraste : 18 résultats (5 701 046 couleurs testées)

Contrastes valides
Avant plan Arrière plan Exemple Ratio Distance
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(184, 19%, 40%)
  • rgb(83, 121, 124)
  • #53797C

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 93.92
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(181, 22%, 39%)
  • rgb(78, 122, 123)
  • #4E7A7B

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 93.95
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(178, 31%, 37%)
  • rgb(65, 124, 123)
  • #417C7B

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.50033 93.29
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(178, 37%, 35%)
  • rgb(57, 125, 123)
  • #397D7B

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 93.51
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(180, 49%, 33%)
  • rgb(43, 126, 127)
  • #2B7E7F

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.50065 93.27
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(175, 53%, 32%)
  • rgb(39, 127, 120)
  • #277F78

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.50095 97.96
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(177, 56%, 31%)
  • rgb(35, 127, 123)
  • #237F7B

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 97.39
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(184, 60%, 32%)
  • rgb(33, 126, 134)
  • #217E86

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 92.95
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(178, 59%, 31%)
  • rgb(32, 127, 125)
  • #207F7D

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.50088 97.32
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(180, 65%, 30%)
  • rgb(27, 127, 128)
  • #1B7F80

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 97.74
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(181, 67%, 30%)
  • rgb(25, 127, 129)
  • #197F81

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.50008 98.13
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(176, 72%, 29%)
  • rgb(20, 128, 121)
  • #148079

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.50067 104.02
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(182, 73%, 29%)
  • rgb(20, 127, 131)
  • #147F83

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.50095 99.61
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(177, 79%, 28%)
  • rgb(15, 128, 123)
  • #0F807B

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.50017 105.45
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(178, 88%, 26%)
  • rgb(8, 128, 125)
  • #08807D

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 108.39
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(183, 91%, 27%)
  • rgb(6, 127, 135)
  • #067F87

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 106.13
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(179, 93%, 25%)
  • rgb(4, 128, 126)
  • #04807E

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 110.38
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(184, 97%, 27%)
  • rgb(2, 127, 136)
  • #027F88

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