Contrast Ratio and Readability

July 6, 2009.

It's not just when designing for mobile devices that one has to keep an eye on contrast ratios. Where mobiles have to make do with a limited number of colours - 256 to 32k colours are still common - some users suffer from restricted vision or colour perception, making some web sites very difficult to read. And depending on the device you're developing for, some colour combinations suffer so badly when being quantised down to a palette the device can handle, that contrast vanishes.

To this end I modified a palette generator I wrote many years ago. It still prints out a palette of the most frequent colours in an uploaded image, but now it also checks the contrast ratio for each of the colour combinations in a generated palette. Colour combinations having a sufficient contrast ratio are marked and should be preferred for text and navigation.

If you hover your mouse above a combination with an acceptable level of contrast the ratios will be displayed, allowing you to select the combinations with the highest contrast between colour pairs that appear to be similar.

The contrast checking palette generator is available on my tools page.

Web Design for Mobile Phones

June 8, 2009.

It's different, because the browsers are crappier than on the desktop, and almost all mobile phones have their own quirks. Some of these can be really frustrating, like the Nokia phone refusal to reload pages even after the cache has been cleared.

In order to develop a mobile site hosted on a LAN I wrote a small proxy called mproxy whose sole purpose is getting pages and saving them with a unique identifier in a local cache, so one can actually look at the source code of [sometimes] dynamically generated pages to see if, say, Amazon sends different code to different phones.

This obviously only works with phones that have Wifi, but it works like a charm because Wifi is a lot faster, saving up- and download, and it cuts out the middleman because you don't need SIM cards in your phones.

mproxy changes headers both ways in order to get individual files; Keep-alive and ranges are therefore disabled as are several other features which would make life more difficult.

Once you've seen what works and what doesn't you'll use the same proxy with different settings to access pages on the LAN.

To overcome the Nokia cache problem I added a link to http://nokiareload.nop/ at the top of a test page. This address is intercepted by the proxy, which prints a very brief page with a link back to the referring test page. To work around the cache problem go to the proxy generated page, clear the cache, then hit the link pointing back to the referer. Now the phone has to reload the page with all up to date modifications because it's neither in memory nor in the phone's cache.

The proxy will probably compile on any unix-like system and runs in user space without special privileges. To clean the cache you'll have to use system utilities or create a script controlled by cron. Download mproxy here.

Buttons for shopping carts

February 18, 2009.

The buttons that come with OsCommerce and similar shopping cart systems all give the impression of an afterthought. Because creating buttons by hand is rather tedious I created a button generator to do button sets for several popular shopping carts. Feel free to use it whenever you need.

Last Minute Xmas Presents

December 16, 2008.

If you're still looking for a nice Christmas present for those relatives and friends who have - virtually - everything here's one I made earlier: a bit of /bin/bash paired with the output of your digital camera and some rushed CSS can generate a quite nice looking personalised calendar. It probably costs as much or more than one printed professionally but you can't beat the "I spent a lot of time doing this" home made look the end product will have even if you have to march into town to get the spiral binding done.

My [very basic] script should run on all systems except windows.


Blog Archive

© Copyright 1998 - 2012 Klaus Schallhorn.