Last Updated: February 25, 2016
·
506
· jaysonlauza

How to choose font color that reflects to background pure CSS

You must refer to it's background color then use online reference for HEX color shades. I used http://www.color-hex.com/color/5daee9

HTML:
<div class="container">
<h1>I am Heading</h1>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sem lorem, vestibulum eget tortor vitae, varius euismod quam. Nam faucibus in est sed molestie. Nulla nec arcu interdum lectus cursus condimentum. Quisque accumsan luctus posuere. Nunc bibendum sagittis ligula eu fringilla. Nullam faucibus enim et ante aliquet sodales. Vivamus at feugiat nunc. Donec dictum scelerisque placerat.</p>
</div>

<br />
CSS:
<br />
<style type="text/css">
div.container {
width: 400px;
font-family: Arial,Helvetica, sans-serif;
background-color: #5daee9;
padding: 2em;
}
h1, p {
color: #2e5774;
text-shadow: 1px 1px 1px #aed6f4;
}
</style>

Play demo: https://codepen.io/anon/pen/bEdRJZ

Rule:
1. The font color must be at least 5 to 6 times darker than the background.
2. Create text shadow 5 to 6 times lighter than the background.