GrayBit Goes Live
It all began harmlessly one evening with a single utterance: “Wouldn’t it be cool if you could plug in a web address and go to the site, but have it converted to a perfect grayscale instead of full-color…? you know, to check its contrast accessibility. An online tool. Think Google-simple. Colors can be misleading when looking at a site, but grayscale never lies. Well, things stared happening fast after that. Next thing I know a real application, just like that envisioned, begins to come to life. Born is GrayBit. Where turning gray is cool!
My friend and colleague, Jonathan Fenocchi, started scripting in his masterful way this notion and idea we shared and it began to take form. The thing was working. We tossed about names and settled on Jona’s “GrayBit” (though the slogan is mine). It was time for me to create a user-interface while Jona figured out how to deal with embedded images and Portable Network Graphic (PNG) transparencies. (On this last point, Jona got some help from a third party, he mentions it and gives due credit in his GrayBit blog post.) We worked. And worked.
Jona made headway fast and I worked feverishly of the 3-page mini-site. There are several things about these three pages which where firsts to me. You can read my Projects portfolio entry to get all those details there. I’m pretty pleased with it. It’s pretty accessible and should be user-friendly.
As far as the application itself, it’s pretty freaking amazing. It performs well. There can be some loading issues, but in theory only. So far things are actually running smoothly. Yet there are bugs. And it has some errors with one part of one script. It works, but the errors are log-written all the same. And there are other things: PNGs can still give some grief, some of the target-site’s JavaScripts might not work correctly, and if the site is built with font tags and tables, fuggedaboudit, it ain’t gonna happen. This is a tool only the standards crowd will like. One bug created an unusual, unforeseen situation. This was on my site. There were some link issues as the “green” in my web address, green-beast.com, was being convert to a gray, #4b4b4b. The banner isn’t located at #4b4b4b-beast.com/images/etc, so that was a problem. Jona fixed it quickly. Hey, it is in Beta! 
Hopefully it won’t be too much of a bandwidth-hog, but we will have ads on it and that will defray the costs — it was designed with that in mind and has full ad-tracking support built into with the site/application (it’s a kit). At some point we plan to license the tool if there’s an interest. This was put into the build from the onset as well. As it is now, to set up the thing completely, semi-custom, it involves only putting the files on the server, setting the permissions on a few, then setting the config which is only six variables. Tough questions, like install path, email address, etc. Would take a few minutes more than likely. Maybe three or four of them.
Both Jona and I are quite excited by this. It’s neat coming up with something cool and hopefully useful. Not everyone does well with colors. Color-blindness is a condition many deal with on varying levels, so this tool is going to be potentially helpful to developers looking to remove yet another barrier to web accessibility. I will let the thing speak for itself, go pay a visit to GrayBit and try it out.
Oh, if you want to link to it, please do. There is a cool black link icon I made for it. Go ahead and grab it from my blog sidebar, get it from GrayBit, or grab the icon now. Please send links to: http://graybit.com/.
Joe Dolson responds:
Posted: March 8th, 2006 at 9:52 am →
This is great! This will save a lot of time for this kind of accessibility check - much easier than what I’ve found myself doing before! It’ll be bookmarked in mere seconds!
One note, though - when I checked my own site, the links in the footer, which were left at the default link blue, were not color shifted to grayscale.
Thanks!
Mike Cherim responds:
Posted: March 8th, 2006 at 10:32 am →
Thanks Joe. The reason the links aren’t coverted to gray is that those links aren’t specified in the CSS. Colors can only be changed if they are specified as it’s that specification — that color code, name, or RGB value, which is modified by the script. If no color is spec’d, it’ll come though as its default blue/purple. If you spec those links as “blue” in your CSS, they’ll end up gray when you re-check.
webecho responds:
Posted: March 8th, 2006 at 11:19 am →
Accessible Website Design
… a unique online tool created by Mike Cherim and Jonathan Fennochi, of the Accessites.org team.
Neal Venditto responds:
Posted: March 8th, 2006 at 9:09 pm →
Whoah man, you are quite the busy guy with all these projects of yours. Keep the good work going!
Joshua Kendall responds:
Posted: March 8th, 2006 at 11:20 pm →
Ha, I didn’t even realize it was one of your projects. I got to the first paragraph from your homepage and took off to it. I couldn’t figure out how it popped accessites into the form field without an ?= from the link.
Anyway really helpful site. I just have a few things to fix on my site as far as link colors. Other than that it seems fine. Looks like I have another bookmark to add.
Joe Dolson responds:
Posted: March 9th, 2006 at 6:23 am →
Thanks, Mike - that’s interesting. I always leave a couple things on my personal site at default colors just to see what various tools do with default coloration. It doesn’t surprise me that most tools don’t handle them at all - after all, the tool has no way of knowing what ‘default’ is!
Mike Cherim responds:
Posted: March 17th, 2006 at 2:27 am →
Check it out, I just Googled Graybit and found out the site was listed in the Liquid Designs Showcase. I’m tickled. Liquid Designs is….
It should also be noted that GrayBit was mentioned in a news item on that same site!
Mike Cherim responds:
Posted: March 20th, 2006 at 4:55 pm →
I’m told it’s a good thing to be mentioned on Zeldman.com. If so, then here’s a good thing.
Scroll down a bit.
Mike Cherim responds:
Posted: March 30th, 2006 at 12:58 am →
Check it out… GrayBit has been admitted into the Museum of Modern Betas (MoMB). Cool.