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 international 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(120, 100%, 20%)
  • rgb(0, 102, 0)
  • #006600
  • 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.

2.54264

New contrast : 44 results (438 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(120, 100%, 30%)
  • rgb(0, 154, 0)
  • #009A00
  • 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.9285 52.0
  • hsl(120, 83%, 32%)
  • rgb(14, 154, 14)
  • #0E9A0E
  • 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.95043 52.67
  • hsl(120, 67%, 36%)
  • rgb(30, 154, 30)
  • #1E9A1E
  • 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.99332 57.95
  • hsl(120, 55%, 38%)
  • rgb(44, 154, 44)
  • #2C9A2C
  • 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.05426 67.75
  • hsl(120, 43%, 41%)
  • rgb(60, 154, 60)
  • #3C9A3C
  • 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.15412 83.04
  • hsl(120, 35%, 44%)
  • rgb(74, 154, 74)
  • #4A9A4A
  • 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.27042 98.34
  • hsl(120, 26%, 47%)
  • rgb(90, 154, 90)
  • #5A9A5A
  • 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.43901 116.93
  • hsl(120, 19%, 50%)
  • rgb(106, 154, 106)
  • #6A9A6A
  • 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.64815 136.13
  • hsl(120, 14%, 53%)
  • rgb(120, 154, 120)
  • #789A78
  • 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.86632 153.21
  • hsl(120, 8%, 56%)
  • rgb(136, 154, 136)
  • #889A88
  • 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.15782 172.93
  • hsl(120, 1%, 49%)
  • rgb(125, 128, 125)
  • #7D807D
  • 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.60727 157.73
  • hsl(84, 100%, 30%)
  • rgb(91, 154, 0)
  • #5B9A00
  • 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.31844 96.34
  • hsl(84, 83%, 32%)
  • rgb(97, 154, 14)
  • #619A0E
  • 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.37962 101.83
  • hsl(84, 67%, 36%)
  • rgb(103, 154, 30)
  • #679A1E
  • 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.45048 108.02
  • hsl(84, 55%, 38%)
  • rgb(109, 154, 44)
  • #6D9A2C
  • 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.53039 115.0
  • hsl(84, 43%, 41%)
  • rgb(115, 154, 60)
  • #739A3C
  • 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.62471 123.37
  • hsl(84, 35%, 44%)
  • rgb(121, 154, 74)
  • #799A4A
  • 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.72785 132.33
  • hsl(85, 26%, 47%)
  • rgb(127, 154, 90)
  • #7F9A5A
  • 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.84897 142.9
  • hsl(86, 19%, 50%)
  • rgb(133, 154, 106)
  • #859A6A
  • 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.98519 154.45
  • hsl(86, 14%, 53%)
  • rgb(139, 154, 120)
  • #8B9A78
  • 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.12858 165.76
  • hsl(88, 6%, 47%)
  • rgb(121, 128, 113)
  • #798071
  • 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.50498 147.85
  • hsl(100, 1%, 49%)
  • rgb(126, 128, 125)
  • #7E807D
  • 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.62053 158.36
  • hsl(155, 100%, 30%)
  • rgb(0, 154, 91)
  • #009A5B
  • 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.06092 96.34
  • hsl(155, 83%, 32%)
  • rgb(14, 154, 97)
  • #0E9A61
  • 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.09618 101.83
  • hsl(155, 67%, 36%)
  • rgb(30, 154, 103)
  • #1E9A67
  • 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.14858 108.02
  • hsl(155, 55%, 38%)
  • rgb(44, 154, 109)
  • #2C9A6D
  • 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.21595 115.0
  • hsl(155, 43%, 41%)
  • rgb(60, 154, 115)
  • #3C9A73
  • 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.31394 123.37
  • hsl(155, 35%, 44%)
  • rgb(74, 154, 121)
  • #4A9A79
  • 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.42577 132.33
  • hsl(154, 26%, 47%)
  • rgb(90, 154, 127)
  • #5A9A7F
  • 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.57823 142.9
  • hsl(153, 19%, 50%)
  • rgb(106, 154, 133)
  • #6A9A85
  • 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.76261 154.45
  • hsl(153, 14%, 53%)
  • rgb(120, 154, 139)
  • #789A8B
  • 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.95538 165.76
  • hsl(150, 8%, 56%)
  • rgb(136, 154, 145)
  • #889A91
  • 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.20459 178.68
  • hsl(139, 1%, 49%)
  • rgb(125, 128, 126)
  • #7D807E
  • 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.61177 158.36
  • hsl(191, 100%, 35%)
  • rgb(0, 145, 180)
  • #0091B4
  • 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.00474 180.81
  • hsl(192, 83%, 38%)
  • rgb(16, 147, 180)
  • #1093B4
  • 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.13217 180.97
  • hsl(191, 67%, 42%)
  • rgb(35, 152, 180)
  • #2398B4
  • 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.45409 181.71
  • hsl(192, 55%, 45%)
  • rgb(51, 154, 180)
  • #339AB4
  • 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.62963 182.77
  • hsl(191, 43%, 41%)
  • rgb(60, 136, 154)
  • #3C889A
  • 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.54119 157.51
  • hsl(191, 35%, 44%)
  • rgb(74, 138, 154)
  • #4A8A9A
  • 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.7277 160.11
  • hsl(193, 26%, 47%)
  • rgb(90, 140, 154)
  • #5A8C9A
  • 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.9551 164.31
  • hsl(192, 19%, 50%)
  • rgb(106, 144, 154)
  • #6A909A
  • 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.31992 170.05
  • hsl(190, 14%, 53%)
  • rgb(120, 148, 154)
  • #78949A
  • 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.699 176.28
  • hsl(193, 8%, 56%)
  • rgb(136, 150, 154)
  • #88969A
  • 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.02756 184.48
  • hsl(180, 1%, 49%)
  • rgb(125, 128, 128)
  • #7D8080
  • 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.62092 159.63
Not satisfied ?