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, 53%, 43%)
  • rgb(170, 51, 51)
  • #AA3333
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

2.83192

New contrast : 29 results (402 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(0, 92%, 63%)
  • rgb(248, 75, 75)
  • #F84B4B
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

5.34671 79.49
  • hsl(0, 67%, 60%)
  • rgb(222, 88, 88)
  • #DE5858
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.94645 62.31
  • hsl(0, 45%, 57%)
  • rgb(196, 98, 98)
  • #C46262
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.62024 60.84
  • hsl(0, 40%, 61%)
  • rgb(196, 117, 117)
  • #C47575
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

5.38986 83.99
  • hsl(0, 23%, 56%)
  • rgb(170, 119, 119)
  • #AA7777
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.92156 85.67
  • hsl(0, 93%, 58%)
  • rgb(248, 49, 49)
  • #F83131
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.7994 78.0
  • hsl(0, 94%, 53%)
  • rgb(248, 26, 26)
  • #F81A1A
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.518 76.25
  • hsl(35, 53%, 43%)
  • rgb(170, 122, 51)
  • #AA7A33
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.85713 71.0
  • hsl(71, 54%, 36%)
  • rgb(125, 145, 43)
  • #7D912B
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

5.22198 90.41
  • hsl(72, 42%, 39%)
  • rgb(127, 145, 58)
  • #7F913A
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

5.27162 90.91
  • hsl(72, 33%, 42%)
  • rgb(130, 145, 72)
  • #829148
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

5.34108 91.89
  • hsl(72, 24%, 45%)
  • rgb(133, 145, 87)
  • #859157
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

5.4219 93.85
  • hsl(72, 17%, 48%)
  • rgb(136, 145, 101)
  • #889165
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

5.50941 97.13
  • hsl(72, 11%, 51%)
  • rgb(139, 145, 116)
  • #8B9174
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

5.61041 102.45
  • hsl(72, 6%, 53%)
  • rgb(142, 145, 130)
  • #8E9182
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

5.71781 109.19
  • hsl(0, 0%, 56%)
  • rgb(145, 145, 145)
  • #919191
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

5.84081 118.06
  • hsl(71, 66%, 40%)
  • rgb(144, 170, 34)
  • #90AA22
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

6.97678 118.47
  • hsl(107, 53%, 43%)
  • rgb(76, 170, 51)
  • #4CAA33
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

6.22829 94.9
  • hsl(143, 53%, 43%)
  • rgb(51, 170, 97)
  • #33AA61
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

6.19171 46.0
  • hsl(178, 53%, 43%)
  • rgb(51, 170, 168)
  • #33AAA8
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

6.53606 117.0
  • hsl(215, 70%, 56%)
  • rgb(67, 131, 222)
  • #4383DE
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.85637 164.11
  • hsl(214, 50%, 53%)
  • rgb(78, 128, 196)
  • #4E80C4
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.566 139.7
  • hsl(214, 45%, 57%)
  • rgb(98, 139, 196)
  • #628BC4
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

5.26796 149.73
  • hsl(214, 28%, 53%)
  • rgb(102, 131, 170)
  • #6683AA
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.72661 123.48
  • hsl(214, 93%, 58%)
  • rgb(49, 133, 248)
  • #3185F8
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

5.12032 185.91
  • hsl(323, 85%, 59%)
  • rgb(240, 61, 170)
  • #F03DAA
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

5.21845 126.6
  • hsl(250, 62%, 65%)
  • rgb(130, 111, 222)
  • #826FDE
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.62649 172.72
  • hsl(250, 40%, 61%)
  • rgb(131, 117, 196)
  • #8375C4
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.65187 148.53
  • hsl(250, 23%, 56%)
  • rgb(128, 119, 170)
  • #8077AA
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.50315 124.41
Not satisfied ?
Gimme valid colors and very close to initial color