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(160, 83%, 38%)
  • rgb(16, 182, 128)
  • #10B680
  • 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.

2.61685

New contrast : 36 results (2,388,528 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(162, 80%, 29%)
  • rgb(15, 135, 99)
  • #0F8763
  • 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.

4.50057 50.42
  • hsl(155, 86%, 28%)
  • rgb(10, 136, 85)
  • #0A8855
  • 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.

4.50089 56.15
  • hsl(163, 86%, 28%)
  • rgb(10, 135, 101)
  • #0A8765
  • 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.

4.50025 49.83
  • hsl(156, 88%, 28%)
  • rgb(8, 136, 86)
  • #088856
  • 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.

4.50029 55.61
  • hsl(164, 90%, 27%)
  • rgb(7, 135, 102)
  • #078766
  • 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.

4.50017 49.61
  • hsl(157, 92%, 27%)
  • rgb(5, 136, 87)
  • #058857
  • 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.

4.50089 55.13
  • hsl(165, 94%, 27%)
  • rgb(4, 135, 103)
  • #048767
  • 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.

4.50006 49.48
  • hsl(158, 95%, 27%)
  • rgb(3, 136, 88)
  • #038858
  • 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.

4.50021 54.69
  • hsl(161, 77%, 29%)
  • rgb(17, 135, 98)
  • #118762
  • 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.

4.50084 50.76
  • hsl(160, 75%, 30%)
  • rgb(19, 135, 97)
  • #138761
  • 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.

4.50075 51.12
  • hsl(159, 73%, 30%)
  • rgb(21, 135, 96)
  • #158760
  • 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.

4.50028 51.48
  • hsl(157, 69%, 31%)
  • rgb(24, 135, 94)
  • #18875E
  • 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.

4.50059 52.25
  • hsl(165, 67%, 31%)
  • rgb(26, 134, 107)
  • #1A866B
  • 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.

4.50038 49.17
  • hsl(163, 64%, 31%)
  • rgb(29, 134, 105)
  • #1D8669
  • 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.

4.50039 49.4
  • hsl(160, 60%, 32%)
  • rgb(33, 134, 102)
  • #218666
  • 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.

4.5001 49.77
  • hsl(160, 59%, 32%)
  • rgb(34, 134, 101)
  • #228665
  • 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.

4.50067 49.93
  • hsl(165, 54%, 33%)
  • rgb(39, 133, 110)
  • #27856E
  • 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.

4.50022 48.1
  • hsl(164, 53%, 33%)
  • rgb(40, 133, 109)
  • #28856D
  • 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.

4.50058 48.01
  • hsl(163, 52%, 34%)
  • rgb(41, 133, 108)
  • #29856C
  • 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.

4.5008 47.92
  • hsl(162, 52%, 34%)
  • rgb(42, 133, 107)
  • #2A856B
  • 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.

4.50087 47.82
  • hsl(162, 51%, 34%)
  • rgb(43, 133, 106)
  • #2B856A
  • 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.

4.50079 47.71
  • hsl(161, 50%, 34%)
  • rgb(44, 133, 105)
  • #2C8569
  • 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.

4.50056 47.6
  • hsl(160, 49%, 34%)
  • rgb(45, 133, 104)
  • #2D8568
  • 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.

4.50018 47.49
  • hsl(155, 46%, 35%)
  • rgb(49, 133, 99)
  • #318563
  • 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.

4.50086 47.34
  • hsl(164, 45%, 35%)
  • rgb(50, 132, 111)
  • #32846F
  • 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.

4.50096 44.91
  • hsl(163, 44%, 35%)
  • rgb(51, 132, 110)
  • #33846E
  • 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.

4.50023 44.47
  • hsl(155, 39%, 37%)
  • rgb(57, 132, 102)
  • #398466
  • 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.

4.50032 41.92
  • hsl(164, 37%, 37%)
  • rgb(59, 131, 112)
  • #3B8370
  • 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.

4.50021 38.54
  • hsl(161, 36%, 37%)
  • rgb(61, 131, 109)
  • #3D836D
  • 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.

4.50087 36.44
  • hsl(157, 35%, 38%)
  • rgb(63, 131, 106)
  • #3F836A
  • 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.

4.50065 34.05
  • hsl(162, 31%, 38%)
  • rgb(67, 130, 112)
  • #438270
  • 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.

4.50095 22.93
  • hsl(157, 30%, 39%)
  • rgb(70, 130, 107)
  • #46826B
  • 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.

4.50086 19.66
  • hsl(163, 27%, 39%)
  • rgb(73, 129, 114)
  • #498172
  • 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.

4.50028 32.26
  • hsl(165, 17%, 42%)
  • rgb(89, 126, 117)
  • #597E75
  • 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.

4.50066 59.63
  • hsl(161, 16%, 42%)
  • rgb(90, 126, 115)
  • #5A7E73
  • 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.

4.50003 61.04
  • hsl(164, 14%, 42%)
  • rgb(94, 125, 117)
  • #5E7D75
  • 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.

4.5004 66.04
Not satisfied ?
Gimme a range of colors