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(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFF
  • hsl(231, 16%, 56%)
  • rgb(126, 131, 163)
  • #7E83A3

Title big size with words in bold

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

3.7086

New contrast : 40 results (314 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(230, 13%, 47%)
  • rgb(106, 111, 138)
  • #6A6F8A

Title big size with words in bold

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

4.93699 31.62
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(236, 7%, 41%)
  • rgb(98, 99, 113)
  • #626371

Title big size with words in bold

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

5.92798 56.43
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(228, 2%, 43%)
  • rgb(108, 109, 113)
  • #6C6D71

Title big size with words in bold

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

5.16791 52.11
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(232, 19%, 45%)
  • rgb(93, 99, 138)
  • #5D638A

Title big size with words in bold

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

5.80566 43.85
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(232, 27%, 50%)
  • rgb(94, 103, 163)
  • #5E67A3

Title big size with words in bold

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

5.32332 37.96
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(197, 13%, 39%)
  • rgb(86, 105, 113)
  • #566971

Title big size with words in bold

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

5.74592 59.11
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(200, 7%, 41%)
  • rgb(98, 108, 113)
  • #626C71

Title big size with words in bold

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

5.38074 54.19
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(191, 2%, 43%)
  • rgb(108, 112, 113)
  • #6C7071

Title big size with words in bold

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

5.00745 51.64
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(196, 19%, 37%)
  • rgb(76, 103, 113)
  • #4C6771

Title big size with words in bold

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

6.02436 64.79
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(196, 27%, 42%)
  • rgb(79, 122, 138)
  • #4F7A8A

Title big size with words in bold

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

4.68409 49.35
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(195, 35%, 40%)
  • rgb(66, 119, 138)
  • #42778A

Title big size with words in bold

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

4.9559 61.57
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(195, 45%, 37%)
  • rgb(52, 116, 138)
  • #34748A

Title big size with words in bold

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

5.23539 75.14
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(195, 55%, 34%)
  • rgb(39, 112, 138)
  • #27708A

Title big size with words in bold

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

5.56892 87.98
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(195, 69%, 31%)
  • rgb(25, 109, 138)
  • #196D8A

Title big size with words in bold

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

5.84017 101.85
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(195, 84%, 34%)
  • rgb(14, 125, 163)
  • #0E7DA3

Title big size with words in bold

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

4.68647 112.01
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(160, 13%, 39%)
  • rgb(86, 113, 104)
  • #567168

Title big size with words in bold

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

5.3062 65.05
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(160, 7%, 41%)
  • rgb(98, 113, 108)
  • #62716C

Title big size with words in bold

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

5.12454 57.91
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(155, 2%, 43%)
  • rgb(108, 113, 111)
  • #6C716F

Title big size with words in bold

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

4.96546 53.4
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(158, 19%, 37%)
  • rgb(76, 113, 100)
  • #4C7164

Title big size with words in bold

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

5.44977 72.49
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(160, 27%, 34%)
  • rgb(64, 113, 97)
  • #407161

Title big size with words in bold

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

5.59603 81.01
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(160, 35%, 32%)
  • rgb(54, 113, 94)
  • #36715E

Title big size with words in bold

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

5.70569 89.11
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(160, 45%, 30%)
  • rgb(42, 113, 90)
  • #2A715A

Title big size with words in bold

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

5.82018 99.58
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(160, 55%, 28%)
  • rgb(32, 113, 86)
  • #207156

Title big size with words in bold

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

5.90245 108.94
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(160, 69%, 26%)
  • rgb(20, 113, 83)
  • #147153

Title big size with words in bold

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

5.9715 119.56
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(160, 83%, 24%)
  • rgb(10, 113, 80)
  • #0A7150

Title big size with words in bold

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

6.01582 128.84
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(268, 13%, 47%)
  • rgb(121, 106, 138)
  • #796A8A

Title big size with words in bold

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

4.95096 31.54
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(264, 7%, 41%)
  • rgb(104, 98, 113)
  • #686271

Title big size with words in bold

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

5.87555 55.57
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(276, 2%, 43%)
  • rgb(111, 108, 113)
  • #6F6C71

Title big size with words in bold

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

5.17321 51.99
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(266, 19%, 45%)
  • rgb(113, 93, 138)
  • #715D8A

Title big size with words in bold

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

5.77736 41.73
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(266, 27%, 50%)
  • rgb(125, 94, 163)
  • #7D5EA3

Title big size with words in bold

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

5.24745 37.0
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(303, 13%, 47%)
  • rgb(138, 106, 136)
  • #8A6A88

Title big size with words in bold

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

4.66897 32.26
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(304, 7%, 41%)
  • rgb(113, 98, 112)
  • #716270

Title big size with words in bold

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

5.70159 55.48
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(300, 2%, 43%)
  • rgb(113, 108, 113)
  • #716C71

Title big size with words in bold

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

5.13998 51.85
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(304, 19%, 45%)
  • rgb(138, 93, 135)
  • #8A5D87

Title big size with words in bold

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

5.25493 42.19
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(303, 27%, 50%)
  • rgb(163, 94, 159)
  • #A35E9F

Title big size with words in bold

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

4.50738 4.0
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(339, 13%, 47%)
  • rgb(138, 106, 117)
  • #8A6A75

Title big size with words in bold

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

4.77366 48.09
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(336, 7%, 41%)
  • rgb(113, 98, 104)
  • #716268

Title big size with words in bold

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

5.75483 62.45
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(336, 2%, 43%)
  • rgb(113, 108, 110)
  • #716C6E

Title big size with words in bold

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

5.15676 54.65
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(340, 19%, 45%)
  • rgb(138, 93, 108)
  • #8A5D6C

Title big size with words in bold

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

5.43628 60.32
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(340, 27%, 50%)
  • rgb(163, 94, 117)
  • #A35E75

Title big size with words in bold

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

4.75623 46.0
Not satisfied ?