AutoTextColor
A Demo In Automatic Text Coloring

Lorem Ipsum

Sed dapibus nunc ac blandit porta. Quisque congue tempus auctor. In diam dolor, finibus sed metus vel, commodo posuere dui. Nullam in erat.

Lorem Ipsum

Sed dapibus nunc ac blandit porta. Quisque congue tempus auctor. In diam dolor, finibus sed metus vel, commodo posuere dui. Nullam in erat.

Lorem Ipsum

Sed dapibus nunc ac blandit porta. Quisque congue tempus auctor. In diam dolor, finibus sed metus vel, commodo posuere dui. Nullam in erat.

Lorem Ipsum

Sed dapibus nunc ac blandit porta. Quisque congue tempus auctor. In diam dolor, finibus sed metus vel, commodo posuere dui. Nullam in erat.

Lorem Ipsum

Sed dapibus nunc ac blandit porta. Quisque congue tempus auctor. In diam dolor, finibus sed metus vel, commodo posuere dui. Nullam in erat.

Lorem Ipsum

Sed dapibus nunc ac blandit porta. Quisque congue tempus auctor. In diam dolor, finibus sed metus vel, commodo posuere dui. Nullam in erat.

Lorem Ipsum

Sed dapibus nunc ac blandit porta. Quisque congue tempus auctor. In diam dolor, finibus sed metus vel, commodo posuere dui. Nullam in erat.

Lorem Ipsum

Sed dapibus nunc ac blandit porta. Quisque congue tempus auctor. In diam dolor, finibus sed metus vel, commodo posuere dui. Nullam in erat.

#

Sed dapibus nunc ac blandit porta. Quisque congue tempus auctor. In diam dolor, finibus sed metus vel, commodo posuere dui. Nullam in erat.

AutoTextColor

A lightweight jQuery plugin that sets an element's text to either black or white automatically, depending on the background color to give the best contrast. If an element does not have a background, the parent element's background is used and so on until a background is found.


HTML

<div class="card" style="background: #fe626d;">
<h2>Lorem Ipsum</h2>
<p>Sed dapibus nunc ac blandit porta.</p>
</div>

Javascript

$('div.card').autotextcolor();