Demo: Compass Contrast Color Example

<div class='example'>
  <p class='dark'>This is a paragraph with a <em>dark</em> background and <em>light</em> text.</p>
  <p class='light'>This is a paragraph with a <em>light</em> background and <em>dark</em> text.</p>
</div>

.example
  %p.dark This is a paragraph with a <em>dark</em> background and <em>light</em> text.
  %p.light This is a paragraph with a <em>light</em> background and <em>dark</em> text.

$contrasted-dark-default: #333333;
$contrasted-light-default: #e7e7e7;
@import "https://compass-style.org/files/examples/compass/utilities/compass/utilities/color/contrast";
.example {
  p.dark {
    @include contrasted(#5f1210);
  }
  p.light {
    @include contrasted(#fa9e9c);
  }
}

$contrasted-dark-default: #333333
$contrasted-light-default: #e7e7e7
@import https://compass-style.org/files/examples/compass/utilities/compass/utilities/color/contrast
.example
  p.dark
    +contrasted(#5f1210)
  p.light
    +contrasted(#fa9e9c)

.example p.dark {
  background-color: #5f1210;
  color: #e7e7e7;
}
.example p.light {
  background-color: #fa9e9c;
  color: #333333;
}