Random-Contrast-Compliant

A SCSS helper to generate a Random Color that is Compliant with your specified WCAG contrast guidelines. Import into your SASS/SCSS files and use!

Click Here To See It In Action

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites

• An existing functional SASS/SCSS project.
• A functional import process.
  • You’ll need to add Random-Contrast-Compliant to your node-sass includePaths option. This project should be imported from _random-contrast-compliant.scss. How you do this depends on how node-sass is integrated into your project.

Installing

Install with NPM or Yarn

npm i -D @tabuckner/random-contrast-compliant

yarn add -D @tabuckner/random-contrast-compliant

Then Use In Your SASS/SCSS Files

@import "~@tabuckner/random-contrast-compliant/_random-contrast-compliant";

$bg-color: whitesmoke;

.box {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  margin: 8px;
  background: getRandomContrastCompliant($bg-color);
}

API

The main method exposed by this package is getRandomContrastCompliant.

getRandomContrastCompliant($backgroundColor, $contrastRatioMinimum: $default-contrast-minimum, $contrastRatioMaximum: $default-contrast-maximum)

Given a backgroundColor, and optional WCAG contrastRationMinimum/contrastRatioMaxiumum, will return a random color that meets the supplied WCAG contrast guidelines.

$backgroundColor

Any valid SASS/SCSS color.

$contrastRatioMinimum

Any number representing the contrast ratio minimum (default: 4.5).

$contrastRatioMaximum

Any number representing the contrast ratio maximum (default: 10).

Running the tests

Tests are handled by True and Jest.

yarn test

or...

yarn test --watch

And coding style tests

Style Linting can be handled with:

yarn lint

Deployment

Add additional notes about how to deploy this on a live system

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

• Taylor Buckner - Initial work - tabuckner

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

• Sergio Gomes - WCAG Contrast in SASS