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 : 57 results (936,960 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(212, 42%, 60%)
  • rgb(113, 152, 197)
  • #7198C5
  • 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.00014 57.09
  • hsl(209, 40%, 59%)
  • rgb(110, 153, 194)
  • #6E99C2
  • 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.00064 59.69
  • hsl(212, 45%, 60%)
  • rgb(110, 152, 201)
  • #6E98C9
  • 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.00098 53.41
  • hsl(212, 49%, 61%)
  • rgb(107, 152, 205)
  • #6B98CD
  • 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.00085 49.83
  • hsl(214, 57%, 62%)
  • rgb(105, 151, 214)
  • #6997D6
  • 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.00073 42.6
  • hsl(207, 43%, 58%)
  • rgb(104, 154, 195)
  • #689AC3
  • 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.00048 58.63
  • hsl(210, 48%, 60%)
  • rgb(104, 153, 202)
  • #6899CA
  • 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.00088 52.33
  • hsl(212, 54%, 61%)
  • rgb(103, 152, 210)
  • #6798D2
  • 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.00058 45.59
  • hsl(207, 47%, 58%)
  • rgb(100, 154, 200)
  • #649AC8
  • 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.0008 54.11
  • hsl(210, 52%, 60%)
  • rgb(100, 153, 207)
  • #6499CF
  • 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.00028 48.04
  • hsl(210, 53%, 60%)
  • rgb(99, 153, 208)
  • #6399D0
  • 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.00093 47.25
  • hsl(208, 54%, 59%)
  • rgb(94, 154, 207)
  • #5E9ACF
  • 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.00035 48.43
  • hsl(208, 55%, 59%)
  • rgb(93, 154, 208)
  • #5D9AD0
  • 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.00065 47.74
  • hsl(208, 55%, 59%)
  • rgb(92, 154, 209)
  • #5C9AD1
  • 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.00086 47.09
  • hsl(208, 56%, 59%)
  • rgb(91, 154, 210)
  • #5B9AD2
  • 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.00099 46.47
  • hsl(208, 58%, 59%)
  • rgb(89, 154, 212)
  • #599AD4
  • 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.00098 45.38
  • hsl(215, 79%, 63%)
  • rgb(89, 150, 236)
  • #5996EC
  • 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.00063 34.85
  • hsl(208, 59%, 59%)
  • rgb(88, 154, 213)
  • #589AD5
  • 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.00086 44.91
  • hsl(208, 60%, 59%)
  • rgb(87, 154, 214)
  • #579AD6
  • 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.00064 44.49
  • hsl(216, 86%, 64%)
  • rgb(87, 149, 243)
  • #5795F3
  • 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.00067 35.65
  • hsl(208, 61%, 59%)
  • rgb(86, 154, 215)
  • #569AD7
  • 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.00035 44.13
  • hsl(213, 76%, 62%)
  • rgb(86, 151, 233)
  • #5697E9
  • 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.00044 36.47
  • hsl(211, 72%, 61%)
  • rgb(85, 152, 228)
  • #5598E4
  • 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.00093 38.14
  • hsl(210, 68%, 60%)
  • rgb(84, 153, 223)
  • #5499DF
  • 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.00043 40.48
  • hsl(211, 73%, 61%)
  • rgb(84, 152, 229)
  • #5498E5
  • 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.00013 38.31
  • hsl(214, 83%, 63%)
  • rgb(84, 150, 240)
  • #5496F0
  • 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.00096 36.96
  • hsl(213, 81%, 62%)
  • rgb(81, 151, 237)
  • #5197ED
  • 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.00026 38.73
  • hsl(214, 87%, 63%)
  • rgb(80, 150, 243)
  • #5096F3
  • 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.00092 39.38
  • hsl(208, 67%, 58%)
  • rgb(79, 154, 221)
  • #4F9ADD
  • 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.00052 43.92
  • hsl(210, 72%, 60%)
  • rgb(79, 153, 227)
  • #4F99E3
  • 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.00079 41.7
  • hsl(215, 93%, 64%)
  • rgb(79, 149, 249)
  • #4F95F9
  • 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.00028 40.48
  • hsl(216, 98%, 65%)
  • rgb(79, 148, 254)
  • #4F94FE
  • 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.00019 41.03
  • hsl(211, 79%, 60%)
  • rgb(76, 152, 235)
  • #4C98EB
  • 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.00076 42.22
  • hsl(214, 95%, 64%)
  • rgb(76, 149, 251)
  • #4C95FB
  • 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.00031 42.66
  • hsl(208, 70%, 58%)
  • rgb(75, 154, 224)
  • #4B9AE0
  • 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.00095 45.22
  • hsl(209, 75%, 59%)
  • rgb(75, 153, 230)
  • #4B99E6
  • 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.00073 43.64
  • hsl(212, 86%, 61%)
  • rgb(74, 151, 242)
  • #4A97F2
  • 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.00001 43.49
  • hsl(208, 73%, 58%)
  • rgb(71, 154, 227)
  • #479AE3
  • 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.00027 47.23
  • hsl(213, 93%, 62%)
  • rgb(71, 150, 249)
  • #4796F9
  • 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.0007 46.18
  • hsl(214, 98%, 63%)
  • rgb(71, 149, 254)
  • #4795FE
  • 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.00084 46.58
  • hsl(210, 84%, 60%)
  • rgb(70, 152, 239)
  • #4698EF
  • 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.00081 46.63
  • hsl(212, 89%, 61%)
  • rgb(69, 151, 245)
  • #4597F5
  • 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.00077 47.55
  • hsl(207, 75%, 58%)
  • rgb(68, 154, 229)
  • #449AE5
  • 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.00023 49.18
  • hsl(209, 81%, 59%)
  • rgb(66, 153, 236)
  • #4299EC
  • 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.00027 50.07
  • hsl(212, 96%, 62%)
  • rgb(66, 150, 252)
  • #4296FC
  • 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.00007 50.42
  • hsl(210, 87%, 60%)
  • rgb(65, 152, 242)
  • #4198F2
  • 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.00076 50.82
  • hsl(212, 97%, 62%)
  • rgb(64, 150, 253)
  • #4096FD
  • 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.00047 52.18
  • hsl(207, 78%, 57%)
  • rgb(63, 154, 232)
  • #3F9AE8
  • 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.0005 52.97
  • hsl(211, 93%, 60%)
  • rgb(62, 151, 249)
  • #3E97F9
  • 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.00027 53.67
  • hsl(212, 98%, 61%)
  • rgb(62, 150, 254)
  • #3E96FE
  • 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.00064 53.95
  • hsl(211, 95%, 60%)
  • rgb(60, 151, 250)
  • #3C97FA
  • 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.00034 55.49
  • hsl(211, 96%, 60%)
  • rgb(58, 151, 251)
  • #3A97FB
  • 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.00019 57.32
  • hsl(209, 93%, 59%)
  • rgb(53, 152, 248)
  • #3598F8
  • 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.0008 61.78
  • hsl(211, 39%, 60%)
  • rgb(115, 152, 194)
  • #7398C2
  • 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.00031 59.89
  • hsl(214, 44%, 61%)
  • rgb(115, 151, 201)
  • #7397C9
  • 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.00042 53.67
  • hsl(214, 41%, 61%)
  • rgb(117, 151, 198)
  • #7597C6
  • 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.00066 56.39
  • hsl(214, 38%, 61%)
  • rgb(119, 151, 195)
  • #7797C3
  • 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.0004 59.15
Not satisfied ?