Auto-Reverse Text Color Based On Background Color

Auto-Reverse Text Color Based On Background Color
File Size: 2.74 KB
Views Total: 130
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.