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(330, 100%, 66%)
  • rgb(255, 82, 167)
  • #FF52A7
  • hsl(330, 100%, 45%)
  • rgb(230, 0, 113)
  • #E60071

Title big size with words in bold

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

1.52441

New contrast : 21 results (240 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(330, 100%, 66%)
  • rgb(255, 82, 167)
  • #FF52A7
  • hsl(330, 100%, 25%)
  • rgb(130, 0, 63)
  • #82003F

Title big size with words in bold

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

3.47211 104.0
  • hsl(330, 100%, 66%)
  • rgb(255, 82, 167)
  • #FF52A7
  • hsl(331, 81%, 28%)
  • rgb(130, 13, 69)
  • #820D45

Title big size with words in bold

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

3.3531 102.69
  • hsl(330, 100%, 66%)
  • rgb(255, 82, 167)
  • #FF52A7
  • hsl(330, 66%, 30%)
  • rgb(130, 26, 77)
  • #821A4D

Title big size with words in bold

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

3.18359 100.96
  • hsl(330, 100%, 66%)
  • rgb(255, 82, 167)
  • #FF52A7
  • hsl(330, 54%, 26%)
  • rgb(105, 31, 68)
  • #691F44

Title big size with words in bold

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

3.73217 126.29
  • hsl(330, 100%, 66%)
  • rgb(255, 82, 167)
  • #FF52A7
  • hsl(331, 42%, 28%)
  • rgb(105, 42, 72)
  • #692A48

Title big size with words in bold

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

3.46444 124.89
  • hsl(330, 100%, 66%)
  • rgb(255, 82, 167)
  • #FF52A7
  • hsl(330, 34%, 30%)
  • rgb(105, 51, 78)
  • #69334E

Title big size with words in bold

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

3.21259 123.05
  • hsl(330, 100%, 66%)
  • rgb(255, 82, 167)
  • #FF52A7
  • hsl(330, 25%, 25%)
  • rgb(80, 48, 64)
  • #503040

Title big size with words in bold

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

3.81788 150.1
  • hsl(330, 100%, 66%)
  • rgb(255, 82, 167)
  • #FF52A7
  • hsl(331, 18%, 26%)
  • rgb(80, 55, 67)
  • #503743

Title big size with words in bold

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

3.56439 148.97
  • hsl(330, 100%, 66%)
  • rgb(255, 82, 167)
  • #FF52A7
  • hsl(337, 11%, 28%)
  • rgb(80, 64, 70)
  • #504046

Title big size with words in bold

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

3.24423 147.24
  • hsl(330, 100%, 66%)
  • rgb(255, 82, 167)
  • #FF52A7
  • hsl(330, 6%, 29%)
  • rgb(80, 70, 75)
  • #50464B

Title big size with words in bold

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

3.02615 145.6
  • hsl(330, 100%, 66%)
  • rgb(255, 82, 167)
  • #FF52A7
  • hsl(0, 0%, 21%)
  • rgb(55, 55, 55)
  • #373737

Title big size with words in bold

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

3.97765 175.31
  • hsl(330, 100%, 66%)
  • rgb(255, 82, 167)
  • #FF52A7
  • hsl(294, 100%, 25%)
  • rgb(117, 0, 130)
  • #750082

Title big size with words in bold

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

3.37559 112.87
  • hsl(330, 100%, 66%)
  • rgb(255, 82, 167)
  • #FF52A7
  • hsl(294, 81%, 28%)
  • rgb(119, 13, 130)
  • #770D82

Title big size with words in bold

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

3.24212 110.81
  • hsl(330, 100%, 66%)
  • rgb(255, 82, 167)
  • #FF52A7
  • hsl(293, 66%, 30%)
  • rgb(119, 26, 130)
  • #771A82

Title big size with words in bold

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

3.11243 110.39
  • hsl(330, 100%, 66%)
  • rgb(255, 82, 167)
  • #FF52A7
  • hsl(292, 54%, 26%)
  • rgb(96, 31, 105)
  • #601F69

Title big size with words in bold

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

3.6983 133.45
  • hsl(330, 100%, 66%)
  • rgb(255, 82, 167)
  • #FF52A7
  • hsl(292, 42%, 28%)
  • rgb(97, 42, 105)
  • #612A69

Title big size with words in bold

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

3.43386 131.6
  • hsl(330, 100%, 66%)
  • rgb(255, 82, 167)
  • #FF52A7
  • hsl(293, 34%, 30%)
  • rgb(99, 51, 105)
  • #633369

Title big size with words in bold

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

3.17789 128.38
  • hsl(330, 100%, 66%)
  • rgb(255, 82, 167)
  • #FF52A7
  • hsl(292, 25%, 25%)
  • rgb(76, 48, 80)
  • #4C3050

Title big size with words in bold

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

3.80132 152.94
  • hsl(330, 100%, 66%)
  • rgb(255, 82, 167)
  • #FF52A7
  • hsl(290, 18%, 26%)
  • rgb(76, 55, 80)
  • #4C3750

Title big size with words in bold

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

3.56259 152.14
  • hsl(330, 100%, 66%)
  • rgb(255, 82, 167)
  • #FF52A7
  • hsl(285, 11%, 28%)
  • rgb(76, 64, 80)
  • #4C4050

Title big size with words in bold

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

3.25385 150.75
  • hsl(330, 100%, 66%)
  • rgb(255, 82, 167)
  • #FF52A7
  • hsl(288, 6%, 29%)
  • rgb(78, 70, 80)
  • #4E4650

Title big size with words in bold

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

3.02997 147.43
Not satisfied ?