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, 32%, 40%)
  • rgb(70, 136, 71)
  • #468847
  • 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.

3.61029

New contrast : 22 results (1,786,080 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(123, 28%, 36%)
  • rgb(66, 118, 69)
  • #427645
  • 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.50074 18.07
  • hsl(117, 32%, 35%)
  • rgb(62, 119, 60)
  • #3E773C
  • 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.50092 18.9
  • hsl(122, 32%, 35%)
  • rgb(61, 119, 63)
  • #3D773F
  • 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.50078 18.33
  • hsl(125, 44%, 32%)
  • rgb(47, 121, 54)
  • #2F7936
  • 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.50059 27.35
  • hsl(116, 53%, 31%)
  • rgb(42, 122, 37)
  • #2A7A25
  • 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.50072 40.0
  • hsl(119, 50%, 31%)
  • rgb(41, 122, 40)
  • #297A28
  • 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.50099 38.47
  • hsl(122, 50%, 31%)
  • rgb(40, 122, 43)
  • #287A2B
  • 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.50078 37.25
  • hsl(125, 51%, 31%)
  • rgb(39, 122, 46)
  • #277A2E
  • 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.50008 36.38
  • hsl(116, 65%, 29%)
  • rgb(32, 123, 26)
  • #207B1A
  • 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.5001 52.92
  • hsl(118, 61%, 29%)
  • rgb(31, 123, 29)
  • #1F7B1D
  • 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.50048 51.38
  • hsl(121, 60%, 30%)
  • rgb(30, 123, 32)
  • #1E7B20
  • 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.50041 50.07
  • hsl(125, 62%, 29%)
  • rgb(28, 123, 37)
  • #1C7B25
  • 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.50038 48.71
  • hsl(118, 81%, 26%)
  • rgb(15, 124, 13)
  • #0F7C0D
  • 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.50048 71.35
  • hsl(121, 79%, 27%)
  • rgb(14, 124, 16)
  • #0E7C10
  • 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 70.05
  • hsl(123, 81%, 26%)
  • rgb(13, 124, 19)
  • #0D7C13
  • 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 68.93
  • hsl(122, 81%, 26%)
  • rgb(13, 124, 18)
  • #0D7C12
  • 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.5008 69.51
  • hsl(124, 82%, 26%)
  • rgb(12, 124, 21)
  • #0C7C15
  • 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.50009 68.53
  • hsl(124, 82%, 26%)
  • rgb(12, 124, 20)
  • #0C7C14
  • 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.50093 69.07
  • hsl(125, 83%, 26%)
  • rgb(11, 124, 22)
  • #0B7C16
  • 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.50083 68.74
  • hsl(120, 17%, 38%)
  • rgb(80, 115, 80)
  • #507350
  • 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.50043 19.6
  • hsl(125, 15%, 38%)
  • rgb(83, 114, 86)
  • #537256
  • 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 17.19
  • hsl(118, 15%, 38%)
  • rgb(84, 114, 83)
  • #547253
  • 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.50093 18.35
Not satisfied ?
Gimme a range of colors