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(13, 39%, 46%)
  • rgb(165, 92, 71)
  • #A55C47
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

2.87675

New contrast : 26 results (347 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(13, 45%, 53%)
  • rgb(191, 106, 82)
  • #BF6A52
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.67879 27.87
  • hsl(13, 30%, 49%)
  • rgb(165, 105, 87)
  • #A56957
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.24227 18.46
  • hsl(12, 49%, 50%)
  • rgb(191, 91, 64)
  • #BF5B40
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.26109 25.83
  • hsl(12, 68%, 52%)
  • rgb(217, 86, 50)
  • #D95632
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.63027 50.8
  • hsl(13, 77%, 48%)
  • rgb(217, 69, 28)
  • #D9451C
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.28332 36.58
  • hsl(12, 93%, 43%)
  • rgb(217, 52, 7)
  • #D93407
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.02864 57.04
  • hsl(49, 39%, 46%)
  • rgb(165, 148, 71)
  • #A59447
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

4.72006 56.0
  • hsl(84, 39%, 46%)
  • rgb(126, 165, 71)
  • #7EA547
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

5.01535 69.08
  • hsl(120, 39%, 46%)
  • rgb(71, 165, 72)
  • #47A548
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

4.59518 76.15
  • hsl(156, 39%, 46%)
  • rgb(71, 165, 128)
  • #47A580
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

4.74382 63.53
  • hsl(192, 39%, 46%)
  • rgb(71, 146, 165)
  • #4792A5
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

4.0359 54.0
  • hsl(227, 62%, 60%)
  • rgb(93, 118, 217)
  • #5D76D9
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.44713 140.21
  • hsl(227, 41%, 57%)
  • rgb(100, 119, 191)
  • #6477BF
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.36138 113.78
  • hsl(228, 25%, 52%)
  • rgb(104, 116, 165)
  • #6874A5
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.15503 85.15
  • hsl(228, 87%, 63%)
  • rgb(82, 113, 243)
  • #5271F3
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.41734 165.41
  • hsl(321, 91%, 52%)
  • rgb(245, 25, 165)
  • #F519A5
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.79201 101.38
  • hsl(263, 62%, 60%)
  • rgb(142, 93, 217)
  • #8E5DD9
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.21483 145.81
  • hsl(263, 41%, 57%)
  • rgb(136, 100, 191)
  • #8864BF
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.14954 119.44
  • hsl(263, 25%, 52%)
  • rgb(128, 104, 165)
  • #8068A5
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.02638 92.12
  • hsl(262, 87%, 63%)
  • rgb(143, 82, 243)
  • #8F52F3
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.18158 171.87
  • hsl(298, 45%, 53%)
  • rgb(189, 82, 191)
  • #BD52BF
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.49091 120.3
  • hsl(299, 30%, 49%)
  • rgb(164, 87, 165)
  • #A457A5
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.05623 94.0
  • hsl(299, 49%, 50%)
  • rgb(189, 64, 191)
  • #BD40BF
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.16822 119.81
  • hsl(298, 68%, 52%)
  • rgb(214, 50, 217)
  • #D632D9
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.62339 146.68
  • hsl(299, 77%, 48%)
  • rgb(214, 28, 217)
  • #D61CD9
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.42568 143.7
  • hsl(299, 93%, 43%)
  • rgb(214, 7, 217)
  • #D607D9
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.33321 137.78
Not satisfied ?