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(180, 60%, 50%)
  • rgb(51, 204, 204)
  • #3CC

Title big size with words in bold

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

1.97186

New contrast : 25 results (239 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(180, 59%, 37%)
  • rgb(39, 154, 154)
  • #279A9A

Title big size with words in bold

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

3.40074 63.14
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(180, 48%, 40%)
  • rgb(53, 154, 154)
  • #359A9A

Title big size with words in bold

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

3.36526 63.0
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(180, 38%, 43%)
  • rgb(69, 154, 154)
  • #459A9A

Title big size with words in bold

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

3.31131 62.5
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(180, 29%, 46%)
  • rgb(83, 154, 154)
  • #539A9A

Title big size with words in bold

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

3.25246 60.11
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(180, 21%, 49%)
  • rgb(99, 154, 154)
  • #639A9A

Title big size with words in bold

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

3.1725 51.85
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(180, 16%, 52%)
  • rgb(113, 154, 154)
  • #719A9A

Title big size with words in bold

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

3.09233 22.68
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(180, 8%, 46%)
  • rgb(108, 129, 129)
  • #6C8181

Title big size with words in bold

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

4.12191 87.0
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(180, 4%, 48%)
  • rgb(119, 129, 129)
  • #778181

Title big size with words in bold

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

4.0065 80.89
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(180, 74%, 34%)
  • rgb(23, 154, 154)
  • #179A9A

Title big size with words in bold

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

3.42841 64.79
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(180, 88%, 31%)
  • rgb(9, 154, 154)
  • #099A9A

Title big size with words in bold

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

3.44236 68.69
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(143, 59%, 37%)
  • rgb(39, 154, 84)
  • #279A54

Title big size with words in bold

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

3.59803 122.86
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(143, 48%, 40%)
  • rgb(53, 154, 93)
  • #359A5D

Title big size with words in bold

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

3.54031 114.28
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(143, 38%, 43%)
  • rgb(69, 154, 102)
  • #459A66

Title big size with words in bold

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

3.46127 105.68
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(143, 29%, 46%)
  • rgb(83, 154, 111)
  • #539A6F

Title big size with words in bold

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

3.37643 96.43
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(142, 21%, 49%)
  • rgb(99, 154, 120)
  • #639A78

Title big size with words in bold

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

3.269 84.68
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(143, 16%, 52%)
  • rgb(113, 154, 129)
  • #719A81

Title big size with words in bold

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

3.16199 67.57
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(141, 11%, 55%)
  • rgb(129, 154, 138)
  • #819A8A

Title big size with words in bold

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

3.03352 39.59
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(144, 4%, 48%)
  • rgb(119, 129, 123)
  • #77817B

Title big size with words in bold

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

4.03032 86.13
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(143, 74%, 34%)
  • rgb(23, 154, 75)
  • #179A4B

Title big size with words in bold

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

3.64566 131.88
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(143, 88%, 31%)
  • rgb(9, 154, 66)
  • #099A42

Title big size with words in bold

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

3.67613 141.4
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(216, 60%, 50%)
  • rgb(51, 112, 204)
  • #3370CC

Title big size with words in bold

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

4.84949 92.0
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(252, 74%, 60%)
  • rgb(110, 80, 230)
  • #6E50E6

Title big size with words in bold

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

5.31229 118.96
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(252, 52%, 57%)
  • rgb(114, 91, 204)
  • #725BCC

Title big size with words in bold

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

5.14222 106.05
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(288, 60%, 50%)
  • rgb(174, 51, 204)
  • #AE33CC

Title big size with words in bold

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

5.06611 119.83
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(324, 60%, 50%)
  • rgb(204, 51, 142)
  • #CC338E

Title big size with words in bold

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

4.73869 62.0
Not satisfied ?
Gimme valid colors and very close to initial color