Use Sass to dynamically change text color based on background color

color.scss

@function set-notification-text-color($color) {
  @if (lightness( $color ) > 50) {
    @return #000; // lighter color, return black
  }
  @else {
    @return #fff; // darker color, return white
  }
}

$confirm: hsla(101, 72%, 37%, 1);  // green
$warning: #ffc53a;                 // yellow
$alert: rgb(172, 34, 34);          // red

%notification {
  border-radius: 10px;
  display: block;
  font-family: sans-serif;
  font-size: 1.5em;
  margin: 1em auto;
  padding: 1em 2em;
  text-align: center;
  width: 30%;
}

.notification {
  @extend %notification;
}
.confirm {
  background: $confirm;
  color: set-notification-text-color($confirm);
}
.warning {
  background: $warning;
  color: set-notification-text-color($warning);
}
.alert {
  background: $alert;
  color: set-notification-text-color($alert);
}

index.htm

<p class="notification confirm">Confirmation</p>
<p class="notification warning">Warning</p>
<p class="notification alert">Alert</p>