GrayBit Grayscale Conversion Tool

[Green Beast]

Hey guys,

Here's something new and hopefully interesting, being in beta form I think it's appropriate in this forum. The site has gone through one round of changes and some script work has been/is being done. I am working on a white-backed CSS which will probably end up being the defualt, but I added a style changer (not linked yet) so the version you'll see here will be available.

It's a contrast accessibility testing tool which loads an external page through its submit form and renders it (the real page) in grayscale, including background and embedded images.

It won't work right on a tabled site or one with "tags" as a linked CSS is needed, and it may have some difficulty with PNG alpha transparencies (in IE, of course, lol). You should, however, find it to be a neat tool. And hey, it is still a beta release. ;)

It's not really a site, but it does have two additional pages, one for more info, and the other for making contact/reporting bugs, etc.

Let me know what you think about the 1) tool, 2) user interface.

http://graybit.com/

Thanks.
Mike

[qwertyuiop]

I like it! I think it's pretty useful and it works quite well. It's fast too.

Regarding the site, I think that it looks neat and organized. I'm not sure if this is a good thing or not, but the ads stand out and make your eyes focus on them.

Good job :)

[mark87]

Looks nice. :)

It doesn't seem to like it when you specify a folder without an ending slash though.

eg. markaylward.co.uk/jamie_rees (http://graybit.com/files/graybit.php?url=http%3A%2F%2Fwww.markaylward.co.uk%2Fjamie_rees) (seems to be using the stylesheet from markaylward.co.uk ?)

But works ok if you add the slash - markaylward.co.uk/jamie_rees/ (http://graybit.com/files/graybit.php?url=http%3A%2F%2Fwww.markaylward.co.uk%2Fjamie_rees/)

Perhaps you could check if the input doesn't have an ending slash or an extension and then add it if neccesary or something?

The sunglasses background gets cut off too.

[Green Beast]

Thanks guys.

That's interesting Mark. I don't suppose we should add the slash because it won't always fit, index.php/, but this is good info to have (maybe for the v.1.0 "Info"). Looking at the source of the page without the slash it wasn't completing the url to the css property, leaving off the Jamie_Rees part altogether. It doesn't always do that.

Thanks Mark, 'tis good stuff.

Mike

[Pennimus]

Brilliant, consider it tagged!

[ronaldb66]

Not that it is that important, but it chokes on framed sites (I just happened to have a link lying around), it doesn't alter default link colors and it leaves JavaScript inserted pieces (like Google Adsense ads) untouched.

Otherwise: very nice.

[Green Beast]

Not that it is that important, but it chokes on framed sites (I just happened to have a link lying around), it doesn't alter default link colors and it leaves JavaScript inserted pieces (like Google Adsense ads) untouched.

Otherwise: very nice.


True. It really re-routes relative URIs through the script, but only seems to like CSS sites. It will only change CSS-spec'd colors, so browser defaults are changed. The down side of this of course is you can't determine the contrast level of those elements, but that might vary by browser anyway. The upside being, as somebody pointed out elsewhere, is that one can see what's not CSS spec'd.

Mike

[Konrad]

Haha. I really like that website. It's going in my favorites. Thanks.

[Single Paradox]

Very nice, how do you get all the links and images with http://graybit.com/files/graybit.php?url= in front of it? I've been working on somthing like this with php but when the page loads, the site is all image and linkless.

[Green Beast]

Very nice, how do you get all the links and images with http://graybit.com/files/graybit.php?url= in front of it? I've been working on somthing like this with php but when the page loads, the site is all image and linkless.

Thanks man.

Here's an answer to your question from Jona:

"GrayBit processes the HTML of the web page and replaces every link with GrayBit's URL and that link's destination in the query string. When you click the link, the page goes through GrayBit, but GrayBit also replaces all instances of linked elements (images, scripts, stylesheets, etc.) with their appropriate URLs -- it adjusts based on the URL it searches from. The function I programmed is rather faulty as it stands now, but will improve over time. Basically I'm just searching through the HTML and replacing linked elements with their actual locations manually, rather than relying on the author's HTML to absolutely specify where the linked elements are targeted from."

Mike

[Single Paradox]

Ah ok, that helps a lot, thanks! Only thing I see wrong however, graybit doesn't put the URL in front of forms. Just a heads up in case you didn't know :thumbsup:

I really like it though. Added to my favorites most definitly. Oh and another thing, graybit doesn't show pictures with transparency set. Look at my singleparadox.com through graybit. The scrollbar arrows are funky. I don't know if this is fixable though :)

[Green Beast]

Ah ok, that helps a lot, thanks! Only thing I see wrong however, graybit doesn't put the URL in front of forms. Just a heads up in case you didn't know :thumbsup:

Excellent. I didn't know that but now I do. I checked out Single Paradox (http://singleparadox.com/) and the one at Accessites.org (http://accessites.org) and sure enough, the form action remained relative.

I really like it though. Added to my favorites most definitly. Oh and another thing, graybit doesn't show pictures with transparency set. Look at my singleparadox.com through graybit. The scrollbar arrows are funky. I don't know if this is fixable though :)

Yeah, transparencies are proving to be a challenge... especially in IE where the browser just doesn't perform well to begin with.

Thanks.

Mike

[trendybox]

just one quick note. the form doesn't check if there is a valid url in there. if you don't put "http://" in front, it breaks. but it is really fast. much faster than one i used before. do you have plans for making modifications that will display as people of different color blind types would view?
i use this tool to check that but yours actually renders the page properly.
http://colorfilter.wickline.org

[Green Beast]

just one quick note. the form doesn't check if there is a valid url in there. if you don't put "http://" in front, it breaks. but it is really fast. much faster than one i used before. do you have plans for making modifications that will display as people of different color blind types would view?
i use this tool to check that but yours actually renders the page properly.
http://colorfilter.wickline.org

This is true. We limit input length, but don't really employ that much input sanitization... yet. This is one of the things we want to focus on for v.1.0. Trouble is is that there are so may odd and in some cases lengthy URIs out there that it make sanitization a challenge. The http:// part should stay, but there's nothing validating it and returning an error if it's removed so that would be a good start for us. Right, as you noted, it breaks, or rather simply doesn't do anything.

As far as other functions like the color filter (which I don't care for because it's wicked slow and can only handle one page at a time), this is yet undetermined. We have discussed it and have sort of concluded that our first priority will be to produce a rock-solid v.1.0, then work on other stuff for future versions. I *think* that all of those other features require JavaScript, but I don't know for sure. Right now, aside from the script for focus, we have no JS involvement on the tool.

Mike

[Green Beast]

Thanks :)

Mike