Color in hexadecimal, RGB or with CSS color keywords.
Example: #FFFFFF, rgb(255,255,255) or white
The contrast of your colours is insufficient.
Current ratio: 3.3

Old contrast

Invalid contrast
Foreground Background Sample Ratio Distance
  • hsl(220, 60%, 50%)
  • rgb(51, 102, 204)
  • #3366CC
  • hsl(240, 99%, 88%)
  • rgb(198, 198, 255)
  • #C6C6FF

Title big size with words in bold

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

3.30233

New contrast : 14 results (846 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(220, 60%, 50%)
  • rgb(51, 102, 204)
  • #3366CC
  • hsl(240, 99%, 99%)
  • rgb(250, 250, 255)
  • #FAFAFF

Title big size with words in bold

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

5.15763 65.52
  • hsl(220, 60%, 50%)
  • rgb(51, 102, 204)
  • #3366CC
  • hsl(300, 99%, 99%)
  • rgb(255, 251, 255)
  • #FFFBFF

Title big size with words in bold

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

5.23732 69.39
  • hsl(220, 60%, 50%)
  • rgb(51, 102, 204)
  • #3366CC
  • hsl(205, 100%, 93%)
  • rgb(224, 242, 255)
  • #E0F2FF

Title big size with words in bold

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

4.68009 46.84
  • hsl(220, 60%, 50%)
  • rgb(51, 102, 204)
  • #3366CC
  • hsl(168, 99%, 88%)
  • rgb(198, 255, 244)
  • #C6FFF4

Title big size with words in bold

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

4.85825 56.86
  • hsl(220, 60%, 50%)
  • rgb(51, 102, 204)
  • #3366CC
  • hsl(132, 99%, 88%)
  • rgb(198, 255, 210)
  • #C6FFD2

Title big size with words in bold

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

4.76224 45.48
  • hsl(220, 60%, 50%)
  • rgb(51, 102, 204)
  • #3366CC
  • hsl(96, 99%, 88%)
  • rgb(220, 255, 198)
  • #DCFFC6

Title big size with words in bold

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

4.89686 22.0
  • hsl(220, 60%, 50%)
  • rgb(51, 102, 204)
  • #3366CC
  • hsl(61, 99%, 88%)
  • rgb(254, 255, 198)
  • #FEFFC6

Title big size with words in bold

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

5.19611 56.0
  • hsl(220, 60%, 50%)
  • rgb(51, 102, 204)
  • #3366CC
  • hsl(25, 100%, 93%)
  • rgb(255, 237, 224)
  • #FFEDE0

Title big size with words in bold

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

4.71273 59.88
  • hsl(220, 60%, 50%)
  • rgb(51, 102, 204)
  • #3366CC
  • hsl(60, 99%, 99%)
  • rgb(255, 255, 251)
  • #FFFFFB

Title big size with words in bold

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

5.35337 71.81
  • hsl(220, 60%, 50%)
  • rgb(51, 102, 204)
  • #3366CC
  • hsl(276, 99%, 99%)
  • rgb(253, 250, 255)
  • #FDFAFF

Title big size with words in bold

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

5.18619 67.46
  • hsl(220, 60%, 50%)
  • rgb(51, 102, 204)
  • #3366CC
  • hsl(312, 99%, 99%)
  • rgb(255, 250, 254)
  • #FFFAFE

Title big size with words in bold

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

5.20219 68.81
  • hsl(220, 60%, 50%)
  • rgb(51, 102, 204)
  • #3366CC
  • hsl(55, 100%, 90%)
  • rgb(255, 251, 204)
  • #FFFBCC

Title big size with words in bold

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

5.09113 58.62
  • hsl(220, 60%, 50%)
  • rgb(51, 102, 204)
  • #3366CC
  • hsl(348, 99%, 99%)
  • rgb(255, 250, 251)
  • #FFFAFB

Title big size with words in bold

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

5.19244 68.81
  • hsl(220, 60%, 50%)
  • rgb(51, 102, 204)
  • #3366CC
  • hsl(58, 100%, 59%)
  • rgb(255, 251, 50)
  • #FFFB32

Title big size with words in bold

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

4.88009 202.32
Not satisfied?