Auto-Reverse Text Color Based On Background Color

A smart jQuery plugin for Contrast and Color Accessibility that automatically changes the text color based on the brightness of the background color.

Features:

• Change font color to White when the background color is dark.
• Change font color to Black when the background color is bright.

How It Works:

• Calculate the brightness of the background color to determine if the color is bright or dark.
• Check if the lightness is >50% or < 50%.
• If it is >50%, change text color to black.
• Otherwise, set text color to white.

See Also:

• jQuery Plugin To Change Text Color Based On Background Image - invertImgText.js
• Diff Text And Background Color With jQuery - AutoTextColor
• Dynamically Change Font Color Based On Background – Contrast.js
• Reverse Text Color Based On Background Color – TEXTColor

How to use it:

1. Specify the background color using RGB color model.

<div class="adjust-text" style="background: rgb(3, 3, 32);">
  <h1>Text here</h1>
</div>

<div class="adjust-text" style="background: rgb(255, 205, 105);">
  <h1>Text here</h1>
</div>

2. Load the adjust-text-to-background.js script after jQuery and the plugin will do the rest.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/adjust-text-to-background.js"></script>

---

This awesome jQuery plugin is developed by Hkozacz. For more Advanced Usages, please check the demo page or visit the official website.