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%, 56%)
  • rgb(145, 145, 145)
  • #919191
  • 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.15175

Nouveau contraste : 14 résultats (4 199 040 couleurs testées)

Contrastes valides
Avant plan Arrière plan Exemple Ratio Distance
  • hsl(0, 1%, 46%)
  • rgb(121, 118, 118)
  • #797676
  • 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.

4.50068 37.61
  • hsl(1, 18%, 50%)
  • rgb(153, 107, 106)
  • #996B6A
  • 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.

4.50097 48.44
  • hsl(3, 22%, 50%)
  • rgb(158, 105, 102)
  • #9E6966
  • 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.

4.50034 52.09
  • hsl(1, 30%, 52%)
  • rgb(170, 99, 97)
  • #AA6361
  • 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.

4.5001 57.72
  • hsl(2, 31%, 52%)
  • rgb(172, 98, 95)
  • #AC625F
  • 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.

4.50021 59.36
  • hsl(3, 41%, 52%)
  • rgb(184, 91, 85)
  • #B85B55
  • 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.

4.50095 67.98
  • hsl(1, 40%, 53%)
  • rgb(185, 90, 88)
  • #B95A58
  • 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.

4.50041 66.01
  • hsl(4, 49%, 52%)
  • rgb(194, 84, 76)
  • #C2544C
  • 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.

4.5003 75.93
  • hsl(2, 55%, 53%)
  • rgb(202, 77, 72)
  • #CA4D48
  • 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.

4.50022 80.32
  • hsl(1, 55%, 53%)
  • rgb(203, 76, 72)
  • #CB4C48
  • 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.

4.50001 80.54
  • hsl(1, 57%, 54%)
  • rgb(205, 74, 71)
  • #CD4A47
  • 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.

4.50033 81.79
  • hsl(1, 58%, 54%)
  • rgb(206, 73, 70)
  • #CE4946
  • 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.

4.50082 82.82
  • hsl(1, 58%, 54%)
  • rgb(207, 72, 69)
  • #CF4845
  • 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.

4.50068 83.86
  • hsl(1, 60%, 53%)
  • rgb(209, 70, 66)
  • #D14642
  • 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.

4.50084 86.75
Pas satisfait ?
Propose moi une palette de couleurs valides