How to set colors to a specific contrast ratio?

Question

I am working on a project and I have a request to set the footer to a 4:5 contrast ratio. I've never had to alter this, so after searching I found this neat tool that lets you fiddle with the colors and see a contrast ratio you get. http://leaverou.github.io/contrast-ratio/#

I was wondering if theres another way to do this? The only set of instructions I recieved was to set the font of the footer to 12pt, and a 4:5 contrast ratio (the footer background is black).

Thanks!

Answer 1

Use SASS to accomplish this. Simply install ruby and then run:

gem install SASS
sass --watch /path/to/sass path/to/css

This will watch and convert any SASS files in the first directory to CSS in the second directory. You can then use functions in the SASS to handle lightening and darkening of colors with variables. A quick example:

@black: #000;
footer {
  background-color: lighten(@black, 20%);
}

and it will render completely valid CSS using ruby to handle the variables and lightening of the background by 20%