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(171, 42%, 62%)
  • rgb(120, 201, 190)
  • #78C9BE
  • 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.

1.92717

New contrast : 31 results (3,145,716 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(175, 15%, 53%)
  • rgb(119, 156, 153)
  • #779C99
  • 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.0001 52.14
  • hsl(168, 17%, 53%)
  • rgb(116, 157, 149)
  • #749D95
  • 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.62
  • hsl(171, 17%, 53%)
  • rgb(115, 157, 151)
  • #739D97
  • 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.00059 52.49
  • hsl(174, 17%, 53%)
  • rgb(114, 157, 153)
  • #729D99
  • 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.00075 51.43
  • hsl(167, 21%, 51%)
  • rgb(106, 159, 148)
  • #6A9F94
  • 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.00012 53.24
  • hsl(168, 24%, 50%)
  • rgb(100, 160, 148)
  • #64A094
  • 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.00094 53.25
  • hsl(170, 24%, 50%)
  • rgb(99, 160, 150)
  • #63A096
  • 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.00032 52.19
  • hsl(175, 25%, 50%)
  • rgb(96, 160, 155)
  • #60A09B
  • 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 50.08
  • hsl(171, 27%, 49%)
  • rgb(92, 161, 151)
  • #5CA197
  • 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.00005 52.57
  • hsl(174, 28%, 49%)
  • rgb(90, 161, 154)
  • #5AA19A
  • 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.0003 51.63
  • hsl(167, 29%, 49%)
  • rgb(88, 162, 146)
  • #58A292
  • 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 56.18
  • hsl(176, 29%, 48%)
  • rgb(88, 161, 157)
  • #58A19D
  • 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.00011 51.01
  • hsl(169, 30%, 48%)
  • rgb(86, 162, 149)
  • #56A295
  • 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.00094 55.13
  • hsl(172, 31%, 48%)
  • rgb(84, 162, 152)
  • #54A298
  • 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 54.38
  • hsl(175, 33%, 47%)
  • rgb(81, 162, 156)
  • #51A29C
  • 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.00083 54.05
  • hsl(169, 34%, 47%)
  • rgb(79, 163, 148)
  • #4FA394
  • 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.00045 58.27
  • hsl(172, 36%, 46%)
  • rgb(76, 163, 152)
  • #4CA398
  • 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.00018 57.98
  • hsl(173, 36%, 46%)
  • rgb(75, 163, 153)
  • #4BA399
  • 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 58.15
  • hsl(169, 39%, 46%)
  • rgb(71, 164, 147)
  • #47A493
  • 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.00025 62.81
  • hsl(169, 40%, 45%)
  • rgb(70, 164, 148)
  • #46A494
  • 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 62.97
  • hsl(172, 50%, 43%)
  • rgb(55, 165, 152)
  • #37A598
  • 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.0009 72.19
  • hsl(173, 50%, 42%)
  • rgb(54, 165, 153)
  • #36A599
  • 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 72.74
  • hsl(168, 52%, 42%)
  • rgb(51, 166, 144)
  • #33A690
  • 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.00087 77.68
  • hsl(169, 53%, 42%)
  • rgb(50, 166, 145)
  • #32A691
  • 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 78.13
  • hsl(175, 53%, 42%)
  • rgb(50, 165, 156)
  • #32A59C
  • 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.00097 75.42
  • hsl(175, 54%, 41%)
  • rgb(49, 165, 157)
  • #31A59D
  • 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.00021 76.09
  • hsl(171, 56%, 41%)
  • rgb(46, 166, 148)
  • #2EA694
  • 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.00074 80.53
  • hsl(172, 59%, 40%)
  • rgb(42, 166, 151)
  • #2AA697
  • 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.00008 83.24
  • hsl(173, 61%, 40%)
  • rgb(40, 166, 152)
  • #28A698
  • 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 84.8
  • hsl(174, 13%, 54%)
  • rgb(124, 155, 152)
  • #7C9B98
  • 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.00045 53.38
  • hsl(174, 4%, 57%)
  • rgb(141, 151, 150)
  • #8D9796
  • 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.00018 56.43
Not satisfied ?
Gimme a range of colors