Black or White Text? WCAG vs. Neural Networks

The other day I ran into a problem that some developers of color tools probably run into, which is: given a color, do you display white or black text over it? An algorithm based on the WCAG luminosity contrast ratio measure works great on most colors, but can be spotty. After looking at the WCAG formula, it seemed this problem was a good candidate for neural networks.

A couple weeks ago I finally sat down to try out the idea, and made a page where you can train your own neural network when to use black vs. white text (bonus: Worker thread example). After training it on a dozen or so colors, it matches the WCAG algorithm in most cases and does better in others. It’s kind of crazy that you can just throw data at this network and it will learn it. Not every problem can be solved by a neural network, but it’s cool to see it work when the problem fits. Might try out some other classifiers next.

I ended up making a simple JavaScript neural network implementation, you can check out the code on github.

4 thoughts on “Black or White Text? WCAG vs. Neural Networks

  1. Nice 🙂
    Recently someone (in one of the blog feeding suggested to use neural networks to help with changing tabs (or tasks) using keyboard shortcuts (I think he called it the Alt-Tab-problem or so). In most cases people switch forth and back between certain programs and only occasionally need another program. When switching to this other program, it breaks the most-recent-order on the menu. You don’t feel like trying this as well? 😉

    1. maybe! Although, I think they were talking about Markov models, not sure that problem fits with neural networks in particular.

  2. This is really neat! It’s impressive how something so simple(on the surface anyways) works so effectively.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s