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)
  • #FFFFFF
  • hsl(184, 74%, 32%)
  • rgb(21, 133, 143)
  • #15858F

Title big size with words in bold

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

4.39006

New contrast : 41 results (434 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(185, 74%, 26%)
  • rgb(17, 109, 118)
  • #116D76

Title big size with words in bold

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

6.04684 30.9
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(185, 60%, 28%)
  • rgb(29, 110, 118)
  • #1D6E76

Title big size with words in bold

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

5.92515 30.1
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(185, 49%, 30%)
  • rgb(40, 111, 118)
  • #286F76

Title big size with words in bold

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

5.79214 26.88
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(185, 38%, 33%)
  • rgb(52, 112, 118)
  • #347076

Title big size with words in bold

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

5.63716 16.99
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(185, 30%, 35%)
  • rgb(63, 113, 118)
  • #3F7176

Title big size with words in bold

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

5.47587 36.95
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(186, 22%, 37%)
  • rgb(75, 113, 118)
  • #4B7176

Title big size with words in bold

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

5.35329 51.15
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(187, 15%, 40%)
  • rgb(86, 114, 118)
  • #567276

Title big size with words in bold

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

5.16705 63.18
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(186, 9%, 42%)
  • rgb(98, 116, 118)
  • #627476

Title big size with words in bold

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

4.90758 75.83
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(186, 3%, 44%)
  • rgb(109, 117, 118)
  • #6D7576

Title big size with words in bold

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

4.71237 87.14
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(185, 90%, 24%)
  • rgb(6, 108, 118)
  • #066C76

Title big size with words in bold

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

6.15048 32.59
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(149, 74%, 26%)
  • rgb(17, 118, 66)
  • #117642

Title big size with words in bold

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

5.68508 77.19
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(148, 60%, 28%)
  • rgb(29, 118, 71)
  • #1D7647

Title big size with words in bold

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

5.62309 72.18
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(148, 49%, 30%)
  • rgb(40, 118, 77)
  • #28764D

Title big size with words in bold

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

5.54271 65.73
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(148, 38%, 33%)
  • rgb(52, 118, 83)
  • #347653

Title big size with words in bold

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

5.43718 57.45
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(149, 30%, 35%)
  • rgb(63, 118, 90)
  • #3F765A

Title big size with words in bold

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

5.31597 42.76
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(147, 22%, 37%)
  • rgb(75, 118, 95)
  • #4B765F

Title big size with words in bold

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

5.17778 35.17
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(148, 15%, 40%)
  • rgb(86, 118, 101)
  • #567665

Title big size with words in bold

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

5.02997 58.2
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(150, 9%, 42%)
  • rgb(98, 118, 108)
  • #62766C

Title big size with words in bold

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

4.85297 74.31
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(146, 3%, 44%)
  • rgb(109, 118, 113)
  • #6D7671

Title big size with words in bold

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

4.68743 86.67
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(148, 90%, 24%)
  • rgb(6, 118, 60)
  • #06763C

Title big size with words in bold

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

5.73087 83.33
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(220, 74%, 43%)
  • rgb(29, 82, 195)
  • #1D52C3

Title big size with words in bold

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

6.89161 20.38
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(220, 61%, 47%)
  • rgb(47, 94, 195)
  • #2F5EC3

Title big size with words in bold

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

5.98295 46.24
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(220, 48%, 44%)
  • rgb(58, 94, 169)
  • #3A5EA9

Title big size with words in bold

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

6.26136 20.73
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(219, 38%, 40%)
  • rgb(63, 90, 143)
  • #3F5A8F

Title big size with words in bold

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

6.83938 17.56
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(220, 91%, 45%)
  • rgb(10, 77, 221)
  • #0A4DDD

Title big size with words in bold

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

6.7339 66.76
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(256, 92%, 55%)
  • rgb(95, 37, 247)
  • #5F25F7

Title big size with words in bold

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

6.7867 86.42
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(257, 71%, 53%)
  • rgb(101, 53, 221)
  • #6535DD

Title big size with words in bold

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

6.75964 78.0
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(255, 51%, 51%)
  • rgb(101, 67, 195)
  • #6543C3

Title big size with words in bold

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

6.6789 71.47
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(256, 39%, 47%)
  • rgb(100, 74, 169)
  • #644AA9

Title big size with words in bold

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

6.78669 67.33
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(256, 31%, 50%)
  • rgb(112, 91, 169)
  • #705BA9

Title big size with words in bold

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

5.58764 88.67
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(256, 22%, 45%)
  • rgb(105, 91, 143)
  • #695B8F

Title big size with words in bold

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

6.01079 80.34
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(292, 74%, 38%)
  • rgb(151, 25, 169)
  • #9719A9

Title big size with words in bold

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

6.93566 98.47
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(292, 60%, 41%)
  • rgb(153, 41, 169)
  • #9929A9

Title big size with words in bold

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

6.47239 115.45
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(292, 48%, 44%)
  • rgb(156, 58, 169)
  • #9C3AA9

Title big size with words in bold

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

5.84678 127.16
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(293, 38%, 40%)
  • rgb(134, 63, 143)
  • #863F8F

Title big size with words in bold

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

6.72796 103.22
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(291, 91%, 39%)
  • rgb(170, 9, 195)
  • #AA09C3

Title big size with words in bold

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

5.93839 115.53
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(328, 74%, 38%)
  • rgb(169, 25, 100)
  • #A91964

Title big size with words in bold

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

6.97657 123.91
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(328, 60%, 41%)
  • rgb(169, 41, 108)
  • #A9296C

Title big size with words in bold

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

6.52028 134.26
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(328, 48%, 44%)
  • rgb(169, 58, 117)
  • #A93A75

Title big size with words in bold

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

5.917 140.99
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(327, 38%, 40%)
  • rgb(143, 63, 106)
  • #8F3F6A

Title big size with words in bold

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

6.80261 112.46
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(328, 91%, 39%)
  • rgb(195, 9, 106)
  • #C3096A

Title big size with words in bold

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

5.88628 149.04
Not satisfied ?
Gimme valid colors and very close to initial color