Grayscale Favlet

From Level Access Web Labs
Jump to navigation Jump to search

Note: It is recommended to use the Stylus extension for Firefox or Chrome to test this to make sure this favlet is not blocked by certain page policies. Install Stylus (not the stylish extension) and then left click or activate the toolbar icon. Choose manage styles and then choose New Style. The CSS below can be put into Stylus - name and then save the style. then the style should be activate. You can check or uncheck teh style from running by clicking/activating the Stylus icon on the toolbar and checking the stylus to have active for the page.

html { 
   filter: grayscale(100%) !important;
   -webkit-filter: grayscale(1) !important;

Grayscale test for WCAG 2

(See Install a Favlet for instructions on how to add this Favlet to your browser).

Grayscale Favlet

Code below is provided to demonstrate what is being changed. Favlet actually runs latest JavaScript from github site.