title: CSS - How can I make a font readable over any color?
body: <p>Assuming I have a set font color that I must maintain, and that it overlays content that can be of any color, how can I make sure the font is readable no matter what it's overlaying?</p>
  
  <p>Here is a jsFiddle to demonstrate the effect I am trying to describe.
  <a href="http://jsfiddle.net/4AUDr/" rel="noreferrer">http://jsfiddle.net/4AUDr/</a></p>
  
  <pre><code>#overlay 
  {
      position: relative;
      top: -150px;
      color: #860101;
  }
  </code></pre>
  
  <p>Meme captions utilize white text with a black outline to make it readable over any hypothetical meme image, however I don't think there is a cross-browser compatible CSS only method of achieving that, and it would potentially look quite horrible with smaller fonts.</p>
  
  <p>What solutions are there to this problem?</p>