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(160, 63%, 32%)
  • rgb(30, 135, 101)
  • #1E8765
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.45982

New contrast : 28 results (1,332,240 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(163, 64%, 31%)
  • rgb(29, 134, 105)
  • #1D8669
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50039 3.96
  • hsl(165, 67%, 31%)
  • rgb(26, 134, 107)
  • #1A866B
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50038 5.33
  • hsl(163, 86%, 28%)
  • rgb(10, 135, 101)
  • #0A8765
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50025 20.0
  • hsl(155, 86%, 28%)
  • rgb(10, 136, 85)
  • #0A8855
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50089 22.95
  • hsl(156, 88%, 28%)
  • rgb(8, 136, 86)
  • #088856
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50029 24.11
  • hsl(157, 92%, 27%)
  • rgb(5, 136, 87)
  • #058857
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50089 26.38
  • hsl(158, 95%, 27%)
  • rgb(3, 136, 88)
  • #038858
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50021 27.97
  • hsl(160, 60%, 32%)
  • rgb(33, 134, 102)
  • #218666
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.5001 3.0
  • hsl(160, 59%, 32%)
  • rgb(34, 134, 101)
  • #228665
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50067 3.98
  • hsl(165, 54%, 33%)
  • rgb(39, 133, 110)
  • #27856E
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50022 11.32
  • hsl(164, 53%, 33%)
  • rgb(40, 133, 109)
  • #28856D
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50058 11.46
  • hsl(163, 52%, 34%)
  • rgb(41, 133, 108)
  • #29856C
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.5008 11.85
  • hsl(162, 52%, 34%)
  • rgb(42, 133, 107)
  • #2A856B
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50087 12.46
  • hsl(162, 51%, 34%)
  • rgb(43, 133, 106)
  • #2B856A
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50079 13.23
  • hsl(161, 50%, 34%)
  • rgb(44, 133, 105)
  • #2C8569
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50056 14.09
  • hsl(160, 49%, 34%)
  • rgb(45, 133, 104)
  • #2D8568
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50018 15.03
  • hsl(155, 46%, 35%)
  • rgb(49, 133, 99)
  • #318563
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50086 18.99
  • hsl(164, 45%, 35%)
  • rgb(50, 132, 111)
  • #32846F
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50096 20.78
  • hsl(163, 44%, 35%)
  • rgb(51, 132, 110)
  • #33846E
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50023 21.52
  • hsl(155, 39%, 37%)
  • rgb(57, 132, 102)
  • #398466
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50032 26.99
  • hsl(164, 37%, 37%)
  • rgb(59, 131, 112)
  • #3B8370
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50021 29.49
  • hsl(161, 36%, 37%)
  • rgb(61, 131, 109)
  • #3D836D
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50087 31.15
  • hsl(157, 35%, 38%)
  • rgb(63, 131, 106)
  • #3F836A
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50065 33.02
  • hsl(162, 31%, 38%)
  • rgb(67, 130, 112)
  • #438270
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50095 37.29
  • hsl(157, 30%, 39%)
  • rgb(70, 130, 107)
  • #46826B
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50086 40.02
  • hsl(163, 27%, 39%)
  • rgb(73, 129, 114)
  • #498172
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50028 43.35
  • hsl(165, 17%, 42%)
  • rgb(89, 126, 117)
  • #597E75
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50066 59.32
  • hsl(161, 16%, 42%)
  • rgb(90, 126, 115)
  • #5A7E73
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50003 60.19
Not satisfied ?
Gimme a range of colors