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(136, 24%, 60%)
  • rgb(131, 179, 144)
  • #83B390

Title big size with words in bold

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

2.38208

New contrast : 42 results (355 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(136, 16%, 35%)
  • rgb(75, 104, 83)
  • #4B6853

Title big size with words in bold

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

6.16884 93.77
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(136, 9%, 37%)
  • rgb(86, 104, 91)
  • #56685B

Title big size with words in bold

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

5.95427 87.15
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(139, 4%, 39%)
  • rgb(95, 104, 98)
  • #5F6862

Title big size with words in bold

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

5.76436 82.71
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(135, 22%, 41%)
  • rgb(81, 129, 93)
  • #51815D

Title big size with words in bold

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

4.51804 72.6
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(135, 30%, 38%)
  • rgb(68, 129, 84)
  • #448154

Title big size with words in bold

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

4.65229 83.92
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(136, 40%, 36%)
  • rgb(55, 129, 75)
  • #37814B

Title big size with words in bold

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

4.76823 96.28
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(136, 50%, 33%)
  • rgb(43, 129, 66)
  • #2B8142

Title big size with words in bold

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

4.85943 108.61
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(136, 63%, 30%)
  • rgb(29, 129, 57)
  • #1D8139

Title big size with words in bold

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

4.93952 122.64
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(136, 76%, 28%)
  • rgb(17, 129, 48)
  • #118130

Title big size with words in bold

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

4.99214 135.56
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(136, 95%, 25%)
  • rgb(3, 129, 38)
  • #038126

Title big size with words in bold

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

5.0336 150.56
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(101, 16%, 35%)
  • rgb(84, 104, 75)
  • #54684B

Title big size with words in bold

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

6.07166 94.88
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(103, 9%, 37%)
  • rgb(91, 104, 86)
  • #5B6856

Title big size with words in bold

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

5.89998 87.98
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(93, 4%, 39%)
  • rgb(99, 104, 95)
  • #63685F

Title big size with words in bold

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

5.71289 83.02
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(100, 23%, 33%)
  • rgb(78, 104, 65)
  • #4E6841

Title big size with words in bold

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

6.21229 102.08
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(100, 30%, 38%)
  • rgb(88, 129, 68)
  • #588144

Title big size with words in bold

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

4.52731 86.33
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(100, 40%, 36%)
  • rgb(79, 129, 55)
  • #4F8137

Title big size with words in bold

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

4.63809 99.01
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(100, 50%, 33%)
  • rgb(71, 129, 43)
  • #47812B

Title big size with words in bold

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

4.72664 111.1
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(99, 63%, 30%)
  • rgb(63, 129, 29)
  • #3F811D

Title big size with words in bold

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

4.80638 125.15
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(100, 76%, 28%)
  • rgb(53, 129, 17)
  • #358111

Title big size with words in bold

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

4.88421 138.35
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(100, 95%, 25%)
  • rgb(45, 129, 3)
  • #2D8103

Title big size with words in bold

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

4.9377 152.75
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(169, 16%, 35%)
  • rgb(75, 104, 99)
  • #4B6863

Title big size with words in bold

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

6.0703 88.31
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(166, 9%, 37%)
  • rgb(86, 104, 100)
  • #566864

Title big size with words in bold

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

5.89915 84.26
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(166, 4%, 39%)
  • rgb(95, 104, 102)
  • #5F6866

Title big size with words in bold

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

5.73995 81.56
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(172, 23%, 33%)
  • rgb(65, 104, 99)
  • #416863

Title big size with words in bold

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

6.20373 92.85
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(172, 30%, 38%)
  • rgb(68, 129, 121)
  • #448179

Title big size with words in bold

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

4.50452 72.89
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(171, 40%, 36%)
  • rgb(55, 129, 119)
  • #378177

Title big size with words in bold

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

4.59626 83.38
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(172, 50%, 33%)
  • rgb(43, 129, 118)
  • #2B8176

Title big size with words in bold

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

4.66209 93.75
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(172, 63%, 30%)
  • rgb(29, 129, 117)
  • #1D8175

Title big size with words in bold

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

4.71993 106.44
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(172, 76%, 28%)
  • rgb(17, 129, 115)
  • #118173

Title big size with words in bold

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

4.76029 117.71
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(172, 95%, 25%)
  • rgb(3, 129, 113)
  • #038171

Title big size with words in bold

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

4.79187 131.07
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(208, 16%, 43%)
  • rgb(93, 112, 129)
  • #5D7081

Title big size with words in bold

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

5.12183 71.07
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(210, 9%, 46%)
  • rgb(107, 118, 129)
  • #6B7681

Title big size with words in bold

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

4.63215 62.5
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(213, 4%, 39%)
  • rgb(95, 99, 104)
  • #5F6368

Title big size with words in bold

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

6.04976 85.39
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(210, 22%, 41%)
  • rgb(81, 105, 129)
  • #516981

Title big size with words in bold

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

5.69493 81.11
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(209, 31%, 46%)
  • rgb(81, 118, 154)
  • #51769A

Title big size with words in bold

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

4.76422 70.54
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(209, 40%, 43%)
  • rgb(66, 111, 154)
  • #426F9A

Title big size with words in bold

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

5.28695 83.78
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(209, 50%, 46%)
  • rgb(59, 120, 179)
  • #3B78B3

Title big size with words in bold

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

4.64244 81.22
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(245, 17%, 52%)
  • rgb(116, 112, 154)
  • #74709A

Title big size with words in bold

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

4.63895 67.18
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(242, 9%, 46%)
  • rgb(108, 107, 129)
  • #6C6B81

Title big size with words in bold

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

5.17534 72.99
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(246, 4%, 39%)
  • rgb(96, 95, 104)
  • #605F68

Title big size with words in bold

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

6.29848 88.77
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(245, 22%, 49%)
  • rgb(102, 97, 154)
  • #66619A

Title big size with words in bold

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

5.61279 83.14
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(245, 35%, 53%)
  • rgb(103, 95, 179)
  • #675FB3

Title big size with words in bold

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

5.43404 83.0
Not satisfied ?
Gimme valid colors and very close to initial color