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%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(180, 47%, 56%)
  • rgb(91, 197, 197)
  • #5BC5C5

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.

1.93148

Nouveau contraste : 45 résultats (402 couleurs testées)

Contrastes valides
Avant plan Arrière plan Exemple Ratio Distance
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(180, 37%, 34%)
  • rgb(55, 122, 122)
  • #377A7A

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.67764 96.2
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(180, 27%, 37%)
  • rgb(69, 122, 122)
  • #457A7A

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.57949 94.89
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(180, 21%, 31%)
  • rgb(63, 97, 97)
  • #3F6161

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.39131 126.45
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(180, 13%, 33%)
  • rgb(74, 97, 97)
  • #4A6161

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.23057 126.1
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(180, 7%, 35%)
  • rgb(83, 97, 97)
  • #536161

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.08367 126.0
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(180, 2%, 37%)
  • rgb(93, 97, 97)
  • #5D6161

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.90626 125.99
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(180, 46%, 32%)
  • rgb(44, 122, 122)
  • #2C7A7A

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.7397 98.22
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(180, 59%, 30%)
  • rgb(31, 122, 122)
  • #1F7A7A

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.79583 101.95
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(180, 73%, 27%)
  • rgb(19, 122, 122)
  • #137A7A

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.83166 106.77
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(180, 89%, 25%)
  • rgb(7, 122, 122)
  • #077A7A

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.85378 112.83
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(144, 37%, 34%)
  • rgb(55, 122, 82)
  • #377A52

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.86068 125.77
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(141, 27%, 37%)
  • rgb(69, 122, 88)
  • #457A58

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.73308 119.99
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(144, 20%, 39%)
  • rgb(80, 122, 97)
  • #507A61

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.60119 112.48
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(138, 13%, 33%)
  • rgb(74, 97, 81)
  • #4A6151

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.33801 136.9
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(145, 7%, 35%)
  • rgb(83, 97, 89)
  • #536159

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.13722 131.24
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(120, 2%, 37%)
  • rgb(93, 97, 93)
  • #5D615D

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.93205 128.56
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(143, 46%, 32%)
  • rgb(44, 122, 74)
  • #2C7A4A

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.95608 133.64
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(143, 59%, 30%)
  • rgb(31, 122, 67)
  • #1F7A43

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.0403 141.53
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(143, 73%, 27%)
  • rgb(19, 122, 60)
  • #137A3C

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.10059 149.87
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(143, 89%, 25%)
  • rgb(7, 122, 52)
  • #077A34

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.14614 159.57
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(215, 37%, 41%)
  • rgb(67, 99, 147)
  • #436393

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.74031 102.6
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(217, 27%, 45%)
  • rgb(83, 107, 147)
  • #536B93

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.08035 94.89
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(215, 20%, 39%)
  • rgb(80, 97, 122)
  • #50617A

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.93449 112.48
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(219, 13%, 42%)
  • rgb(93, 103, 122)
  • #5D677A

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.36373 107.79
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(215, 7%, 44%)
  • rgb(105, 112, 122)
  • #69707A

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.70876 101.1
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(240, 2%, 37%)
  • rgb(93, 93, 97)
  • #5D5D61

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.17199 128.56
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(216, 47%, 45%)
  • rgb(62, 105, 172)
  • #3E69AC

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.17478 93.55
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(216, 58%, 48%)
  • rgb(51, 109, 197)
  • #336DC5

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.78266 90.67
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(252, 47%, 56%)
  • rgb(113, 91, 197)
  • #715BC5

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.93748 105.68
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(288, 37%, 49%)
  • rgb(154, 79, 172)
  • #9A4FAC

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.83688 112.1
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(288, 27%, 45%)
  • rgb(135, 83, 147)
  • #875393

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.36048 115.01
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(288, 20%, 47%)
  • rgb(137, 97, 147)
  • #896193

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.71379 100.91
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(289, 13%, 42%)
  • rgb(117, 93, 122)
  • #755D7A

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.4879 115.21
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(282, 7%, 44%)
  • rgb(117, 105, 122)
  • #75697A

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.87273 105.76
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(285, 2%, 37%)
  • rgb(96, 93, 97)
  • #605D61

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.11108 128.56
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(288, 47%, 45%)
  • rgb(151, 62, 172)
  • #973EAC

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.49175 131.23
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(288, 58%, 48%)
  • rgb(169, 51, 197)
  • #A933C5

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.98483 138.17
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(325, 37%, 49%)
  • rgb(172, 79, 133)
  • #AC4F85

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.69549 111.16
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(326, 27%, 45%)
  • rgb(147, 83, 119)
  • #935377

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.28103 121.2
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(326, 20%, 47%)
  • rgb(147, 97, 125)
  • #93617D

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.65634 106.2
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(328, 13%, 42%)
  • rgb(122, 93, 108)
  • #7A5D6C

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.47779 121.64
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(328, 7%, 44%)
  • rgb(122, 105, 114)
  • #7A6972

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.83332 109.72
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(345, 2%, 37%)
  • rgb(97, 93, 94)
  • #615D5E

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.11121 130.4
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(325, 47%, 45%)
  • rgb(172, 62, 126)
  • #AC3E7E

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.2808 131.75
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(324, 58%, 48%)
  • rgb(197, 51, 137)
  • #C53389

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.69816 128.81
Pas satisfait ?