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, 83%, 38%)
  • rgb(16, 182, 128)
  • #10B680
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFF

Title big size with words in bold

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

2.61685

New contrast : 39 results (329 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(160, 83%, 28%)
  • rgb(12, 132, 92)
  • #0C845C
  • 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.69727 55.58
  • hsl(160, 69%, 30%)
  • rgb(24, 132, 96)
  • #188460
  • 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.65813 53.98
  • hsl(160, 55%, 33%)
  • rgb(38, 132, 101)
  • #268465
  • 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.59435 51.18
  • hsl(160, 45%, 35%)
  • rgb(50, 132, 106)
  • #32846A
  • 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.52172 45.84
  • hsl(160, 34%, 31%)
  • rgb(52, 107, 89)
  • #346B59
  • 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.

6.18858 75.74
  • hsl(160, 27%, 32%)
  • rgb(61, 107, 92)
  • #3D6B5C
  • 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.

6.07632 72.27
  • hsl(158, 18%, 35%)
  • rgb(73, 107, 95)
  • #496B5F
  • 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.

5.9128 64.84
  • hsl(158, 13%, 37%)
  • rgb(82, 107, 98)
  • #526B62
  • 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.

5.77206 54.44
  • hsl(156, 6%, 39%)
  • rgb(94, 107, 102)
  • #5E6B66
  • 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.

5.569 32.74
  • hsl(165, 1%, 41%)
  • rgb(103, 107, 106)
  • #676B6A
  • 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.

5.40136 60.91
  • hsl(123, 83%, 28%)
  • rgb(12, 132, 20)
  • #0C8414
  • 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.8541 111.46
  • hsl(124, 69%, 30%)
  • rgb(24, 132, 33)
  • #188421
  • 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.81507 99.39
  • hsl(123, 55%, 33%)
  • rgb(38, 132, 44)
  • #26842C
  • 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.7519 89.09
  • hsl(125, 45%, 35%)
  • rgb(50, 132, 57)
  • #328439
  • 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.67164 76.27
  • hsl(125, 34%, 38%)
  • rgb(64, 132, 70)
  • #408446
  • 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.55834 59.39
  • hsl(125, 27%, 32%)
  • rgb(61, 107, 65)
  • #3D6B41
  • 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.

6.21701 83.43
  • hsl(125, 18%, 35%)
  • rgb(73, 107, 76)
  • #496B4C
  • 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.

6.01593 72.26
  • hsl(129, 13%, 37%)
  • rgb(82, 107, 86)
  • #526B56
  • 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.

5.83946 59.29
  • hsl(120, 6%, 39%)
  • rgb(94, 107, 94)
  • #5E6B5E
  • 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.

5.614 23.74
  • hsl(135, 1%, 41%)
  • rgb(103, 107, 104)
  • #676B68
  • 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.

5.41281 60.62
  • hsl(196, 83%, 33%)
  • rgb(14, 117, 157)
  • #0E759D
  • 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.

5.18512 63.02
  • hsl(196, 68%, 36%)
  • rgb(29, 121, 157)
  • #1D799D
  • 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.91337 58.52
  • hsl(196, 55%, 39%)
  • rgb(45, 126, 157)
  • #2D7E9D
  • 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.58237 50.24
  • hsl(196, 45%, 35%)
  • rgb(50, 109, 132)
  • #326D84
  • 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.

5.74356 70.45
  • hsl(197, 34%, 38%)
  • rgb(64, 112, 132)
  • #407084
  • 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.

5.42796 61.48
  • hsl(197, 26%, 40%)
  • rgb(76, 116, 132)
  • #4C7484
  • 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.

5.07412 41.49
  • hsl(197, 18%, 43%)
  • rgb(90, 120, 132)
  • #5A7884
  • 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.71432 55.06
  • hsl(199, 13%, 37%)
  • rgb(82, 99, 107)
  • #52636B
  • 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.

6.2578 66.46
  • hsl(203, 6%, 39%)
  • rgb(94, 102, 107)
  • #5E666B
  • 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.

5.85155 36.01
  • hsl(195, 1%, 41%)
  • rgb(103, 106, 107)
  • #676A6B
  • 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.

5.45365 59.46
  • hsl(233, 81%, 54%)
  • rgb(44, 66, 234)
  • #2C42EA
  • 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.

6.83042 70.33
  • hsl(232, 61%, 52%)
  • rgb(59, 78, 208)
  • #3B4ED0
  • 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.

6.59024 81.1
  • hsl(232, 44%, 49%)
  • rgb(70, 84, 182)
  • #4654B6
  • 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.

6.55425 85.56
  • hsl(268, 84%, 49%)
  • rgb(122, 20, 234)
  • #7A14EA
  • 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.

6.7401 123.19
  • hsl(268, 81%, 54%)
  • rgb(135, 44, 234)
  • #872CEA
  • 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.

5.86829 62.84
  • hsl(268, 61%, 52%)
  • rgb(130, 59, 208)
  • #823BD0
  • 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.

6.02485 51.0
  • hsl(268, 44%, 49%)
  • rgb(124, 70, 182)
  • #7C46B6
  • 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.

6.16096 23.05
  • hsl(305, 83%, 38%)
  • rgb(182, 16, 168)
  • #B610A8
  • 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.

5.78741 40.0
  • hsl(341, 83%, 38%)
  • rgb(182, 16, 68)
  • #B61044
  • 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.

6.67386 60.0
Not satisfied ?