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(206, 86%, 55%)
  • rgb(45, 155, 240)
  • #2D9BF0
  • 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.

2.97519

New contrast : 42 results (347 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(205, 68%, 44%)
  • rgb(35, 123, 190)
  • #237BBE
  • 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.51789 54.15
  • hsl(206, 54%, 41%)
  • rgb(48, 113, 165)
  • #3071A5
  • 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.20956 79.15
  • hsl(207, 44%, 44%)
  • rgb(63, 119, 165)
  • #3F77A5
  • 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.77989 77.35
  • hsl(207, 34%, 40%)
  • rgb(68, 107, 140)
  • #446B8C
  • 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.63372 103.18
  • hsl(207, 26%, 43%)
  • rgb(81, 113, 140)
  • #51718C
  • 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.13371 100.91
  • hsl(208, 18%, 46%)
  • rgb(96, 119, 140)
  • #60778C
  • 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.65139 97.05
  • hsl(207, 12%, 40%)
  • rgb(89, 103, 115)
  • #596773
  • 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.81326 126.17
  • hsl(210, 6%, 42%)
  • rgb(101, 108, 115)
  • #656C73
  • 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.32194 123.45
  • hsl(200, 1%, 44%)
  • rgb(112, 114, 115)
  • #707273
  • 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.83488 119.84
  • hsl(206, 83%, 40%)
  • rgb(17, 115, 190)
  • #1173BE
  • 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.97669 59.53
  • hsl(169, 70%, 26%)
  • rgb(20, 115, 98)
  • #147362
  • 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.7402 143.3
  • hsl(169, 54%, 29%)
  • rgb(34, 115, 101)
  • #227365
  • 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.66308 140.12
  • hsl(168, 45%, 30%)
  • rgb(43, 115, 101)
  • #2B7365
  • 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.61058 140.1
  • hsl(169, 34%, 33%)
  • rgb(56, 115, 105)
  • #387369
  • 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.49102 136.14
  • hsl(168, 27%, 35%)
  • rgb(66, 115, 106)
  • #42736A
  • 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.39559 135.01
  • hsl(168, 18%, 38%)
  • rgb(79, 115, 108)
  • #4F736C
  • 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.24831 132.47
  • hsl(168, 12%, 40%)
  • rgb(89, 115, 110)
  • #59736E
  • 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.11918 129.58
  • hsl(162, 6%, 42%)
  • rgb(101, 115, 111)
  • #65736F
  • 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.95847 126.72
  • hsl(180, 1%, 44%)
  • rgb(112, 115, 115)
  • #707373
  • 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.7849 119.73
  • hsl(169, 82%, 24%)
  • rgb(11, 115, 97)
  • #0B7361
  • 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.7706 144.66
  • hsl(242, 85%, 60%)
  • rgb(75, 69, 240)
  • #4B45F0
  • 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.16075 84.77
  • hsl(278, 86%, 55%)
  • rgb(169, 45, 240)
  • #A92DF0
  • 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.86042 83.19
  • hsl(314, 68%, 44%)
  • rgb(190, 35, 152)
  • #BE2398
  • 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.40785 86.14
  • hsl(314, 55%, 48%)
  • rgb(190, 55, 158)
  • #BE379E
  • 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.96497 114.4
  • hsl(314, 47%, 51%)
  • rgb(190, 73, 162)
  • #BE49A2
  • 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.5024 126.47
  • hsl(314, 34%, 48%)
  • rgb(165, 81, 145)
  • #A55191
  • 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.01708 77.5
  • hsl(315, 26%, 43%)
  • rgb(140, 81, 125)
  • #8C517D
  • 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.85252 102.24
  • hsl(315, 18%, 46%)
  • rgb(140, 96, 129)
  • #8C6081
  • 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.11542 89.45
  • hsl(315, 12%, 48%)
  • rgb(140, 109, 132)
  • #8C6D84
  • 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.53003 79.35
  • hsl(321, 6%, 42%)
  • rgb(115, 101, 110)
  • #73656E
  • 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.50373 126.23
  • hsl(320, 1%, 44%)
  • rgb(115, 112, 114)
  • #737072
  • 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.89554 120.21
  • hsl(314, 83%, 45%)
  • rgb(215, 19, 168)
  • #D713A8
  • 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.61742 126.5
  • hsl(350, 68%, 50%)
  • rgb(215, 40, 69)
  • #D72845
  • 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.90784 117.16
  • hsl(350, 55%, 48%)
  • rgb(190, 55, 77)
  • #BE374D
  • 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.46438 131.66
  • hsl(349, 47%, 51%)
  • rgb(190, 73, 93)
  • #BE495D
  • 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.88314 87.9
  • hsl(350, 34%, 48%)
  • rgb(165, 81, 94)
  • #A5515E
  • 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.33202 121.4
  • hsl(351, 27%, 51%)
  • rgb(165, 96, 106)
  • #A5606A
  • 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.68631 95.95
  • hsl(353, 18%, 46%)
  • rgb(140, 96, 101)
  • #8C6065
  • 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.28148 126.69
  • hsl(352, 12%, 48%)
  • rgb(140, 109, 113)
  • #8C6D71
  • 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.62454 108.81
  • hsl(355, 6%, 42%)
  • rgb(115, 101, 102)
  • #736566
  • 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.55217 134.67
  • hsl(0, 1%, 44%)
  • rgb(115, 112, 112)
  • #737070
  • 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.90585 122.4
  • hsl(350, 83%, 45%)
  • rgb(215, 19, 51)
  • #D71333
  • 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.21044 163.29
Not satisfied ?
Gimme valid colors and very close to initial color