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(210, 10%, 14%)
  • rgb(33, 37, 41)
  • #212529
  • hsl(0, 0%, 54%)
  • rgb(138, 138, 138)
  • #8A8A8A

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

Nouveau contraste : 7 résultats (196 couleurs testées)

Contrastes valides
Avant plan Arrière plan Exemple Ratio Distance
  • hsl(210, 10%, 14%)
  • rgb(33, 37, 41)
  • #212529
  • hsl(0, 0%, 64%)
  • rgb(164, 164, 164)
  • #A4A4A4

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.

6.1887 37.5
  • hsl(210, 10%, 14%)
  • rgb(33, 37, 41)
  • #212529
  • hsl(0, 8%, 60%)
  • rgb(164, 147, 147)
  • #A49393

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.

5.2694 26.7
  • hsl(210, 10%, 14%)
  • rgb(33, 37, 41)
  • #212529
  • hsl(0, 23%, 66%)
  • rgb(190, 150, 150)
  • #BE9696

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.

5.87108 52.42
  • hsl(210, 10%, 14%)
  • rgb(33, 37, 41)
  • #212529
  • hsl(0, 30%, 63%)
  • rgb(190, 132, 132)
  • #BE8484

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.

5.01216 51.95
  • hsl(210, 10%, 14%)
  • rgb(33, 37, 41)
  • #212529
  • hsl(0, 53%, 67%)
  • rgb(216, 127, 127)
  • #D87F7F

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.

5.33455 77.85
  • hsl(210, 10%, 14%)
  • rgb(33, 37, 41)
  • #212529
  • hsl(0, 58%, 63%)
  • rgb(216, 107, 107)
  • #D86B6B

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.58026 74.59
  • hsl(210, 10%, 14%)
  • rgb(33, 37, 41)
  • #212529
  • hsl(0, 85%, 65%)
  • rgb(242, 94, 94)
  • #F25E5E

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.80284 98.46
Pas satisfait ?
Propose moi les couleurs valides et très proches de la couleur initiale