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(76, 73%, 43%)
  • rgb(149, 193, 30)
  • #95C11E
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

1.77268

New contrast : 41 results (420 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(76, 73%, 20%)
  • rgb(71, 93, 14)
  • #475D0E
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

6.19479 113.93
  • hsl(76, 58%, 22%)
  • rgb(74, 93, 24)
  • #4A5D18
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

6.12982 112.45
  • hsl(77, 48%, 24%)
  • rgb(75, 93, 32)
  • #4B5D20
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

6.09654 112.01
  • hsl(77, 37%, 26%)
  • rgb(78, 93, 42)
  • #4E5D2A
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

6.01865 110.69
  • hsl(76, 30%, 28%)
  • rgb(81, 93, 50)
  • #515D32
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

5.94031 109.32
  • hsl(79, 21%, 30%)
  • rgb(82, 93, 60)
  • #525D3C
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

5.88449 108.4
  • hsl(79, 15%, 31%)
  • rgb(85, 93, 68)
  • #555D44
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

5.79587 106.48
  • hsl(76, 8%, 33%)
  • rgb(89, 93, 78)
  • #595D4E
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

5.67427 103.4
  • hsl(85, 3%, 35%)
  • rgb(90, 93, 86)
  • #5A5D56
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

5.61214 100.98
  • hsl(77, 89%, 19%)
  • rgb(68, 93, 5)
  • #445D05
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

6.25265 115.66
  • hsl(40, 73%, 26%)
  • rgb(118, 85, 18)
  • #765512
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

5.71497 108.89
  • hsl(39, 59%, 29%)
  • rgb(118, 88, 30)
  • #76581E
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

5.52386 105.89
  • hsl(38, 48%, 31%)
  • rgb(118, 91, 41)
  • #765B29
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

5.33327 102.9
  • hsl(37, 38%, 33%)
  • rgb(118, 94, 53)
  • #765E35
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

5.14 99.6
  • hsl(38, 29%, 35%)
  • rgb(118, 99, 64)
  • #766340
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.84784 93.64
  • hsl(39, 21%, 38%)
  • rgb(118, 104, 76)
  • #76684C
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.56398 86.06
  • hsl(40, 15%, 31%)
  • rgb(93, 85, 68)
  • #5D5544
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

6.17673 111.35
  • hsl(36, 8%, 33%)
  • rgb(93, 87, 78)
  • #5D574E
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

5.98669 107.89
  • hsl(25, 3%, 35%)
  • rgb(93, 89, 86)
  • #5D5956
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

5.80872 104.0
  • hsl(39, 88%, 24%)
  • rgb(118, 81, 7)
  • #765107
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

5.96309 113.1
  • hsl(4, 73%, 43%)
  • rgb(193, 41, 30)
  • #C1291E
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.88237 150.76
  • hsl(112, 73%, 26%)
  • rgb(30, 118, 18)
  • #1E7612
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.81305 128.24
  • hsl(112, 59%, 29%)
  • rgb(41, 118, 30)
  • #29761E
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.74927 118.92
  • hsl(111, 48%, 31%)
  • rgb(52, 118, 41)
  • #347629
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.66737 110.06
  • hsl(111, 38%, 33%)
  • rgb(62, 118, 53)
  • #3E7635
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.5725 102.22
  • hsl(111, 30%, 28%)
  • rgb(56, 93, 50)
  • #385D32
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

6.32861 121.56
  • hsl(114, 21%, 30%)
  • rgb(63, 93, 60)
  • #3F5D3C
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

6.18969 117.18
  • hsl(112, 15%, 31%)
  • rgb(71, 93, 68)
  • #475D44
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

6.031 112.39
  • hsl(112, 8%, 33%)
  • rgb(80, 93, 78)
  • #505D4E
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

5.83165 106.79
  • hsl(102, 3%, 35%)
  • rgb(88, 93, 86)
  • #585D56
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

5.64779 101.68
  • hsl(112, 88%, 24%)
  • rgb(21, 118, 7)
  • #157607
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.85152 136.28
  • hsl(148, 73%, 26%)
  • rgb(18, 118, 65)
  • #127641
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.76339 137.98
  • hsl(147, 59%, 29%)
  • rgb(30, 118, 71)
  • #1E7647
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.70713 126.79
  • hsl(147, 48%, 31%)
  • rgb(41, 118, 76)
  • #29764C
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.64199 116.58
  • hsl(147, 38%, 33%)
  • rgb(53, 118, 83)
  • #357653
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.5488 105.0
  • hsl(149, 30%, 28%)
  • rgb(50, 93, 71)
  • #325D47
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

6.3005 123.89
  • hsl(145, 21%, 30%)
  • rgb(60, 93, 74)
  • #3C5D4A
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

6.15846 117.44
  • hsl(146, 15%, 31%)
  • rgb(68, 93, 79)
  • #445D4F
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

6.01594 112.24
  • hsl(148, 8%, 33%)
  • rgb(78, 93, 85)
  • #4E5D55
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

5.82391 106.02
  • hsl(145, 3%, 35%)
  • rgb(86, 93, 89)
  • #565D59
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

5.66485 101.47
  • hsl(147, 88%, 24%)
  • rgb(7, 118, 58)
  • #07763A
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.80491 148.33
Not satisfied ?