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 : 30 results (270 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(19, 72%, 42%)
  • rgb(185, 80, 30)
  • #B9501E
  • 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.96563 51.45
  • hsl(19, 58%, 45%)
  • rgb(185, 92, 48)
  • #B95C30
  • 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.52938 50.0
  • hsl(19, 46%, 42%)
  • rgb(160, 91, 59)
  • #A05B3B
  • 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.17968 74.53
  • hsl(19, 36%, 45%)
  • rgb(160, 102, 74)
  • #A0664A
  • 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.67274 72.13
  • hsl(18, 27%, 41%)
  • rgb(135, 94, 76)
  • #875E4C
  • 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.62155 98.15
  • hsl(17, 20%, 44%)
  • rgb(135, 103, 90)
  • #87675A
  • 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.09967 95.07
  • hsl(18, 13%, 46%)
  • rgb(135, 113, 103)
  • #877167
  • 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.57707 89.8
  • hsl(12, 6%, 40%)
  • rgb(110, 99, 96)
  • #6E6360
  • 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.80649 120.69
  • hsl(11, 2%, 42%)
  • rgb(110, 106, 105)
  • #6E6A69
  • 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.34542 118.22
  • hsl(19, 88%, 38%)
  • rgb(185, 68, 11)
  • #B9440B
  • 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.39217 56.88
  • hsl(54, 71%, 25%)
  • rgb(110, 101, 18)
  • #6E6512
  • 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.94361 125.17
  • hsl(54, 59%, 27%)
  • rgb(110, 102, 28)
  • #6E661C
  • 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.8654 125.02
  • hsl(54, 45%, 29%)
  • rgb(110, 104, 41)
  • #6E6829
  • 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.71406 125.0
  • hsl(55, 37%, 31%)
  • rgb(110, 105, 50)
  • #6E6932
  • 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.6305 124.96
  • hsl(53, 27%, 33%)
  • rgb(110, 105, 62)
  • #6E693E
  • 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.59524 124.7
  • hsl(51, 20%, 35%)
  • rgb(110, 105, 73)
  • #6E6949
  • 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.55579 124.08
  • hsl(53, 13%, 38%)
  • rgb(110, 107, 84)
  • #6E6B54
  • 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.39278 122.89
  • hsl(51, 6%, 40%)
  • rgb(110, 108, 96)
  • #6E6C60
  • 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.28046 120.69
  • hsl(60, 2%, 42%)
  • rgb(110, 110, 105)
  • #6E6E69
  • 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.12526 118.21
  • hsl(54, 89%, 22%)
  • rgb(110, 101, 6)
  • #6E6506
  • 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.9539 125.7
  • hsl(91, 71%, 25%)
  • rgb(62, 110, 18)
  • #3E6E12
  • 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.

6.09768 173.08
  • hsl(91, 59%, 27%)
  • rgb(67, 110, 28)
  • #436E1C
  • 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.

6.02444 168.01
  • hsl(93, 45%, 29%)
  • rgb(71, 110, 41)
  • #476E29
  • 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.94849 163.99
  • hsl(91, 37%, 31%)
  • rgb(78, 110, 50)
  • #4E6E32
  • 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.83273 156.97
  • hsl(92, 27%, 33%)
  • rgb(84, 110, 62)
  • #546E3E
  • 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.71134 150.79
  • hsl(94, 20%, 35%)
  • rgb(89, 110, 73)
  • #596E49
  • 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.59799 145.32
  • hsl(90, 13%, 38%)
  • rgb(97, 110, 84)
  • #616E54
  • 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.43103 136.27
  • hsl(98, 6%, 40%)
  • rgb(101, 110, 96)
  • #656E60
  • 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.31293 130.27
  • hsl(95, 2%, 42%)
  • rgb(107, 110, 105)
  • #6B6E69
  • 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.17303 121.55
  • hsl(91, 89%, 22%)
  • rgb(55, 110, 6)
  • #376E06
  • 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.

6.18475 180.33
Not satisfied ?