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(120, 100%, 20%)
  • rgb(0, 102, 0)
  • #006600
  • 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.54264

New contrast : 29 results (1,075,840 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(123, 87%, 30%)
  • rgb(10, 146, 19)
  • #0A9213
  • 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.50038 45.31
  • hsl(124, 87%, 30%)
  • rgb(10, 146, 20)
  • #0A9214
  • 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.50099 45.5
  • hsl(122, 85%, 30%)
  • rgb(11, 146, 17)
  • #0B9211
  • 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.5004 45.05
  • hsl(123, 85%, 30%)
  • rgb(11, 146, 18)
  • #0B9212
  • 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.50096 45.2
  • hsl(120, 84%, 30%)
  • rgb(12, 146, 14)
  • #0C920E
  • 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.50009 44.76
  • hsl(121, 84%, 30%)
  • rgb(12, 146, 15)
  • #0C920F
  • 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.50058 44.86
  • hsl(119, 85%, 30%)
  • rgb(13, 146, 11)
  • #0D920B
  • 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.50006 44.6
  • hsl(119, 84%, 30%)
  • rgb(13, 146, 12)
  • #0D920C
  • 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.50048 44.67
  • hsl(120, 83%, 31%)
  • rgb(13, 146, 13)
  • #0D920D
  • 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.50092 44.74
  • hsl(117, 89%, 30%)
  • rgb(14, 146, 8)
  • #0E9208
  • 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.50027 44.55
  • hsl(117, 88%, 30%)
  • rgb(14, 146, 9)
  • #0E9209
  • 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.50065 44.59
  • hsl(115, 94%, 29%)
  • rgb(15, 146, 4)
  • #0F9204
  • 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.50017 44.58
  • hsl(115, 93%, 29%)
  • rgb(15, 146, 5)
  • #0F9205
  • 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.50055 44.59
  • hsl(116, 92%, 29%)
  • rgb(15, 146, 6)
  • #0F9206
  • 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.50094 44.61
  • hsl(122, 64%, 34%)
  • rgb(31, 145, 36)
  • #1F9124
  • 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.50041 53.83
  • hsl(120, 63%, 34%)
  • rgb(32, 145, 33)
  • #209121
  • 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.5001 52.92
  • hsl(118, 65%, 34%)
  • rgb(33, 145, 30)
  • #21911E
  • 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.50013 52.23
  • hsl(116, 68%, 33%)
  • rgb(34, 145, 27)
  • #22911B
  • 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.5005 51.74
  • hsl(124, 54%, 36%)
  • rgb(42, 144, 50)
  • #2A9032
  • 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.50034 64.89
  • hsl(120, 53%, 36%)
  • rgb(44, 144, 45)
  • #2C902D
  • 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.50076 63.03
  • hsl(118, 54%, 36%)
  • rgb(45, 144, 42)
  • #2D902A
  • 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.50078 62.08
  • hsl(115, 58%, 35%)
  • rgb(46, 144, 38)
  • #2E9026
  • 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.50003 60.94
  • hsl(123, 46%, 38%)
  • rgb(52, 143, 57)
  • #348F39
  • 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.50057 73.36
  • hsl(120, 45%, 38%)
  • rgb(53, 143, 54)
  • #358F36
  • 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.50018 72.13
  • hsl(118, 47%, 38%)
  • rgb(54, 143, 51)
  • #368F33
  • 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.50019 71.07
  • hsl(115, 49%, 37%)
  • rgb(55, 143, 48)
  • #378F30
  • 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.5006 70.2
  • hsl(121, 35%, 40%)
  • rgb(67, 141, 69)
  • #438D45
  • 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.50098 88.31
  • hsl(118, 36%, 40%)
  • rgb(68, 141, 66)
  • #448D42
  • 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.50086 87.12
  • hsl(124, 32%, 41%)
  • rgb(72, 140, 77)
  • #488C4D
  • 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.50045 96.0
Not satisfied ?