AngularJS Color Contrast Directive

Automatically set the text color based on the background.

Helps you display things like colored labels.

 

Demo (with AngularJS issues labels)

Loading labels from Github...
{{label.name}}

Install with Bower

bower install angular-color-contrast

Include this component into your app

<script src="color-contrast.js"></script>

Inject colorContrast as a module dependency to your app.

var myApp = angular.module('myApp', ['colorContrast']);

Pass the background color of element to get the right color contrast for the text.

Code

View on Github - https://github.com/evert0n/angular-color-contrast/

Credits

Based of the awesome getContrastYIQ() method from "Calculating Color Contrast" article by Brian Suda at 24 Ways.