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%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(180, 47%, 56%)
  • rgb(91, 197, 197)
  • #5BC5C5

Title big size with words in bold

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

1.93148

New contrast : 18 results (5,701,046 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(184, 19%, 40%)
  • rgb(83, 121, 124)
  • #53797C

Title big size with words in bold

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

4.50037 93.92
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(181, 22%, 39%)
  • rgb(78, 122, 123)
  • #4E7A7B

Title big size with words in bold

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

4.5004 93.95
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(178, 31%, 37%)
  • rgb(65, 124, 123)
  • #417C7B

Title big size with words in bold

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

4.50033 93.29
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(178, 37%, 35%)
  • rgb(57, 125, 123)
  • #397D7B

Title big size with words in bold

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

4.50075 93.51
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(180, 49%, 33%)
  • rgb(43, 126, 127)
  • #2B7E7F

Title big size with words in bold

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

4.50065 93.27
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(175, 53%, 32%)
  • rgb(39, 127, 120)
  • #277F78

Title big size with words in bold

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

4.50095 97.96
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(177, 56%, 31%)
  • rgb(35, 127, 123)
  • #237F7B

Title big size with words in bold

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

4.50096 97.39
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(184, 60%, 32%)
  • rgb(33, 126, 134)
  • #217E86

Title big size with words in bold

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

4.50093 92.95
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(178, 59%, 31%)
  • rgb(32, 127, 125)
  • #207F7D

Title big size with words in bold

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

4.50088 97.32
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(180, 65%, 30%)
  • rgb(27, 127, 128)
  • #1B7F80

Title big size with words in bold

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

4.50011 97.74
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(181, 67%, 30%)
  • rgb(25, 127, 129)
  • #197F81

Title big size with words in bold

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

4.50008 98.13
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(176, 72%, 29%)
  • rgb(20, 128, 121)
  • #148079

Title big size with words in bold

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

4.50067 104.02
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(182, 73%, 29%)
  • rgb(20, 127, 131)
  • #147F83

Title big size with words in bold

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

4.50095 99.61
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(177, 79%, 28%)
  • rgb(15, 128, 123)
  • #0F807B

Title big size with words in bold

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

4.50017 105.45
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(178, 88%, 26%)
  • rgb(8, 128, 125)
  • #08807D

Title big size with words in bold

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

4.50003 108.39
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(183, 91%, 27%)
  • rgb(6, 127, 135)
  • #067F87

Title big size with words in bold

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

4.50083 106.13
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(179, 93%, 25%)
  • rgb(4, 128, 126)
  • #04807E

Title big size with words in bold

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

4.50006 110.38
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(184, 97%, 27%)
  • rgb(2, 127, 136)
  • #027F88

Title big size with words in bold

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

4.50032 108.43
Not satisfied ?
Gimme a range of colors