Reference Documentation

Demo: Compass Contrast Color Example

This is a paragraph with a dark background and light text.

This is a paragraph with a light background and dark text.

html haml 
<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.
scss sass css 
$contrasted-dark-default: #333333;
$contrasted-light-default: #e7e7e7;

@import "compass/utilities/color/contrast";

.example {
  p.dark {
    @include contrasted(#5f1210);
  }
  p.light {
    @include contrasted(#c82523);
  }
}

$contrasted-dark-default:  #333
$contrasted-light-default: #e7e7e7

@import "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:#333}