Hi all,
I am working on a project for my client and trying to create accessibility controls feature for the website. Upon creating it, I intend to share this with the rest of the public, so that everyone can clone it and use it too.
So far I’ve managed to get some controls working - I am able to add:
Grayscale Effect
Inverted Colours
High Contrast
Change the body font to readable Open Dyslexic font.
I am struggling with the following:
Adding controls which allow to increase or decrease all typography on page - All headings & Paragraph text, also buttons and normal text.
Making changes persistent, meaning when some settings are applied, those will be carried on to the next page, until they are reset.
A nice to have thing would be if I could choose which toggles can work independently, and which when enable would disable others, for instance when Grayscale is toggled, if user toggles Invert, Grayscale switches off. But if the Readable font is selected, Switching to Grayscale would keep it working.
In general the code is very clunky, so someone could give some ideas on how to improve it, that would be great! 
Here is the Read-Only link.
https://preview.webflow.com/preview/dfc-dev?utm_medium=preview_link&utm_source=designer&utm_content=dfc-dev&preview=832ed2151f576a1ad3310d69c4b1b473&workflow=preview
Here is my site Read-Only: LINK
(how to share your site Read-Only link)