This is a tool that you can use to swap to higher contrast styles for better readability by users with vision requirements.
I strongly believe that you should have your structural layouts in a different file than the themes/styles. It is not only easier to maintain by separation of concerns, but there is less likelihood you will compromise the integrity of the design.
Where you maye have a background image, lowering the image impact by way of greyscale, desaturation, or removal can help a lot, it all depends on how agressive you need or want to be. Marketing and design always aim for best case scenario, but this is where you need to be doing what is best for the customer, which may not be the “desire” of marketing and design team members. You have to stress, that this is a legal requirement, and it is about the content, not the presentation. This is like a middle finger to design, they will push back, but they can go pound sand.
I will attempt to have both here but given a lot of people are going away from jQuery, it is best to have a VanillaJS version thay does not require a library or framework.
This first group toggles between two sheets, but you can see how you can extend to select different CSS. It is a simple set an ID for the CSS in the head and then do an onclick and change the value of the href attribute.
jQuery version |
Vanilla
How about you have an array of different levels of contrast users can cycle through: 3+ CSS versions in jQuery 3+ CSS versions in VanillaJS
These are other tools that try the same thing, or they may also be a duplicate of what I am writing here.