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)
  • #FFFFFF
  • hsl(23, 100%, 50%)
  • rgb(255, 102, 0)
  • #FF6600

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

Nouveau contraste : 41 résultats (1 075 840 couleurs testées)

Contrastes valides
Avant plan Arrière plan Exemple Ratio Distance
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(20, 96%, 41%)
  • rgb(209, 73, 4)
  • #D14904

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 49.55
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(19, 95%, 41%)
  • rgb(209, 73, 5)
  • #D14905

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.50038 49.54
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(19, 90%, 42%)
  • rgb(208, 74, 10)
  • #D04A0A

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 49.97
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(19, 89%, 42%)
  • rgb(208, 74, 11)
  • #D04A0B

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.50033 49.93
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(19, 83%, 43%)
  • rgb(204, 78, 18)
  • #CC4E12

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 52.0
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(19, 82%, 43%)
  • rgb(204, 78, 19)
  • #CC4E13

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 51.88
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(19, 84%, 43%)
  • rgb(203, 79, 17)
  • #CB4F11

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.50085 52.88
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(19, 83%, 43%)
  • rgb(203, 79, 18)
  • #CB4F12

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.50023 52.77
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(20, 86%, 42%)
  • rgb(202, 80, 15)
  • #CA500F

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 53.85
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(20, 85%, 42%)
  • rgb(202, 80, 16)
  • #CA5010

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 53.77
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(21, 88%, 41%)
  • rgb(201, 81, 12)
  • #C9510C

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.50085 54.85
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(21, 87%, 41%)
  • rgb(201, 81, 13)
  • #C9510D

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 54.8
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(23, 93%, 40%)
  • rgb(200, 82, 7)
  • #C85207

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.50078 55.83
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(23, 92%, 40%)
  • rgb(200, 82, 8)
  • #C85208

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 55.81
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(25, 100%, 39%)
  • rgb(199, 83, 0)
  • #C75300

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.50091 56.72
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(24, 98%, 39%)
  • rgb(199, 83, 1)
  • #C75301

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.50049 56.72
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(24, 98%, 39%)
  • rgb(199, 83, 2)
  • #C75302

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 56.72
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(19, 72%, 44%)
  • rgb(196, 85, 31)
  • #C4551F

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 56.51
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(21, 76%, 43%)
  • rgb(195, 86, 26)
  • #C3561A

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 58.72
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(23, 83%, 41%)
  • rgb(194, 87, 18)
  • #C25712

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 60.78
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(23, 82%, 41%)
  • rgb(194, 87, 19)
  • #C25713

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 60.69
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(26, 93%, 39%)
  • rgb(193, 88, 6)
  • #C15806

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.50063 62.22
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(26, 93%, 39%)
  • rgb(193, 88, 7)
  • #C15807

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 62.21
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(19, 66%, 45%)
  • rgb(192, 88, 39)
  • #C05827

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.50018 57.84
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(21, 70%, 43%)
  • rgb(191, 89, 33)
  • #BF5921

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.50046 61.13
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(23, 76%, 42%)
  • rgb(190, 90, 25)
  • #BE5A19

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 63.88
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(26, 87%, 39%)
  • rgb(189, 91, 13)
  • #BD5B0D

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.50063 65.93
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(26, 86%, 39%)
  • rgb(189, 91, 14)
  • #BD5B0E

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 65.89
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(22, 70%, 43%)
  • rgb(187, 92, 33)
  • #BB5C21

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 65.38
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(25, 77%, 40%)
  • rgb(186, 93, 23)
  • #BA5D17

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 68.19
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(20, 60%, 45%)
  • rgb(185, 93, 45)
  • #B95D2D

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.50017 63.21
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(23, 66%, 43%)
  • rgb(184, 94, 37)
  • #B85E25

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 67.52
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(26, 74%, 41%)
  • rgb(183, 95, 27)
  • #B75F1B

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.50048 70.73
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(24, 65%, 42%)
  • rgb(181, 96, 38)
  • #B56026

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.50075 70.51
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(27, 73%, 40%)
  • rgb(180, 97, 27)
  • #B4611B

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 73.82
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(23, 59%, 44%)
  • rgb(179, 97, 46)
  • #B3612E

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 69.92
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(19, 50%, 46%)
  • rgb(178, 97, 59)
  • #B2613B

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.50062 63.1
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(22, 54%, 44%)
  • rgb(177, 98, 52)
  • #B16234

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.50056 69.38
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(25, 60%, 42%)
  • rgb(176, 99, 43)
  • #B0632B

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 74.5
  • 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 78.26
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(21, 50%, 45%)
  • rgb(175, 99, 57)
  • #AF6339

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 68.88
Pas satisfait ?