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(33, 96%, 56%)
  • rgb(251, 156, 38)
  • #FB9C26

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.

2.12438

Nouveau contraste : 37 résultats (3 564 080 couleurs testées)

Contrastes valides
Avant plan Arrière plan Exemple Ratio Distance
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(29, 93%, 37%)
  • rgb(185, 94, 6)
  • #B95E06

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.50009 82.36
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(29, 94%, 37%)
  • rgb(185, 94, 5)
  • #B95E05

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.50052 82.51
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(29, 95%, 37%)
  • rgb(185, 94, 4)
  • #B95E04

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 82.68
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(30, 89%, 37%)
  • rgb(182, 96, 10)
  • #B6600A

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.50011 82.74
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(30, 90%, 37%)
  • rgb(182, 96, 9)
  • #B66009

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.50054 82.86
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(30, 91%, 37%)
  • rgb(182, 96, 8)
  • #B66008

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.50096 82.99
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(31, 93%, 36%)
  • rgb(179, 98, 6)
  • #B36206

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 84.4
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(32, 94%, 36%)
  • rgb(179, 98, 5)
  • #B36205

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 84.54
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(29, 77%, 39%)
  • rgb(177, 99, 23)
  • #B16317

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.50013 84.05
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(29, 77%, 39%)
  • rgb(177, 99, 22)
  • #B16316

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 84.09
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(28, 69%, 40%)
  • rgb(175, 100, 32)
  • #AF6420

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.50014 85.03
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(32, 87%, 36%)
  • rgb(174, 101, 12)
  • #AE650C

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.50015 86.2
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(33, 88%, 36%)
  • rgb(174, 101, 11)
  • #AE650B

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.50061 86.29
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(31, 77%, 38%)
  • rgb(172, 102, 22)
  • #AC6616

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.50039 86.83
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(31, 71%, 38%)
  • rgb(170, 103, 28)
  • #AA671C

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 87.99
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(31, 68%, 39%)
  • rgb(168, 104, 32)
  • #A86820

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.50069 89.32
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(36, 93%, 33%)
  • rgb(167, 105, 6)
  • #A76906

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 91.18
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(37, 94%, 33%)
  • rgb(167, 105, 5)
  • #A76905

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.50072 91.31
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(32, 65%, 39%)
  • rgb(166, 105, 35)
  • #A66923

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.50036 90.73
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(37, 87%, 34%)
  • rgb(165, 106, 11)
  • #A56A0B

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 92.08
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(37, 88%, 34%)
  • rgb(165, 106, 10)
  • #A56A0A

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.50077 92.17
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(28, 53%, 42%)
  • rgb(165, 105, 50)
  • #A56932

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.50011 91.54
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(37, 85%, 34%)
  • rgb(163, 107, 13)
  • #A36B0D

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.50045 93.4
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(37, 86%, 34%)
  • rgb(163, 107, 12)
  • #A36B0C

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 93.47
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(33, 62%, 39%)
  • rgb(162, 107, 37)
  • #A26B25

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.50058 93.7
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(30, 51%, 41%)
  • rgb(161, 107, 51)
  • #A16B33

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.50036 94.52
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(34, 62%, 38%)
  • rgb(160, 108, 37)
  • #A06C25

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.5002 95.25
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(29, 44%, 42%)
  • rgb(158, 108, 61)
  • #9E6C3D

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.50042 96.65
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(37, 65%, 37%)
  • rgb(156, 110, 33)
  • #9C6E21

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.50072 98.47
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(30, 44%, 42%)
  • rgb(156, 109, 60)
  • #9C6D3C

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.50036 98.32
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(36, 54%, 38%)
  • rgb(153, 111, 45)
  • #996F2D

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.50052 101.05
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(30, 39%, 43%)
  • rgb(153, 110, 67)
  • #996E43

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.50076 100.47
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(34, 46%, 40%)
  • rgb(152, 111, 56)
  • #986F38

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 101.82
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(32, 39%, 42%)
  • rgb(151, 111, 65)
  • #976F41

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.50067 102.33
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(36, 47%, 39%)
  • rgb(150, 112, 53)
  • #967035

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.50076 103.61
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(36, 42%, 40%)
  • rgb(147, 113, 59)
  • #93713B

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 106.12
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(35, 33%, 41%)
  • rgb(143, 114, 71)
  • #8F7247

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.5008 109.08
Pas satisfait ?