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, 90%, 44%)
  • rgb(217, 11, 11)
  • #D90B0B
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

5.24601

New contrast : 35 results (384 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(0, 89%, 34%)
  • rgb(167, 9, 9)
  • #A70909
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

7.81798 50.0
  • hsl(0, 73%, 37%)
  • rgb(167, 25, 25)
  • #A71919
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

7.51023 49.26
  • hsl(0, 59%, 34%)
  • rgb(142, 36, 36)
  • #8E2424
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

8.64916 73.1
  • hsl(0, 47%, 37%)
  • rgb(142, 50, 50)
  • #8E3232
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

7.91719 67.18
  • hsl(0, 37%, 40%)
  • rgb(142, 64, 64)
  • #8E4040
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

7.10048 49.88
  • hsl(0, 28%, 35%)
  • rgb(117, 65, 65)
  • #754141
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

8.11177 88.15
  • hsl(0, 21%, 37%)
  • rgb(117, 75, 75)
  • #754B4B
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

7.33135 78.06
  • hsl(0, 13%, 31%)
  • rgb(92, 70, 70)
  • #5C4646
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

8.67925 115.54
  • hsl(0, 8%, 33%)
  • rgb(92, 77, 77)
  • #5C4D4D
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

8.00373 111.28
  • hsl(0, 2%, 35%)
  • rgb(92, 88, 88)
  • #5C5858
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

7.01903 101.32
  • hsl(34, 88%, 24%)
  • rgb(117, 71, 7)
  • #754707
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

7.89253 92.21
  • hsl(35, 74%, 26%)
  • rgb(117, 76, 17)
  • #754C11
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

7.50468 89.84
  • hsl(35, 59%, 28%)
  • rgb(117, 81, 30)
  • #75511E
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

7.11358 86.63
  • hsl(35, 48%, 24%)
  • rgb(92, 67, 32)
  • #5C4320
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

9.21545 120.92
  • hsl(35, 38%, 26%)
  • rgb(92, 71, 41)
  • #5C4729
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

8.79258 119.58
  • hsl(33, 28%, 28%)
  • rgb(92, 74, 51)
  • #5C4A33
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

8.45963 117.91
  • hsl(34, 21%, 29%)
  • rgb(92, 78, 59)
  • #5C4E3B
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

8.05224 115.52
  • hsl(32, 13%, 31%)
  • rgb(92, 82, 70)
  • #5C5246
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

7.6352 111.6
  • hsl(31, 8%, 33%)
  • rgb(92, 85, 77)
  • #5C554D
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

7.33848 108.02
  • hsl(72, 89%, 19%)
  • rgb(74, 92, 5)
  • #4A5C05
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

7.43568 133.76
  • hsl(73, 75%, 20%)
  • rgb(74, 92, 13)
  • #4A5C0D
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

7.42616 133.75
  • hsl(73, 60%, 22%)
  • rgb(77, 92, 23)
  • #4D5C17
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

7.34577 130.27
  • hsl(74, 48%, 24%)
  • rgb(78, 92, 32)
  • #4E5C20
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

7.30268 128.96
  • hsl(72, 38%, 26%)
  • rgb(81, 92, 41)
  • #515C29
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

7.2097 125.08
  • hsl(74, 28%, 28%)
  • rgb(82, 92, 51)
  • #525C33
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

7.14911 123.09
  • hsl(74, 21%, 29%)
  • rgb(84, 92, 59)
  • #545C3B
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

7.06839 119.6
  • hsl(108, 89%, 19%)
  • rgb(21, 92, 5)
  • #155C05
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

8.18734 191.28
  • hsl(108, 75%, 20%)
  • rgb(28, 92, 13)
  • #1C5C0D
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

8.12051 183.9
  • hsl(108, 60%, 22%)
  • rgb(36, 92, 23)
  • #245C17
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

8.02064 175.4
  • hsl(107, 48%, 24%)
  • rgb(44, 92, 32)
  • #2C5C20
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

7.89827 166.76
  • hsl(107, 38%, 26%)
  • rgb(52, 92, 41)
  • #345C29
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

7.75225 157.86
  • hsl(108, 28%, 28%)
  • rgb(59, 92, 51)
  • #3B5C33
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

7.59597 149.61
  • hsl(107, 21%, 29%)
  • rgb(66, 92, 59)
  • #425C3B
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

7.43189 140.96
  • hsl(109, 13%, 31%)
  • rgb(74, 92, 70)
  • #4A5C46
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

7.21534 129.81
  • hsl(104, 8%, 33%)
  • rgb(81, 92, 77)
  • #515C4D
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

7.02837 119.27
Not satisfied ?
Gimme valid colors and very close to initial color