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/beta-sub/examples/compass/utilities/compass/utilities/color/contrast";
.example {
  p.dark {
    @include contrasted(#5f1210); }
  p.light {
    @include contrasted(#c82523); } }

$contrasted-dark-default:  #333
$contrasted-light-default: #e7e7e7
@import "https://compass-style.org/files/beta-sub/examples/compass/utilities/compass/utilities/color/contrast"
.example
  p.dark
    +contrasted(#5F1210)
  p.light
    +contrasted(#C82523)

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