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(211, 95%, 71%)
  • rgb(113, 179, 252)
  • #71B3FC
  • 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.19761

New contrast : 55 results (331 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(211, 51%, 57%)
  • rgb(91, 143, 202)
  • #5B8FCA
  • 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.

3.37259 56.7
  • hsl(211, 34%, 53%)
  • rgb(96, 135, 177)
  • #6087B1
  • 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.

3.75146 80.0
  • hsl(213, 28%, 57%)
  • rgb(114, 142, 177)
  • #728EB1
  • 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.

3.37645 77.89
  • hsl(213, 16%, 51%)
  • rgb(112, 130, 152)
  • #708298
  • 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.

3.93597 103.78
  • hsl(212, 10%, 54%)
  • rgb(128, 139, 152)
  • #808B98
  • 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.

3.4629 101.98
  • hsl(215, 4%, 57%)
  • rgb(142, 146, 152)
  • #8E9298
  • 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.

3.12728 100.38
  • hsl(211, 72%, 60%)
  • rgb(79, 149, 227)
  • #4F95E3
  • 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.

3.11543 43.43
  • hsl(211, 75%, 55%)
  • rgb(57, 138, 227)
  • #398AE3
  • 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.

3.54815 63.84
  • hsl(211, 97%, 56%)
  • rgb(38, 140, 252)
  • #268CFC
  • 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.

3.36576 78.36
  • hsl(175, 38%, 43%)
  • rgb(68, 152, 146)
  • #449892
  • 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.

3.41344 109.19
  • hsl(174, 29%, 45%)
  • rgb(82, 152, 146)
  • #529892
  • 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.

3.35189 107.45
  • hsl(173, 21%, 49%)
  • rgb(98, 152, 146)
  • #629892
  • 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.

3.26813 106.68
  • hsl(174, 16%, 51%)
  • rgb(112, 152, 148)
  • #709894
  • 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.

3.17803 104.6
  • hsl(175, 10%, 54%)
  • rgb(128, 152, 150)
  • #809896
  • 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.

3.0659 102.52
  • hsl(173, 3%, 48%)
  • rgb(118, 127, 126)
  • #767F7E
  • 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.11174 128.88
  • hsl(175, 49%, 40%)
  • rgb(52, 152, 144)
  • #349890
  • 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.

3.4768 114.63
  • hsl(174, 59%, 37%)
  • rgb(39, 152, 142)
  • #27988E
  • 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.

3.51867 120.64
  • hsl(174, 74%, 34%)
  • rgb(22, 152, 140)
  • #16988C
  • 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.

3.55685 129.63
  • hsl(174, 88%, 31%)
  • rgb(9, 152, 140)
  • #09988C
  • 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.

3.57046 136.61
  • hsl(139, 38%, 43%)
  • rgb(68, 152, 95)
  • #44985F
  • 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.

3.55792 158.48
  • hsl(138, 29%, 45%)
  • rgb(82, 152, 104)
  • #529868
  • 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.

3.4711 148.75
  • hsl(139, 21%, 49%)
  • rgb(98, 152, 116)
  • #629874
  • 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.

3.35312 136.41
  • hsl(141, 16%, 51%)
  • rgb(112, 152, 126)
  • #70987E
  • 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.

3.23998 126.41
  • hsl(137, 10%, 54%)
  • rgb(128, 152, 135)
  • #809887
  • 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.

3.10697 117.4
  • hsl(146, 3%, 48%)
  • rgb(118, 127, 122)
  • #767F7A
  • 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.1281 132.71
  • hsl(140, 49%, 40%)
  • rgb(52, 152, 86)
  • #349856
  • 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.

3.63845 168.93
  • hsl(138, 59%, 37%)
  • rgb(39, 152, 74)
  • #27984A
  • 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.

3.6995 182.36
  • hsl(139, 74%, 34%)
  • rgb(22, 152, 64)
  • #169840
  • 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.

3.75037 195.03
  • hsl(139, 88%, 31%)
  • rgb(9, 152, 55)
  • #099837
  • 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.

3.77829 206.38
  • hsl(247, 95%, 71%)
  • rgb(130, 113, 252)
  • #8271FC
  • 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.

3.67334 65.62
  • hsl(282, 69%, 64%)
  • rgb(191, 102, 227)
  • #BF66E3
  • 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.

3.37348 13.38
  • hsl(283, 46%, 61%)
  • rgb(176, 110, 202)
  • #B06ECA
  • 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.

3.54177 58.82
  • hsl(281, 28%, 57%)
  • rgb(158, 114, 177)
  • #9E72B1
  • 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.

3.82123 84.59
  • hsl(281, 22%, 60%)
  • rgb(163, 131, 177)
  • #A383B1
  • 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.

3.26153 74.14
  • hsl(282, 10%, 54%)
  • rgb(145, 128, 152)
  • #918098
  • 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.

3.65534 103.22
  • hsl(276, 4%, 57%)
  • rgb(148, 142, 152)
  • #948E98
  • 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.

3.19063 100.26
  • hsl(300, 100%, 51%)
  • rgb(255, 7, 252)
  • #FF07FC
  • 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.

3.13993 130.55
  • hsl(283, 96%, 66%)
  • rgb(206, 88, 252)
  • #CE58FC
  • 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.

3.26802 37.03
  • hsl(319, 69%, 64%)
  • rgb(227, 102, 187)
  • #E366BB
  • 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.

3.05042 90.87
  • hsl(319, 46%, 61%)
  • rgb(202, 110, 172)
  • #CA6EAC
  • 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.

3.31366 51.37
  • hsl(320, 28%, 57%)
  • rgb(177, 114, 156)
  • #B1729C
  • 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.

3.64811 96.45
  • hsl(318, 22%, 60%)
  • rgb(177, 131, 163)
  • #B183A3
  • 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.

3.16036 82.1
  • hsl(320, 10%, 54%)
  • rgb(152, 128, 144)
  • #988090
  • 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.

3.60486 110.06
  • hsl(324, 4%, 57%)
  • rgb(152, 142, 148)
  • #988E94
  • 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.

3.16651 103.73
  • hsl(299, 100%, 51%)
  • rgb(253, 7, 255)
  • #FD07FF
  • 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.

3.15746 132.84
  • hsl(319, 72%, 60%)
  • rgb(227, 79, 180)
  • #E34FB4
  • 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.

3.47473 47.67
  • hsl(319, 96%, 61%)
  • rgb(252, 63, 192)
  • #FC3FC0
  • 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.

3.17641 96.86
  • hsl(355, 69%, 64%)
  • rgb(227, 102, 112)
  • #E36670
  • 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.

3.28089 119.79
  • hsl(354, 46%, 61%)
  • rgb(202, 110, 118)
  • #CA6E76
  • 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.

3.49809 126.61
  • hsl(354, 28%, 57%)
  • rgb(177, 114, 120)
  • #B17278
  • 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.

3.78545 132.24
  • hsl(354, 22%, 60%)
  • rgb(177, 131, 135)
  • #B18387
  • 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.

3.24786 113.19
  • hsl(357, 10%, 54%)
  • rgb(152, 128, 129)
  • #988081
  • 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.

3.6587 124.59
  • hsl(348, 4%, 57%)
  • rgb(152, 142, 144)
  • #988E90
  • 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.

3.17845 107.75
  • hsl(0, 98%, 50%)
  • rgb(253, 7, 6)
  • #FD0706
  • 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.03106 258.29
  • hsl(354, 96%, 66%)
  • rgb(252, 88, 102)
  • #FC5866
  • 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.

3.12182 113.0
Not satisfied ?
Gimme valid colors and very close to initial color