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)
  • #FFFFFF
  • hsl(184, 74%, 32%)
  • rgb(21, 133, 143)
  • #15858F

Title big size with words in bold

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

4.39006

New contrast : 26 results (1,200,480 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(189, 78%, 33%)
  • rgb(18, 130, 151)
  • #128297

Title big size with words in bold

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

4.50098 7.71
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(185, 83%, 30%)
  • rgb(13, 131, 144)
  • #0D8390

Title big size with words in bold

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

4.5003 8.04
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(181, 83%, 28%)
  • rgb(12, 132, 135)
  • #0C8487

Title big size with words in bold

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

4.50065 10.75
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(189, 87%, 31%)
  • rgb(10, 130, 153)
  • #0A8299

Title big size with words in bold

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

4.5007 7.1
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(181, 88%, 28%)
  • rgb(8, 132, 136)
  • #088488

Title big size with words in bold

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

4.50031 13.65
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(186, 89%, 30%)
  • rgb(8, 131, 145)
  • #088391

Title big size with words in bold

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

4.50092 13.0
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(189, 93%, 31%)
  • rgb(5, 130, 154)
  • #05829A

Title big size with words in bold

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

4.50052 14.08
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(189, 72%, 33%)
  • rgb(24, 130, 149)
  • #188295

Title big size with words in bold

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

4.50076 6.0
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(184, 69%, 32%)
  • rgb(25, 131, 140)
  • #19838C

Title big size with words in bold

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

4.50012 3.07
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(184, 67%, 32%)
  • rgb(27, 131, 139)
  • #1B838B

Title big size with words in bold

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

4.5007 5.24
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(183, 65%, 32%)
  • rgb(29, 131, 138)
  • #1D838A

Title big size with words in bold

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

4.50088 7.24
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(188, 67%, 34%)
  • rgb(29, 130, 147)
  • #1D8293

Title big size with words in bold

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

4.50005 8.19
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(183, 63%, 32%)
  • rgb(31, 131, 137)
  • #1F8389

Title big size with words in bold

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

4.50063 9.19
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(188, 64%, 34%)
  • rgb(31, 130, 146)
  • #1F8292

Title big size with words in bold

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

4.50028 10.0
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(188, 62%, 34%)
  • rgb(33, 130, 145)
  • #218291

Title big size with words in bold

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

4.50008 11.96
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(181, 57%, 33%)
  • rgb(36, 131, 134)
  • #248386

Title big size with words in bold

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

4.50086 13.82
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(186, 57%, 35%)
  • rgb(38, 130, 142)
  • #26828E

Title big size with words in bold

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

4.50058 16.97
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(180, 54%, 33%)
  • rgb(39, 131, 132)
  • #278384

Title big size with words in bold

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

4.50067 16.5
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(186, 54%, 35%)
  • rgb(41, 130, 140)
  • #29828C

Title big size with words in bold

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

4.50062 19.95
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(184, 50%, 35%)
  • rgb(45, 130, 137)
  • #2D8289

Title big size with words in bold

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

4.50078 23.86
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(188, 47%, 37%)
  • rgb(50, 129, 142)
  • #32818E

Title big size with words in bold

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

4.50033 28.97
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(181, 36%, 37%)
  • rgb(61, 129, 131)
  • #3D8183

Title big size with words in bold

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

4.50039 39.62
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(188, 37%, 39%)
  • rgb(63, 128, 138)
  • #3F808A

Title big size with words in bold

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

4.50063 41.95
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(183, 32%, 39%)
  • rgb(68, 128, 132)
  • #448084

Title big size with words in bold

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

4.50002 46.78
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(180, 23%, 40%)
  • rgb(78, 127, 127)
  • #4E7F7F

Title big size with words in bold

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

4.5005 56.55
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(189, 26%, 41%)
  • rgb(79, 126, 135)
  • #4F7E87

Title big size with words in bold

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

4.50002 57.92
Not satisfied ?
Gimme a range of colors