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%, 100%)
  • rgb(255, 255, 255)
  • #FFF
  • hsl(231, 16%, 56%)
  • rgb(126, 131, 163)
  • #7E83A3

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

Nouveau contraste : 22 résultats (1 786 080 couleurs testées)

Contrastes valides
Avant plan Arrière plan Exemple Ratio Distance
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(228, 10%, 49%)
  • rgb(113, 118, 139)
  • #71768B

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 26.31
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(234, 23%, 54%)
  • rgb(110, 115, 166)
  • #6E73A6

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.50071 20.14
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(236, 27%, 55%)
  • rgb(110, 114, 172)
  • #6E72AC

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.50099 20.23
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(230, 24%, 53%)
  • rgb(107, 116, 165)
  • #6B74A5

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 21.71
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(232, 33%, 55%)
  • rgb(105, 114, 180)
  • #6972B4

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 21.0
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(234, 45%, 59%)
  • rgb(103, 111, 198)
  • #676FC6

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.50071 28.32
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(228, 30%, 53%)
  • rgb(102, 116, 173)
  • #6674AD

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.50012 25.3
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(230, 39%, 56%)
  • rgb(100, 114, 187)
  • #6472BB

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.50029 20.54
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(232, 45%, 58%)
  • rgb(100, 112, 197)
  • #6470C5

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.50086 24.59
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(228, 36%, 55%)
  • rgb(99, 115, 183)
  • #6373B7

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 25.08
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(234, 61%, 61%)
  • rgb(98, 108, 217)
  • #626CD9

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 49.78
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(235, 64%, 62%)
  • rgb(98, 107, 221)
  • #626BDD

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.50016 54.21
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(234, 62%, 61%)
  • rgb(97, 108, 218)
  • #616CDA

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.50094 50.63
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(235, 65%, 62%)
  • rgb(97, 107, 222)
  • #616BDE

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.50051 55.09
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(229, 46%, 57%)
  • rgb(96, 113, 197)
  • #6071C5

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.50098 18.64
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(233, 59%, 60%)
  • rgb(96, 109, 215)
  • #606DD7

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.50057 46.87
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(234, 66%, 62%)
  • rgb(96, 107, 223)
  • #606BDF

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.50066 55.95
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(230, 50%, 58%)
  • rgb(95, 112, 203)
  • #5F70CB

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 30.13
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(231, 64%, 60%)
  • rgb(91, 109, 220)
  • #5B6DDC

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.50089 50.87
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(231, 65%, 60%)
  • rgb(90, 109, 221)
  • #5A6DDD

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 51.65
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(227, 61%, 58%)
  • rgb(84, 112, 214)
  • #5470D6

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.50099 37.25
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(227, 66%, 59%)
  • rgb(82, 111, 220)
  • #526FDC

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.50064 45.15
Pas satisfait ?