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(19, 83%, 53%)
  • rgb(235, 102, 38)
  • #EB6626
  • 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.

3.25029

New contrast : 60 results (1,923,040 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • 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 43.57
  • 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 43.94
  • hsl(15, 91%, 44%)
  • rgb(217, 63, 10)
  • #D93F0A
  • 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.5009 44.33
  • hsl(16, 91%, 43%)
  • rgb(214, 67, 10)
  • #D6430A
  • 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 42.0
  • hsl(16, 91%, 43%)
  • rgb(214, 67, 9)
  • #D64309
  • 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 42.46
  • 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 38.21
  • hsl(19, 95%, 41%)
  • rgb(209, 73, 5)
  • #D14905
  • 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 42.71
  • hsl(20, 96%, 41%)
  • rgb(209, 73, 4)
  • #D14904
  • 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 43.32
  • hsl(19, 89%, 42%)
  • rgb(208, 74, 11)
  • #D04A0B
  • 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 39.43
  • hsl(19, 90%, 42%)
  • rgb(208, 74, 10)
  • #D04A0A
  • 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 39.91
  • hsl(18, 86%, 43%)
  • rgb(207, 75, 15)
  • #CF4B0F
  • 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.50025 37.75
  • hsl(18, 87%, 43%)
  • rgb(207, 75, 14)
  • #CF4B0E
  • 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 38.14
  • hsl(18, 84%, 43%)
  • rgb(206, 76, 17)
  • #CE4C11
  • 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.50042 37.14
  • hsl(18, 83%, 43%)
  • rgb(205, 77, 18)
  • #CD4D12
  • 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.50053 36.99
  • hsl(19, 82%, 43%)
  • rgb(204, 78, 19)
  • #CC4E13
  • 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 36.96
  • hsl(19, 83%, 43%)
  • rgb(204, 78, 18)
  • #CC4E12
  • 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 37.23
  • hsl(19, 83%, 43%)
  • rgb(203, 79, 18)
  • #CB4F12
  • 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 37.55
  • hsl(19, 84%, 43%)
  • rgb(203, 79, 17)
  • #CB4F11
  • 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 37.84
  • hsl(20, 85%, 42%)
  • rgb(202, 80, 16)
  • #CA5010
  • 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.50039 38.54
  • hsl(20, 86%, 42%)
  • rgb(202, 80, 15)
  • #CA500F
  • 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 38.88
  • hsl(21, 87%, 41%)
  • rgb(201, 81, 13)
  • #C9510D
  • 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.50037 40.04
  • hsl(21, 88%, 41%)
  • rgb(201, 81, 12)
  • #C9510C
  • 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 40.44
  • hsl(23, 92%, 40%)
  • rgb(200, 82, 8)
  • #C85208
  • 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 42.7
  • hsl(23, 93%, 40%)
  • rgb(200, 82, 7)
  • #C85207
  • 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 43.21
  • 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 37.34
  • hsl(15, 66%, 46%)
  • rgb(199, 82, 40)
  • #C75228
  • 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 37.95
  • hsl(16, 67%, 46%)
  • rgb(198, 83, 38)
  • #C65326
  • 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 38.6
  • hsl(18, 69%, 45%)
  • rgb(197, 84, 35)
  • #C55423
  • 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.5002 39.31
  • hsl(19, 72%, 44%)
  • rgb(196, 85, 31)
  • #C4551F
  • 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 40.12
  • hsl(21, 76%, 43%)
  • rgb(195, 86, 26)
  • #C3561A
  • 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 41.18
  • hsl(23, 82%, 41%)
  • rgb(194, 87, 19)
  • #C25713
  • 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 42.94
  • hsl(23, 83%, 41%)
  • rgb(194, 87, 18)
  • #C25712
  • 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 43.14
  • hsl(15, 60%, 47%)
  • rgb(194, 86, 47)
  • #C2562F
  • 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 41.66
  • hsl(17, 63%, 46%)
  • rgb(193, 87, 43)
  • #C1572B
  • 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.50098 42.61
  • hsl(19, 66%, 45%)
  • rgb(192, 88, 39)
  • #C05827
  • 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 43.49
  • hsl(21, 70%, 43%)
  • rgb(191, 89, 33)
  • #BF5921
  • 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.50046 44.4
  • 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 43.62
  • hsl(23, 76%, 42%)
  • rgb(190, 90, 25)
  • #BE5A19
  • 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 45.64
  • hsl(16, 57%, 47%)
  • rgb(190, 89, 51)
  • #BE5933
  • 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.50046 45.0
  • hsl(18, 60%, 46%)
  • rgb(189, 90, 46)
  • #BD5A2E
  • 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.19
  • hsl(22, 70%, 43%)
  • rgb(187, 92, 33)
  • #BB5C21
  • 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.50086 48.16
  • hsl(16, 53%, 47%)
  • rgb(187, 91, 56)
  • #BB5B38
  • 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 47.34
  • hsl(18, 56%, 46%)
  • rgb(186, 92, 51)
  • #BA5C33
  • 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 48.83
  • hsl(20, 60%, 45%)
  • rgb(185, 93, 45)
  • #B95D2D
  • 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 50.05
  • hsl(23, 66%, 43%)
  • rgb(184, 94, 37)
  • #B85E25
  • 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.50077 51.07
  • hsl(18, 55%, 46%)
  • rgb(183, 94, 53)
  • #B75E35
  • 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.5007 51.64
  • hsl(14, 47%, 48%)
  • rgb(182, 94, 65)
  • #B65E41
  • 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 50.62
  • hsl(24, 65%, 42%)
  • rgb(181, 96, 38)
  • #B56026
  • 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 54.02
  • hsl(23, 59%, 44%)
  • rgb(179, 97, 46)
  • #B3612E
  • 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.50058 55.96
  • hsl(16, 46%, 47%)
  • rgb(179, 96, 65)
  • #B36041
  • 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.50043 53.85
  • hsl(19, 50%, 46%)
  • rgb(178, 97, 59)
  • #B2613B
  • 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 56.05
  • hsl(22, 54%, 44%)
  • rgb(177, 98, 52)
  • #B16234
  • 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 57.73
  • hsl(21, 50%, 45%)
  • rgb(175, 99, 57)
  • #AF6339
  • 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.50006 59.36
  • hsl(14, 41%, 48%)
  • rgb(175, 98, 73)
  • #AF6249
  • 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 55.74
  • hsl(18, 37%, 47%)
  • rgb(166, 103, 76)
  • #A6674C
  • 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 64.92
  • hsl(21, 41%, 45%)
  • rgb(165, 104, 69)
  • #A56845
  • 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 67.91
  • hsl(18, 36%, 47%)
  • rgb(164, 104, 77)
  • #A4684D
  • 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.50084 66.84
  • hsl(22, 39%, 45%)
  • rgb(163, 105, 70)
  • #A36946
  • 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 69.83
  • hsl(20, 34%, 46%)
  • rgb(160, 106, 78)
  • #A06A4E
  • 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.50031 70.99
  • hsl(23, 33%, 45%)
  • rgb(156, 108, 77)
  • #9C6C4D
  • 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.50086 75.68
Not satisfied ?
Gimme a range of colors