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%, 15%)
  • rgb(40, 40, 40)
  • #282828
  • hsl(5, 78%, 57%)
  • rgb(231, 76, 60)
  • #E74C3C

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

Nouveau contraste : 6 résultats (114 couleurs testées)

Contrastes valides
Avant plan Arrière plan Exemple Ratio Distance
  • hsl(0, 0%, 5%)
  • rgb(15, 15, 15)
  • #0F0F0F
  • hsl(5, 78%, 57%)
  • rgb(231, 76, 60)
  • #E74C3C

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.01745 36.06
  • hsl(0, 7%, 5%)
  • rgb(15, 13, 13)
  • #0F0D0D
  • hsl(5, 78%, 57%)
  • rgb(231, 76, 60)
  • #E74C3C

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.0723 38.03
  • hsl(0, 11%, 5%)
  • rgb(15, 12, 12)
  • #0F0C0C
  • hsl(5, 78%, 57%)
  • rgb(231, 76, 60)
  • #E74C3C

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.09809 39.05
  • hsl(0, 20%, 4%)
  • rgb(15, 10, 10)
  • #0F0A0A
  • hsl(5, 78%, 57%)
  • rgb(231, 76, 60)
  • #E74C3C

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.14629 41.14
  • hsl(0, 24%, 4%)
  • rgb(15, 9, 9)
  • #0F0909
  • hsl(5, 78%, 57%)
  • rgb(231, 76, 60)
  • #E74C3C

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.16942 42.21
  • hsl(0, 33%, 11%)
  • rgb(40, 20, 20)
  • #281414
  • hsl(5, 78%, 57%)
  • rgb(231, 76, 60)
  • #E74C3C

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