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 : 29 results (336 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(19, 71%, 30%)
  • rgb(135, 58, 22)
  • #873A16
  • 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.93355 102.89
  • hsl(19, 59%, 33%)
  • rgb(135, 66, 34)
  • #874222
  • 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.41378 101.53
  • hsl(18, 45%, 29%)
  • rgb(110, 62, 41)
  • #6E3E29
  • 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.80847 126.35
  • hsl(19, 37%, 31%)
  • rgb(110, 70, 50)
  • #6E4632
  • 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.12341 125.66
  • hsl(17, 27%, 33%)
  • rgb(110, 76, 62)
  • #6E4C3E
  • 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.59127 125.08
  • hsl(18, 13%, 29%)
  • rgb(85, 71, 65)
  • #554741
  • 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.88368 150.15
  • hsl(10, 6%, 31%)
  • rgb(85, 76, 74)
  • #554C4A
  • 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.33691 149.57
  • hsl(0, 2%, 32%)
  • rgb(85, 81, 81)
  • #555151
  • 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.82984 148.95
  • hsl(19, 88%, 28%)
  • rgb(135, 50, 8)
  • #873208
  • 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.43398 105.3
  • hsl(54, 71%, 19%)
  • rgb(85, 78, 14)
  • #554E0E
  • 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.45971 150.41
  • hsl(53, 58%, 20%)
  • rgb(85, 78, 22)
  • #554E16
  • 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.44187 150.27
  • hsl(54, 46%, 22%)
  • rgb(85, 80, 31)
  • #55501F
  • 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.22398 150.16
  • hsl(54, 38%, 24%)
  • rgb(85, 81, 38)
  • #555126
  • 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.10429 150.14
  • hsl(53, 27%, 26%)
  • rgb(85, 81, 48)
  • #555130
  • 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.0586 150.12
  • hsl(51, 20%, 27%)
  • rgb(85, 81, 56)
  • #555138
  • 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.01424 150.05
  • hsl(51, 13%, 29%)
  • rgb(85, 82, 65)
  • #555241
  • 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.86662 149.83
  • hsl(49, 6%, 31%)
  • rgb(85, 83, 74)
  • #55534A
  • 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.71366 149.41
  • hsl(60, 2%, 32%)
  • rgb(85, 85, 81)
  • #555551
  • 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.48803 148.89
  • hsl(54, 88%, 17%)
  • rgb(85, 78, 5)
  • #554E05
  • 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.47387 150.73
  • hsl(91, 71%, 19%)
  • rgb(48, 85, 14)
  • #30550E
  • 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.63694 187.18
  • hsl(92, 58%, 20%)
  • rgb(51, 85, 22)
  • #335516
  • 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.56532 184.09
  • hsl(93, 46%, 22%)
  • rgb(55, 85, 31)
  • #37551F
  • 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.46218 180.05
  • hsl(91, 38%, 24%)
  • rgb(60, 85, 38)
  • #3C5526
  • 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.33492 175.05
  • hsl(92, 27%, 26%)
  • rgb(65, 85, 48)
  • #415530
  • 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.18125 170.05
  • hsl(95, 20%, 27%)
  • rgb(68, 85, 56)
  • #445538
  • 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.06981 166.99
  • hsl(90, 13%, 29%)
  • rgb(75, 85, 65)
  • #4B5541
  • 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.85076 159.81
  • hsl(98, 6%, 31%)
  • rgb(78, 85, 74)
  • #4E554A
  • 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.71428 156.43
  • hsl(105, 2%, 32%)
  • rgb(82, 85, 81)
  • #525551
  • 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.56216 151.93
  • hsl(92, 88%, 17%)
  • rgb(42, 85, 5)
  • #2A5505
  • 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.74986 193.36
Not satisfied ?
Gimme valid colors and very close to initial color