Adjust-Text-To-Background.js is a jQuery plugin to set the text color to the background color. If the background color is brighter, the script will change the text color to black, and if the background is darker, it will be changed to white.
Adjust-text-background js plugin to check the contrast ratio between text and background colors. The plugin automatically sets the font color of your text to black or white based on the perceived brightness of its original packaging.
Must Read: Simple jQuery Plugin for Embedding YouTube Videos As Cover Background
How to make use of it:
1. Load the JavaScript adjust-text-to-background.min.js after jQuery.
<script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/adjust-text-to-background.min.js"></script>
2. Call the function on the container.
<div class="adjust-text" style="background: rgb(3, 3, 32); "> <h1>Example text</h1> </div>
$(function(){
$('.adjust-text').adjustTextToBackground();
});3. Customize the lightness utilized by the plugin to find out if the color is brilliant or darkish.
$(function(){
$('.adjust-text').adjustTextToBackground({
lightness : 0.60,
});
});See Demo And Download
Official Website(Hkozacz): Click Here
This superior jQuery/javascript plugin is developed by Hkozacz. For extra Advanced Usage, please go to the official website.
