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 : 45 results (402 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(180, 37%, 34%)
  • rgb(55, 122, 122)
  • #377A7A

Title big size with words in bold

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

4.67764 96.2
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(180, 27%, 37%)
  • rgb(69, 122, 122)
  • #457A7A

Title big size with words in bold

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

4.57949 94.89
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(180, 21%, 31%)
  • rgb(63, 97, 97)
  • #3F6161

Title big size with words in bold

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

6.39131 126.45
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(180, 13%, 33%)
  • rgb(74, 97, 97)
  • #4A6161

Title big size with words in bold

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

6.23057 126.1
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(180, 7%, 35%)
  • rgb(83, 97, 97)
  • #536161

Title big size with words in bold

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

6.08367 126.0
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(180, 2%, 37%)
  • rgb(93, 97, 97)
  • #5D6161

Title big size with words in bold

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

5.90626 125.99
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(180, 46%, 32%)
  • rgb(44, 122, 122)
  • #2C7A7A

Title big size with words in bold

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

4.7397 98.22
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(180, 59%, 30%)
  • rgb(31, 122, 122)
  • #1F7A7A

Title big size with words in bold

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

4.79583 101.95
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(180, 73%, 27%)
  • rgb(19, 122, 122)
  • #137A7A

Title big size with words in bold

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

4.83166 106.77
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(180, 89%, 25%)
  • rgb(7, 122, 122)
  • #077A7A

Title big size with words in bold

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

4.85378 112.83
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(144, 37%, 34%)
  • rgb(55, 122, 82)
  • #377A52

Title big size with words in bold

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

4.86068 125.77
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(141, 27%, 37%)
  • rgb(69, 122, 88)
  • #457A58

Title big size with words in bold

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

4.73308 119.99
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(144, 20%, 39%)
  • rgb(80, 122, 97)
  • #507A61

Title big size with words in bold

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

4.60119 112.48
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(138, 13%, 33%)
  • rgb(74, 97, 81)
  • #4A6151

Title big size with words in bold

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

6.33801 136.9
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(145, 7%, 35%)
  • rgb(83, 97, 89)
  • #536159

Title big size with words in bold

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

6.13722 131.24
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(120, 2%, 37%)
  • rgb(93, 97, 93)
  • #5D615D

Title big size with words in bold

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

5.93205 128.56
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(143, 46%, 32%)
  • rgb(44, 122, 74)
  • #2C7A4A

Title big size with words in bold

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

4.95608 133.64
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(143, 59%, 30%)
  • rgb(31, 122, 67)
  • #1F7A43

Title big size with words in bold

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

5.0403 141.53
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(143, 73%, 27%)
  • rgb(19, 122, 60)
  • #137A3C

Title big size with words in bold

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

5.10059 149.87
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(143, 89%, 25%)
  • rgb(7, 122, 52)
  • #077A34

Title big size with words in bold

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

5.14614 159.57
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(215, 37%, 41%)
  • rgb(67, 99, 147)
  • #436393

Title big size with words in bold

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

5.74031 102.6
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(217, 27%, 45%)
  • rgb(83, 107, 147)
  • #536B93

Title big size with words in bold

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

5.08035 94.89
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(215, 20%, 39%)
  • rgb(80, 97, 122)
  • #50617A

Title big size with words in bold

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

5.93449 112.48
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(219, 13%, 42%)
  • rgb(93, 103, 122)
  • #5D677A

Title big size with words in bold

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

5.36373 107.79
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(215, 7%, 44%)
  • rgb(105, 112, 122)
  • #69707A

Title big size with words in bold

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

4.70876 101.1
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(240, 2%, 37%)
  • rgb(93, 93, 97)
  • #5D5D61

Title big size with words in bold

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

6.17199 128.56
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(216, 47%, 45%)
  • rgb(62, 105, 172)
  • #3E69AC

Title big size with words in bold

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

5.17478 93.55
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(216, 58%, 48%)
  • rgb(51, 109, 197)
  • #336DC5

Title big size with words in bold

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

4.78266 90.67
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(252, 47%, 56%)
  • rgb(113, 91, 197)
  • #715BC5

Title big size with words in bold

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

4.93748 105.68
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(288, 37%, 49%)
  • rgb(154, 79, 172)
  • #9A4FAC

Title big size with words in bold

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

4.83688 112.1
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(288, 27%, 45%)
  • rgb(135, 83, 147)
  • #875393

Title big size with words in bold

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

5.36048 115.01
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(288, 20%, 47%)
  • rgb(137, 97, 147)
  • #896193

Title big size with words in bold

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

4.71379 100.91
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(289, 13%, 42%)
  • rgb(117, 93, 122)
  • #755D7A

Title big size with words in bold

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

5.4879 115.21
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(282, 7%, 44%)
  • rgb(117, 105, 122)
  • #75697A

Title big size with words in bold

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

4.87273 105.76
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(285, 2%, 37%)
  • rgb(96, 93, 97)
  • #605D61

Title big size with words in bold

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

6.11108 128.56
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(288, 47%, 45%)
  • rgb(151, 62, 172)
  • #973EAC

Title big size with words in bold

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

5.49175 131.23
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(288, 58%, 48%)
  • rgb(169, 51, 197)
  • #A933C5

Title big size with words in bold

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

4.98483 138.17
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(325, 37%, 49%)
  • rgb(172, 79, 133)
  • #AC4F85

Title big size with words in bold

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

4.69549 111.16
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(326, 27%, 45%)
  • rgb(147, 83, 119)
  • #935377

Title big size with words in bold

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

5.28103 121.2
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(326, 20%, 47%)
  • rgb(147, 97, 125)
  • #93617D

Title big size with words in bold

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

4.65634 106.2
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(328, 13%, 42%)
  • rgb(122, 93, 108)
  • #7A5D6C

Title big size with words in bold

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

5.47779 121.64
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(328, 7%, 44%)
  • rgb(122, 105, 114)
  • #7A6972

Title big size with words in bold

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

4.83332 109.72
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(345, 2%, 37%)
  • rgb(97, 93, 94)
  • #615D5E

Title big size with words in bold

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

6.11121 130.4
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(325, 47%, 45%)
  • rgb(172, 62, 126)
  • #AC3E7E

Title big size with words in bold

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

5.2808 131.75
  • hsl(0, 0%, 97%)
  • rgb(248, 248, 248)
  • #F8F8F8
  • hsl(324, 58%, 48%)
  • rgb(197, 51, 137)
  • #C53389

Title big size with words in bold

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

4.69816 128.81
Not satisfied ?
Gimme valid colors and very close to initial color