2

Recently, I went to a website that had some color contrast changing tools on it and tried to find them so I could add them to sites we have in development. Obviously, I failed because I am here now asking if anyone knows where I can get them. If anyone knows where I can get these options for our sites, I would really appreciate it. It looks like they might just be buttons that switch between different stylesheets on a dime.

The site I found them on is http://screenreader.net

contrast tools

|improve this question
  • It is most likely a CSS change. You may require different contrast modes to allow your styles to still work, and CSS would provide you with that option. – Andrew Jul 16 '14 at 21:01
  • You can use different CSS stylesheets and switch between them. I know of a framework that has a focus on CSS changes, if it helps. – ArtOfCode Jul 16 '14 at 21:04
  • Yeah whatever information you can provide is helpful to me. I'm not a designer so I don't know all the CSS tricks, I'm a programmer looking into additions to our sites. – jlg Jul 16 '14 at 21:31
  • @jlg Added an answer about said framework below. – ArtOfCode Jul 17 '14 at 15:21
2

The website in question uses PHP query strings (http://screenreader.net/index.php?colourscheme=...) to determine what stylesheet to use. That is probably done with a bit of code like this:

<link rel="stylesheet" type="text/css" href="<?php echo $_GET["colourscheme"].".css"; ?>" />

That is one solution you can use, but as you can see it's not the easiest to understand and frankly it doesn't look good in your code.

Another solution is to have a few buttons and use JavaScript functions to change the stylesheet. There is a JS framework of my own invention that you can use: Utils.JS. Some simple HTML and JS will make this work:

<a href="javascript:document.changeStylesheet('id','stylesheet.css')">Change Style</a>

That'll create a link you can click which will change the stylesheet. If you want to get really smart, you can save the stylesheet the user selects in a cookie using the same framework and reselect it next time they visit.

EDIT: The solution above may cause your page to break and display the stylesheet URL because of the use of the javascript: pseudo-protocol. Instead, it may be wiser to use this:

<a href="javascript:void(0)" onclick="document.changeStylesheet('id','stylesheet.css')">Change Style</a>
|improve this answer
  • That is perfect, thank you! I'm so inexperienced with Javascript I wouldn't have been able to figure that out on my own. :/ – jlg Jul 18 '14 at 15:38
  • 1
    @jlg: You can use that multiple times too if necessary, so you can have a range of contrast options. – ArtOfCode Jul 18 '14 at 15:41
  • @jlg: Updated, there is a slightly better solution with the same effect underneath. – ArtOfCode Jul 18 '14 at 15:49
3

As you can see when you change theme on provided web site that url change with additional parameter colourscheme http://screenreader.net/index.php?colourscheme=blackonwhite and then analyze it on back end and put needed css file with all styles. Look more on image.enter image description here

|improve this answer
  • Great, thanks! I did see that in the URL, but I wasn't sure what was forcing the stylesheets to change like that. :) – jlg Jul 18 '14 at 15:37
1

You may find the following resources useful for assessing and managing the accessibility of your sites, in particular, the color contrast management aspect:

1) Programmatic contrast changing: https://stackoverflow.com/questions/21034791/color-contrast-customization-in-web-design;

2) Article with links to some tools: http://www.techrepublic.com/blog/web-designer/effective-design-principles-for-web-designers-contrast

3) Another interesting article: http://lea.verou.me/2012/10/easy-color-contrast-ratios

Hope this helps!

|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.