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 : 64 results (2,265,120 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(175, 53%, 42%)
  • rgb(50, 165, 156)
  • #32A59C

Title big size with words in bold

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

3.00097 55.39
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(175, 54%, 41%)
  • rgb(49, 165, 157)
  • #31A59D

Title big size with words in bold

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

3.00021 54.64
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(181, 54%, 42%)
  • rgb(49, 164, 167)
  • #31A4A7

Title big size with words in bold

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

3.00052 48.58
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(176, 56%, 41%)
  • rgb(46, 165, 159)
  • #2EA59F

Title big size with words in bold

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

3.00049 53.2
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(182, 57%, 42%)
  • rgb(46, 164, 169)
  • #2EA4A9

Title big size with words in bold

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

3.00031 47.47
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(182, 58%, 41%)
  • rgb(44, 164, 170)
  • #2CA4AA

Title big size with words in bold

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

3.00097 46.97
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(178, 58%, 40%)
  • rgb(43, 165, 161)
  • #2BA5A1

Title big size with words in bold

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

3.00025 51.84
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(178, 60%, 40%)
  • rgb(41, 165, 162)
  • #29A5A2

Title big size with words in bold

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

3.00083 51.22
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(184, 63%, 41%)
  • rgb(39, 164, 173)
  • #27A4AD

Title big size with words in bold

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

3.00005 45.71
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(175, 66%, 39%)
  • rgb(33, 166, 156)
  • #21A69C

Title big size with words in bold

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

3.00034 55.54
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(176, 68%, 38%)
  • rgb(31, 166, 157)
  • #1FA69D

Title big size with words in bold

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

3.00017 55.04
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(180, 68%, 38%)
  • rgb(31, 165, 167)
  • #1FA5A7

Title big size with words in bold

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

3.00072 49.04
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(181, 70%, 38%)
  • rgb(29, 165, 168)
  • #1DA5A8

Title big size with words in bold

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

3.00012 48.86
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(177, 72%, 37%)
  • rgb(26, 166, 159)
  • #1AA69F

Title big size with words in bold

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

3.00041 54.47
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(181, 73%, 38%)
  • rgb(26, 165, 169)
  • #1AA5A9

Title big size with words in bold

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

3.00048 49.02
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(177, 75%, 37%)
  • rgb(23, 166, 160)
  • #17A6A0

Title big size with words in bold

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

3.00063 54.51
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(182, 76%, 37%)
  • rgb(23, 165, 170)
  • #17A5AA

Title big size with words in bold

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

3.00045 49.4
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(177, 78%, 36%)
  • rgb(20, 166, 161)
  • #14A6A1

Title big size with words in bold

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

3.00048 54.76
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(182, 79%, 37%)
  • rgb(20, 165, 171)
  • #14A5AB

Title big size with words in bold

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

3.00006 50.01
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(182, 80%, 37%)
  • rgb(19, 165, 171)
  • #13A5AB

Title big size with words in bold

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

3.00094 50.4
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(178, 82%, 35%)
  • rgb(16, 166, 162)
  • #10A6A2

Title big size with words in bold

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

3.00075 55.6
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(182, 82%, 36%)
  • rgb(16, 165, 172)
  • #10A5AC

Title big size with words in bold

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

3.00009 51.29
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(182, 83%, 36%)
  • rgb(15, 165, 172)
  • #0FA5AC

Title big size with words in bold

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

3.00082 51.77
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(178, 86%, 34%)
  • rgb(12, 166, 163)
  • #0CA6A3

Title big size with words in bold

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

3.00043 56.79
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(182, 88%, 36%)
  • rgb(11, 165, 173)
  • #0BA5AD

Title big size with words in bold

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

3.00012 53.5
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(182, 89%, 35%)
  • rgb(10, 165, 173)
  • #0AA5AD

Title big size with words in bold

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

3.00069 54.06
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(179, 91%, 33%)
  • rgb(7, 166, 164)
  • #07A6A4

Title big size with words in bold

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

3.00018 58.87
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(179, 93%, 33%)
  • rgb(6, 166, 164)
  • #06A6A4

Title big size with words in bold

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

3.00073 59.44
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(183, 94%, 35%)
  • rgb(5, 165, 174)
  • #05A5AE

Title big size with words in bold

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

3.00013 56.84
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(175, 95%, 33%)
  • rgb(4, 167, 154)
  • #04A79A

Title big size with words in bold

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

3.00031 65.38
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(183, 95%, 34%)
  • rgb(4, 165, 174)
  • #04A5AE

Title big size with words in bold

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

3.00068 57.5
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(175, 96%, 33%)
  • rgb(3, 167, 154)
  • #03A79A

Title big size with words in bold

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

3.00087 65.9
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(179, 98%, 32%)
  • rgb(1, 166, 165)
  • #01A6A5

Title big size with words in bold

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

3.00039 62.07
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(180, 52%, 42%)
  • rgb(52, 164, 165)
  • #34A4A5

Title big size with words in bold

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

3.00021 49.77
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(178, 48%, 43%)
  • rgb(57, 164, 161)
  • #39A4A1

Title big size with words in bold

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

3.00052 52.33
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(177, 47%, 43%)
  • rgb(58, 164, 160)
  • #3AA4A0

Title big size with words in bold

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

3.00098 53.0
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(183, 49%, 44%)
  • rgb(58, 163, 170)
  • #3AA3AA

Title big size with words in bold

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

3.00033 47.6
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(183, 48%, 44%)
  • rgb(59, 163, 169)
  • #3BA3A9

Title big size with words in bold

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

3.00096 48.1
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(180, 43%, 44%)
  • rgb(65, 163, 164)
  • #41A3A4

Title big size with words in bold

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

3.00013 50.68
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(180, 42%, 44%)
  • rgb(66, 163, 163)
  • #42A3A3

Title big size with words in bold

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

3.00026 51.23
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(179, 41%, 45%)
  • rgb(67, 163, 162)
  • #43A3A2

Title big size with words in bold

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

3.00032 51.79
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(178, 41%, 45%)
  • rgb(68, 163, 161)
  • #44A3A1

Title big size with words in bold

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

3.0003 52.36
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(178, 40%, 45%)
  • rgb(69, 163, 160)
  • #45A3A0

Title big size with words in bold

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

3.0002 52.93
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(177, 39%, 45%)
  • rgb(70, 163, 159)
  • #46A39F

Title big size with words in bold

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

3.00003 53.51
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(179, 35%, 46%)
  • rgb(77, 162, 161)
  • #4DA2A1

Title big size with words in bold

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

3.00072 51.43
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(178, 35%, 47%)
  • rgb(78, 162, 160)
  • #4EA2A0

Title big size with words in bold

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

3.00013 51.87
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(175, 33%, 47%)
  • rgb(81, 162, 156)
  • #51A29C

Title big size with words in bold

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

3.00083 54.02
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(183, 34%, 48%)
  • rgb(81, 161, 166)
  • #51A1A6

Title big size with words in bold

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

3.00067 47.53
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(180, 30%, 48%)
  • rgb(85, 161, 161)
  • #55A1A1

Title big size with words in bold

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

3.00049 49.28
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(176, 29%, 48%)
  • rgb(88, 161, 157)
  • #58A19D

Title big size with words in bold

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

3.00011 51.0
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(183, 29%, 49%)
  • rgb(90, 160, 164)
  • #5AA0A4

Title big size with words in bold

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

3.00038 44.79
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(180, 27%, 49%)
  • rgb(92, 160, 161)
  • #5CA0A1

Title big size with words in bold

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

3.00085 45.75
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(178, 25%, 49%)
  • rgb(94, 160, 158)
  • #5EA09E

Title big size with words in bold

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

3.00086 46.88
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(175, 25%, 50%)
  • rgb(96, 160, 155)
  • #60A09B

Title big size with words in bold

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

3.00043 48.16
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(177, 23%, 50%)
  • rgb(101, 159, 157)
  • #659F9D

Title big size with words in bold

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

3.00023 41.2
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(182, 22%, 51%)
  • rgb(105, 158, 160)
  • #699EA0

Title big size with words in bold

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

3.00042 29.26
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(182, 20%, 52%)
  • rgb(111, 157, 159)
  • #6F9D9F

Title big size with words in bold

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

3.00029 27.61
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(180, 18%, 52%)
  • rgb(112, 157, 157)
  • #709D9D

Title big size with words in bold

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

3.0006 26.84
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(177, 18%, 52%)
  • rgb(113, 157, 155)
  • #719D9B

Title big size with words in bold

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

3.00075 25.64
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(184, 18%, 53%)
  • rgb(116, 156, 159)
  • #749C9F

Title big size with words in bold

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

3.00059 41.78
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(181, 16%, 53%)
  • rgb(117, 156, 157)
  • #759C9D

Title big size with words in bold

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

3.00059 41.81
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(178, 16%, 53%)
  • rgb(118, 156, 155)
  • #769C9B

Title big size with words in bold

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

3.00042 41.7
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(175, 15%, 53%)
  • rgb(119, 156, 153)
  • #779C99

Title big size with words in bold

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

3.0001 41.44
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(182, 12%, 55%)
  • rgb(127, 154, 155)
  • #7F9A9B

Title big size with words in bold

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

3.00088 58.12
Not satisfied ?
Gimme a range of colors