Using Variable Text Color SCSS Function To Pass Accessibility Contrast Standards

Accessibility is an important part of website development that we must consider in modern development. More and more emphasis is placed on sites that are able to serve all people, including those with various disabilities.

This blog post will focus on one small, but important part of making a site accessible: having a minimum contrast ration between text and its background. Those that have difficulty seeing will need a higher contrast ration between text and the background it’s on. For example, dark text on a dark background can be harder for them to read. But let’s be honest…many of us can benefit for a better contrast ratio. We as developers must think about stuff like this.

Here’s a color contrast checker that you can use: https://webaim.org/resources/contrastchecker/

As always, I like to be efficient and simplify things that can be automated. So I created a SCSS function that does just that. It measures the darkness/lightness of a background and chooses an appropriate text color (that you specify) depending on the background. You can also specify a special locations that will have different colors.

The Code

@function dynamic-text-color($color, $location: null) {
  // return dark text on light background
  @if (lightness($color) > 33) {
    @return #000;
  } 
  // return light text on dark background
  @else {
    // return special location dependent light text
    @if ($location == location) {
      @return #bbb;
    } @else {
      @return #fff;
    }
    @return #fff;
  }
}

Usage

// Define background color variable
$background-color: #000;

// Basic usage
selector {
  background: $background-color;
  color: dynamic-text-color($background-color);
}

// For a specific location
selector {
  background: $background-color;
  color: dynamic-text-color($background-color, "location");
}

Breaking It Down

The first line is defining our function and variables. It’s very similar to how you’d define a function with other programming languages. We have the two variables $color (the color of the background) and $location (has a default value because it won’t always be passed in).

In the second line we are doing the magic. We’re using a built in sass function called lightness() to measure the lightness of a color. 33 is a value for the lightness on a 100 point scale. I chose 33 because it appears to be the balance point for the contrast needed to achieve AA accessibility standards.

If the color (background color) we are testing is lighter than 33/100, then our function returns black (#000). Otherwise, it does a check to see if we specified a location and then runs through a nested if statement to return a different light colored text for the location we have specified.

In other cases where we don’t have a location specified it will return white (#fff).

CodePen Example

See the Pen WzbrzZ by Mike Doubintchik (@allurewebsolutions) on CodePen.