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 : 17 results (5,232,087 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(72, 36%, 32%)
  • rgb(100, 112, 52)
  • #647034
  • 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.50055 86.11
  • hsl(76, 21%, 35%)
  • rgb(100, 111, 72)
  • #646F48
  • 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.50044 84.1
  • hsl(74, 31%, 33%)
  • rgb(99, 112, 58)
  • #63703A
  • 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.50035 85.93
  • hsl(72, 49%, 29%)
  • rgb(98, 113, 38)
  • #627126
  • 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.50026 86.36
  • hsl(77, 28%, 34%)
  • rgb(98, 112, 63)
  • #62703F
  • 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.50095 85.64
  • hsl(80, 24%, 35%)
  • rgb(97, 112, 68)
  • #617044
  • 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.50021 85.14
  • hsl(76, 36%, 32%)
  • rgb(96, 113, 52)
  • #607134
  • 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.5007 86.63
  • hsl(73, 61%, 27%)
  • rgb(95, 114, 27)
  • #5F721B
  • 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.50031 86.65
  • hsl(75, 50%, 29%)
  • rgb(94, 114, 37)
  • #5E7225
  • 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.50003 87.03
  • hsl(72, 91%, 23%)
  • rgb(92, 115, 5)
  • #5C7305
  • 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.50006 87.74
  • hsl(72, 93%, 23%)
  • rgb(92, 115, 4)
  • #5C7304
  • 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.50057 87.82
  • hsl(75, 66%, 27%)
  • rgb(91, 115, 23)
  • #5B7317
  • 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.50012 87.5
  • hsl(78, 55%, 29%)
  • rgb(90, 115, 33)
  • #5A7321
  • 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.50071 87.93
  • hsl(81, 47%, 30%)
  • rgb(89, 115, 41)
  • #597329
  • 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.5006 88.33
  • hsl(76, 79%, 25%)
  • rgb(87, 116, 13)
  • #57740D
  • 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.50044 88.78
  • hsl(79, 63%, 27%)
  • rgb(86, 116, 26)
  • #56741A
  • 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.50097 89.07
  • hsl(80, 80%, 25%)
  • rgb(82, 117, 13)
  • #52750D
  • 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.50058 90.64
Not satisfied ?