AcceCSS

A Sass Mixin

That debugs & checks the accessibility of your designs

This mixin will allow you to get an overview of all the zones of your layout, get a grayscaled version to check the contrast, as well as 8 different filters to emulate the most common coloblindness types

Find it on Github!

Simple API

What we can call "The API" is the few parameters you will be able to change or combine to use the AcceCSS mixin, it's composed of 4 paramters so far

@include accecss( false, false , false , false );
                   ^       ^        ^        ^
           selector | css zones | grayscale | colorblind filter

API parameters

selector
You must use quotes ('), ex: '.selector'
CSS Zones
Can be true or false
Grayscale
Can be true or false
Colorblind filter
Any of the filters on the list below, ex: deuteranopia

Filters list

  • protanopia
  • protanomaly
  • deuteranopia
  • deuteranomaly
  • tritanopia
  • tritanomaly
  • achromatopsia
  • achromatomaly

Browser compatibility

The AcceCSS mixin will work in any major evergreen browser :

How to use it

1 - Download

First, go on Github, and download the accecss.scss file along with the filter.svg

2 - @import

Now, you have to import the mixin into your main stylesheet.

To keep things clear, I recommand using a main.scss file, and import both your styles and accecss mixin into it

@import 'style.scss';
@import 'accecss.scss';

3 - Use it

Once 1 & 2 are done, you're ready to use the mixin, here is how looks an inactive Accecss mixin, note that by default, all the settings are set to false

@include accecss( 
  $element: false,  
  $zones: false,  
  $grayscale: false,  
  $cbFilter: false   // COLORBLIND    | False
);

Let's say you want to debug your whole document, and, for example, let's say you want to get your elements outlined

@include accecss( 
  $element: 'html body',
  $zones: true,
  $grayscale: false,
  $cbFilter: false
);

To add a grayscaled effect : 

@include accecss( 
  $element: 'html body',
  $zones: false,
  $grayscale: true,
  $cbFilter: false
);

And finally, add a blindness color filter : 

@include accecss( 
  $element: 'html body',
  $zones: false,
  $grayscale: false,
  $cbFilter: protanopia // You can use all filters listed over
);

You will have to give the proper path to your filter.svg, for this, use the $path-to-filter variable, in the accecss.scss file.

Demos :

Outlining :

CSS zones

Contrasts :

grayscale

Colorblindness filters :

protanopia protanomaly deuteranopia deuteranomaly tritanopia tritanomaly achromatopsia achromatomaly

With text

Lorem ipsum dolor sit amet, consectetur adipisicing elit. foo Repudiandae alias, ex porro eaque explicabo eligendi iusto nulla dolore laboriosam voluptatibus commodi bar quaerat animi, doloribus et quam baz vitae nobis obcaecati. Assumenda.

With images

Informations about Colorblindness

This project was born essentially because of this article :

https://medium.com/@aaron10buuren/designing-for-and-with-color-blindness-48392aab3d87

After some researches I discovered this information :

Colour (color) blindness (colour vision deficiency, or CVD) affects approximately 1 in 12 men (8%) and 1 in 200 women in the world. In Britain this means that there are approximately 2.7 million colour blind people (about 4.5% of the entire population), most of whom are male.
- Source (http://www.colourblindawareness.org/colour-blindness/)

Thank you

A big thank you to @dervondenbergen for his precious help, and his advices.

Thank you to @bullgit for being awesome and provide me priceless feedbacks

A huge thank you to thecatapi.com, for the awesome.. Cat API!

Question ?

For any further informations, feel free to ping me on twitter : @LukyVj

Github