MadeByMike

.text-contrast(@background) when (abs(lightness(@background)) > 50) {
	color: #000;
}
.text-contrast(@background) when (abs(lightness(@background)) < 51) {
	color: #FFF;
}

MadeByMike

function text_contrast(hexcolor) {
  //parse hex
	var rgb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
	// Convert to RGB value between 0 and 1, and retrieve luminance
	// Alternative methods: (0.2126*R) + (0.7152*G) + (0.0722*B) or (0.299*R + 0.587*G + 0.114*B)
	var L = (0.3 * parseInt(rgb[1], 16)/255) + (0.59 * parseInt(rgb[2], 16)/255) + (0.11 * parseInt(rgb[3], 16)/255);
	console.log(L);
	return L > 0.5 ? "#000": "#FFF";
}

MadeByMike

// I was looking to highlight words in text nodes today and came across:
// http://bartaz.github.io/sandbox.js/jquery.highlight.html 
// http://johannburkard.de/
//
// Both seemed a little verbose so I came up with the solution below.
// Please note this has not yet been fully tested, but worked for my needs.

var words = ['words','to','mark'];

$.each(words, function(i, word){

MadeByMike

// This method is kind of cheeky in its implementation. 
// It uses the JavaScript’s object to add every item in the array as key.
// As we all know, objects accepts only unique keys and sure we did capitalize on that.

Array.prototype.unique = function() {
    var o = {}, i, l = this.length, r = [];
    for(i=0; i<l;i+=1) o[this[i]] = this[i];
    for(i in o) r.push(o[i]);
    return r;
};

MadeByMike

//Custom transition end event, 

(function(window){
  // Detect which transition event
  var whichTransitionEvent = function(){
    var t;
    var el = document.createElement('fakeelement');
    var transitions = {
      'transition':'transitionend',
      'OTransition':'oTransitionEnd',

MadeByMike

Contrast - WCAG compliant (sass)

A Pen by Mike on CodePen.

License.

MadeByMike

Contrast black\white - luma (less)

A Pen by Mike on CodePen.

License.

MadeByMike

Contrast black\white - luma (sass)

A Pen by Mike on CodePen.

License.

MadeByMike

Contrast - WCAG compliant (sass)

A Pen by Mike on CodePen.

License.

MadeByMike

Contrast black\white - WCAG brightness (sass)

http://www.w3.org/WAI/ER/WD-AERT/#color-contrast

A Pen by Mike on CodePen.

License.