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, 90%, 44%)
  • rgb(217, 11, 11)
  • #D90B0B
  • 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.

5.24601

Nouveau contraste : 10 résultats (985 320 couleurs testées)

Contrastes valides
Avant plan Arrière plan Exemple Ratio Distance
  • hsl(2, 98%, 35%)
  • rgb(181, 8, 1)
  • #B50801
  • 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.

7.00018 36.26
  • hsl(3, 95%, 36%)
  • rgb(180, 13, 4)
  • #B40D04
  • 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.

7.00004 37.08
  • hsl(3, 92%, 36%)
  • rgb(179, 17, 7)
  • #B31107
  • 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.

7.00003 37.96
  • hsl(1, 84%, 37%)
  • rgb(178, 20, 15)
  • #B2140F
  • 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.

7.0001 38.83
  • hsl(4, 86%, 37%)
  • rgb(176, 26, 13)
  • #B01A0D
  • 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.

7.00096 40.32
  • hsl(2, 78%, 38%)
  • rgb(175, 28, 21)
  • #AF1C15
  • 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.

7.00065 40.85
  • hsl(2, 72%, 39%)
  • rgb(172, 34, 28)
  • #AC221C
  • 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.

7.00068 41.99
  • hsl(3, 72%, 38%)
  • rgb(171, 36, 27)
  • #AB241B
  • 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.

7.00055 42.66
  • hsl(2, 64%, 39%)
  • rgb(167, 42, 36)
  • #A72A24
  • 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.

7.00056 43.01
  • hsl(2, 60%, 40%)
  • rgb(164, 46, 40)
  • #A42E28
  • 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.

7.00014 43.38
Pas satisfait ?
Propose moi une palette de couleurs valides