Automating Contrast Accessibility

Accessibility continues to be a growing priority for the development community. A significant part of accessibility is color contrast - the measure of perceived brightness between text and its background. The required level of contrast varies for the different levels of WCAG conformance, and finding passing colors within a brand style guide can sometimes prove challenging.

Using an algorithm provided by W31, we can evaluate a background color and assign it a perceived brightness value. This brightness value then allows us to determine whether black or white text will pass accessibility for any hex value we throw at it.

A javascript function utilizing this algorithm might look something like:

or SASS:

Dig into the details and check it out in action here: https://codepen.io/chrisgilbert/pen/EzwWwX