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(10, 100%, 45%)
  • rgb(234, 40, 0)
  • #EA2800
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFF

Title big size with words in bold

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

4.37318

New contrast : 61 results (503,316 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(6, 97%, 46%)
  • rgb(234, 28, 3)
  • #EA1C03
  • 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.

4.50074 11.94
  • hsl(6, 96%, 46%)
  • rgb(234, 28, 4)
  • #EA1C04
  • 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.

4.50032 11.85
  • hsl(5, 89%, 48%)
  • rgb(232, 34, 13)
  • #E8220D
  • 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.

4.50085 12.54
  • hsl(5, 88%, 48%)
  • rgb(232, 34, 14)
  • #E8220E
  • 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.

4.50034 13.61
  • hsl(7, 93%, 46%)
  • rgb(231, 37, 8)
  • #E72508
  • 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.

4.50072 7.71
  • hsl(7, 92%, 47%)
  • rgb(231, 37, 9)
  • #E72509
  • 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.

4.5003 8.77
  • hsl(9, 94%, 46%)
  • rgb(229, 42, 7)
  • #E52A07
  • 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.

4.50078 6.09
  • hsl(9, 93%, 46%)
  • rgb(229, 42, 8)
  • #E52A08
  • 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.

4.50036 7.34
  • hsl(8, 87%, 47%)
  • rgb(228, 44, 15)
  • #E42C0F
  • 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.

4.50067 14.77
  • hsl(7, 86%, 47%)
  • rgb(228, 44, 16)
  • #E42C10
  • 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.

4.50011 15.8
  • hsl(8, 85%, 48%)
  • rgb(227, 46, 18)
  • #E32E12
  • 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.

4.50092 17.87
  • hsl(7, 84%, 48%)
  • rgb(227, 46, 19)
  • #E32E13
  • 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.

4.50028 18.88
  • hsl(8, 84%, 48%)
  • rgb(226, 48, 19)
  • #E23013
  • 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.

4.50071 19.0
  • hsl(8, 83%, 48%)
  • rgb(226, 48, 20)
  • #E23014
  • 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.

4.50003 20.0
  • hsl(9, 85%, 47%)
  • rgb(225, 50, 17)
  • #E13211
  • 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.

4.50079 17.31
  • hsl(9, 85%, 47%)
  • rgb(225, 50, 18)
  • #E13212
  • 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.

4.50017 18.27
  • hsl(5, 75%, 50%)
  • rgb(224, 51, 34)
  • #E03322
  • 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.

4.50056 34.1
  • hsl(11, 89%, 46%)
  • rgb(224, 52, 12)
  • #E0340C
  • 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.

4.50068 13.49
  • hsl(11, 89%, 46%)
  • rgb(224, 52, 13)
  • #E0340D
  • 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.

4.50019 14.3
  • hsl(6, 75%, 49%)
  • rgb(223, 53, 31)
  • #DF351F
  • 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.

4.50004 31.3
  • hsl(14, 99%, 43%)
  • rgb(223, 54, 1)
  • #DF3601
  • 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.

4.50093 11.22
  • hsl(14, 98%, 44%)
  • rgb(223, 54, 2)
  • #DF3602
  • 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.

4.50051 11.24
  • hsl(13, 97%, 44%)
  • rgb(223, 54, 3)
  • #DF3603
  • 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.

4.50009 11.29
  • hsl(9, 79%, 48%)
  • rgb(222, 55, 25)
  • #DE3719
  • 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.

4.50023 25.85
  • hsl(12, 88%, 46%)
  • rgb(221, 57, 14)
  • #DD390E
  • 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.

4.50062 17.61
  • hsl(12, 87%, 46%)
  • rgb(221, 57, 15)
  • #DD390F
  • 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.

4.50008 18.26
  • hsl(9, 76%, 48%)
  • rgb(220, 58, 29)
  • #DC3A1D
  • 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.

4.50055 30.18
  • hsl(13, 86%, 46%)
  • rgb(219, 60, 16)
  • #DB3C10
  • 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.

4.5008 20.58
  • hsl(12, 85%, 46%)
  • rgb(219, 60, 17)
  • #DB3C11
  • 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.

4.50021 21.21
  • hsl(10, 76%, 48%)
  • rgb(218, 61, 29)
  • #DA3D1D
  • 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.

4.50033 30.92
  • hsl(8, 70%, 49%)
  • rgb(217, 62, 37)
  • #D93E25
  • 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.

4.50054 38.35
  • hsl(15, 90%, 44%)
  • rgb(217, 63, 11)
  • #D93F0B
  • 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.

4.50047 20.48
  • hsl(14, 89%, 44%)
  • rgb(217, 63, 12)
  • #D93F0C
  • 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.

4.50001 20.79
  • hsl(6, 68%, 50%)
  • rgb(216, 63, 43)
  • #D83F2B
  • 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.

4.50096 44.11
  • hsl(12, 80%, 47%)
  • rgb(216, 64, 24)
  • #D84018
  • 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.

4.50032 27.94
  • hsl(10, 74%, 48%)
  • rgb(215, 65, 32)
  • #D74120
  • 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.

4.50027 34.63
  • hsl(9, 69%, 49%)
  • rgb(214, 66, 38)
  • #D64226
  • 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.

4.50016 40.09
  • hsl(14, 82%, 45%)
  • rgb(213, 68, 20)
  • #D54414
  • 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.

4.50047 27.45
  • hsl(7, 65%, 50%)
  • rgb(212, 68, 46)
  • #D4442E
  • 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.

4.50092 47.72
  • hsl(13, 77%, 46%)
  • rgb(212, 69, 27)
  • #D4451B
  • 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.

4.50018 32.21
  • hsl(6, 63%, 51%)
  • rgb(210, 70, 52)
  • #D24634
  • 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.

4.50066 53.58
  • hsl(12, 71%, 48%)
  • rgb(210, 71, 35)
  • #D24723
  • 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.

4.50075 38.9
  • hsl(11, 69%, 48%)
  • rgb(209, 72, 38)
  • #D14826
  • 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.

4.50065 41.6
  • hsl(6, 61%, 51%)
  • rgb(208, 72, 56)
  • #D04838
  • 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.

4.50061 57.57
  • hsl(11, 67%, 48%)
  • rgb(208, 73, 40)
  • #D04928
  • 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.

4.50099 43.51
  • hsl(11, 66%, 48%)
  • rgb(207, 74, 42)
  • #CF4A2A
  • 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.

4.50062 45.42
  • hsl(11, 65%, 48%)
  • rgb(206, 75, 43)
  • #CE4B2B
  • 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.

4.50095 46.48
  • hsl(11, 64%, 48%)
  • rgb(205, 76, 44)
  • #CD4C2C
  • 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.

4.50067 47.54
  • hsl(6, 58%, 51%)
  • rgb(204, 76, 60)
  • #CC4C3C
  • 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.

4.50016 61.77
  • hsl(7, 57%, 51%)
  • rgb(203, 77, 60)
  • #CB4D3C
  • 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.

4.50054 61.87
  • hsl(7, 57%, 51%)
  • rgb(202, 78, 60)
  • #CA4E3C
  • 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.

4.50034 61.98
  • hsl(13, 64%, 48%)
  • rgb(202, 79, 44)
  • #CA4F2C
  • 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.

4.50057 48.16
  • hsl(14, 64%, 47%)
  • rgb(201, 80, 43)
  • #C9502B
  • 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.

4.50079 47.56
  • hsl(8, 56%, 50%)
  • rgb(200, 80, 59)
  • #C8503B
  • 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.

4.50017 61.28
  • hsl(14, 65%, 47%)
  • rgb(200, 81, 42)
  • #C8512A
  • 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.

4.50038 46.98
  • hsl(9, 55%, 50%)
  • rgb(199, 81, 58)
  • #C7513A
  • 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.

4.50017 60.47
  • hsl(11, 56%, 49%)
  • rgb(197, 83, 55)
  • #C55337
  • 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.

4.50013 58.01
  • hsl(14, 59%, 48%)
  • rgb(195, 85, 50)
  • #C35532
  • 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.

4.50076 53.92
  • hsl(12, 53%, 49%)
  • rgb(192, 87, 58)
  • #C0573A
  • 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.

4.50096 60.81
  • hsl(14, 55%, 48%)
  • rgb(191, 88, 55)
  • #BF5837
  • 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.

4.50032 58.23
  • hsl(14, 51%, 48%)
  • rgb(188, 90, 60)
  • #BC5A3C
  • 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.

4.50065 62.46
Not satisfied ?
Gimme a range of colors