Fork me on GitHub

Find me the good constrasts, for web accessibility, between these two colors:

Foreground Color : invalid color For each color (red, green and blue), enter a number between 0 et 255. The color should be between #000000 and #FFFFFF
Background Color : invalid color For each color (red, green and blue), enter a number between 0 et 255. The color should be between #000000 and #FFFFFF

In the internationale reglementation etablished by the WCAG, the success criteria 1.4.3 requires a minimum contrast ratio of 4.5:1 (and 3:1 for enlarged text).

This minimum contrast ratio is also required by the French regulation, established by the RGAA 3.0 2016, in the criteria 3.3 et 3.4.

Component to edit :
Gimme :

Old contrast

Invalid contrast
Foreground Background Sample Ratio Distance
  • hsl(240, 53%, 43%)
  • rgb(51, 51, 170)
  • #3333AA
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

1.92393

New contrast : 45 results (592 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(240, 89%, 72%)
  • rgb(124, 124, 248)
  • #7C7CF8
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.3434 107.8
  • hsl(240, 57%, 69%)
  • rgb(132, 132, 222)
  • #8484DE
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.55453 106.37
  • hsl(240, 33%, 65%)
  • rgb(137, 137, 196)
  • #8989C4
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.64451 108.85
  • hsl(240, 16%, 60%)
  • rgb(136, 136, 170)
  • #8888AA
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.39023 107.09
  • hsl(204, 53%, 50%)
  • rgb(59, 140, 196)
  • #3B8CC4
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.02673 89.75
  • hsl(204, 50%, 53%)
  • rgb(78, 148, 196)
  • #4E94C4
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.5726 98.3
  • hsl(204, 33%, 50%)
  • rgb(85, 136, 170)
  • #5588AA
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.81115 86.78
  • hsl(204, 66%, 46%)
  • rgb(39, 132, 196)
  • #2784C4
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.54423 81.8
  • hsl(204, 81%, 48%)
  • rgb(23, 140, 222)
  • #178CDE
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.12154 93.74
  • hsl(204, 99%, 43%)
  • rgb(0, 131, 222)
  • #0083DE
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.64716 80.41
  • hsl(328, 82%, 65%)
  • rgb(240, 94, 170)
  • #F05EAA
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

6.03684 189.74
  • hsl(168, 53%, 43%)
  • rgb(51, 170, 147)
  • #33AA93
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

6.40973 118.71
  • hsl(132, 53%, 43%)
  • rgb(51, 170, 76)
  • #33AA4C
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

6.13188 94.9
  • hsl(96, 53%, 43%)
  • rgb(97, 170, 51)
  • #61AA33
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

6.40447 46.0
  • hsl(61, 54%, 36%)
  • rgb(143, 145, 43)
  • #8F912B
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.4814 76.01
  • hsl(61, 42%, 39%)
  • rgb(143, 145, 58)
  • #8F913A
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.50438 58.9
  • hsl(61, 33%, 42%)
  • rgb(143, 145, 72)
  • #8F9148
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.53285 87.42
  • hsl(62, 24%, 45%)
  • rgb(143, 145, 87)
  • #8F9157
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.57146 101.23
  • hsl(61, 17%, 48%)
  • rgb(144, 145, 101)
  • #909165
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.63127 109.32
  • hsl(62, 11%, 51%)
  • rgb(144, 145, 116)
  • #909174
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.68761 113.9
  • hsl(60, 6%, 53%)
  • rgb(145, 145, 130)
  • #919182
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.76496 116.89
  • hsl(0, 0%, 56%)
  • rgb(145, 145, 145)
  • #919191
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.84081 118.06
  • hsl(61, 66%, 34%)
  • rgb(143, 145, 29)
  • #8F911D
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.46637 106.09
  • hsl(60, 82%, 31%)
  • rgb(143, 145, 14)
  • #8F910E
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.45638 129.81
  • hsl(60, 100%, 28%)
  • rgb(143, 145, 0)
  • #8F9100
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.45082 148.94
  • hsl(275, 92%, 63%)
  • rgb(176, 75, 248)
  • #B04BF8
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.5653 134.65
  • hsl(275, 91%, 67%)
  • rgb(186, 98, 248)
  • #BA62F8
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.42651 144.84
  • hsl(275, 62%, 65%)
  • rgb(176, 111, 222)
  • #B06FDE
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.41268 132.19
  • hsl(275, 40%, 61%)
  • rgb(164, 117, 196)
  • #A475C4
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.18962 120.46
  • hsl(276, 23%, 56%)
  • rgb(150, 119, 170)
  • #9677AA
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.83536 108.71
  • hsl(312, 70%, 56%)
  • rgb(222, 67, 191)
  • #DE43BF
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.96256 171.15
  • hsl(311, 67%, 60%)
  • rgb(222, 88, 196)
  • #DE58C4
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.52167 171.77
  • hsl(312, 45%, 57%)
  • rgb(196, 98, 176)
  • #C462B0
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.0152 146.63
  • hsl(312, 40%, 61%)
  • rgb(196, 117, 179)
  • #C475B3
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.73529 149.43
  • hsl(311, 23%, 56%)
  • rgb(170, 119, 160)
  • #AA77A0
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.13302 125.96
  • hsl(311, 72%, 52%)
  • rgb(222, 44, 188)
  • #DE2CBC
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.55166 171.06
  • hsl(311, 94%, 53%)
  • rgb(248, 26, 204)
  • #F81ACC
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.26927 197.2
  • hsl(311, 100%, 48%)
  • rgb(248, 0, 201)
  • #F800C9
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.11474 196.11
  • hsl(348, 92%, 63%)
  • rgb(248, 75, 109)
  • #F84B6D
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.45123 195.15
  • hsl(347, 67%, 60%)
  • rgb(222, 88, 115)
  • #DE5873
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.03994 169.67
  • hsl(347, 45%, 57%)
  • rgb(196, 98, 118)
  • #C46276
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.69496 144.41
  • hsl(347, 40%, 61%)
  • rgb(196, 117, 133)
  • #C47585
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.46158 148.66
  • hsl(347, 23%, 56%)
  • rgb(170, 119, 130)
  • #AA7782
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.97061 124.62
  • hsl(347, 93%, 58%)
  • rgb(248, 49, 90)
  • #F8315A
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.88994 192.5
  • hsl(347, 94%, 53%)
  • rgb(248, 26, 71)
  • #F81A47
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.58469 188.14
Not satisfied ?