• Eindhoven, NL
  • hi@davidhalford.com

Auto-Contrasting Text

Not everybody is awesome at reading. Some people have a hard time with the words, others have a hard time with the contrast of the letters and the background. We as designers/developers can’t help the first group of people, but we can certainly assist the second group, in the name of accessibility.

I recently came across a problem while creating a label-interface. The labels were Bootstraps, but you could create your own colors. The problem was that Bootstrap labels can only have one text-color: white. This is awesome if you’re using them as intended, but if I want a white or a light yellow label, reading the label was almost impossible, since there was not enough contrast.

The W3C was way ahead of me, and they actually have a formula for contrast calculations. Using this formula I created both a SASS Mixin and a JS function that reads the background color and decides whether the text should be light or dark. I implemented this in the project and it worked great, every label was perfectly legible.

Below is a Codepen so you can see how it works. (don’t forget to scroll the Codepen for more colors) and play around with the code yourself:

See the Pen JS function for accessible color contrast by David Halford (@davidhalford) on CodePen.

(there is also a SASS-version in my codepen if you'd prefer that)

That's it. You've ready the whole thing. Good Job!
This article was originally published on December 20, 2014 on this website.