Member Avatar for charisma

Hey everyone, I'm rebuilding a website for a group, and this site has three contrast option for the vision impaired, The way the site was built. There was a folder for each contrasts. So that means when ever I did an update. I had to copy it to two other folders besides the main one. Right now i rebuilt it with just one contrast. i still have the two other css files that control the two other contrast and font color changes. on the site i have three buttons that can be used to switch the contrast. Can I switch between three css files with a click of a button on the site?

This is the site that is online now:

This is the site I rebuilt:

Thank you in advance:)

  • 2 Contributors
  • 2 Replies
  • 103 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by charisma

Dani AI

Generated

— it is unnecessary to maintain three separate page copies. A single HTML codebase can switch contrast styles at runtime. is correct that a click handler can swap styles; below is a simple, robust pattern that preserves the user choice.

Place a single <link> with an id on every page and change its href on button clicks; persist the choice in localStorage so the setting survives reloads:

/* small site-wide script */
const link = document.getElementById('contrast-css'); // <link id="contrast-css" rel="stylesheet" href="css/contrast-default.css">
function setContrast(name){
  link.href = 'css/contrast-' + name + '.css';
  try { localStorage.setItem('contrast', name); } catch(e){}
}
document.addEventListener('DOMContentLoaded', () => {
  const saved = localStorage.getItem('contrast');
  if (saved) setContrast(saved);
});

Use semantic <button> elements for the three controls and update an ARIA state (for example aria-pressed) so keyboard and assistive tech users get feedback. For better performance and maintainability prefer a single stylesheet with CSS custom properties and a few override rules for each contrast, rather than three large full CSS files. Provide a non-JS fallback (server-side query param or a URL that sets a cookie) if required. Test final palettes against WCAG contrast criteria (see https://www.w3.org/TR/WCAG21/) and avoid techniques that invert images globally. Troubleshooting checklist: confirm the link id and paths, catch localStorage errors (private mode), and check caching headers if new CSS isn’t loading.

Recommended Answers

All 2 Replies

Member Avatar for teedoff

Not sure what you're asking. The other site is using a javascript click event on the buttons to change font size and page colors. You have the font size function working correct? Where is the js function for the contrast?

Member Avatar for charisma

I have not added it yet. Before there was three folders in total for the pages. So by rights I had three copies of every page. I want to avoid that. I still have copies of the three css files. If you look at the site that is still online. you will see when you click on a contrast. it goes to another fold. There is three. STN, HC, INV.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.