How to conduct a homemade vision test on your website
Over the last six months, my eyes have gone through an interesting transformation. In October, I went under the laser and with Lasiks, changed my eyesight to 20/15. Prior to the surgery, I had several tests on my eyes, including a “super” dilation. I’m not sure of the medical term, but it meant my eyes stayed dilated for 48 hours, I had a big headache, and really cool farsightedness (hyperopia). I could completely relate to my parents and their trombone reading style. Anything closer than my out stretched hand was completely out of focus.
Before surgery, I had 20/60 vision. Not bad, but I couldn’t read an alarm clock in the dark without squinting. I’ve been near-sighted most of my life and for most of my computer work, I could work without glasses. I also preferred smaller fonts and tiny details.
During my 48 hours of super dilation, being a bit of a computer addict, I kept working. I noticed an interesting effect with my eye sight and the computer screen. The text on most sites was hard to read, so I increased the browser text size. On most sites, this was enough to make it legible. There were a few sites that were almost impossible to read, no matter how large I made the fonts. These were pages that had a dark background and light text. The words danced on the pages and had a halo around them. I confirmed this situation with my eye doctor who has “real” farsightedness. I had never realized how difficult it was to read white text on a black or dark background. It was enough to make me angry because of dizziness I felt after looking at the text.
That experience was six months ago, and today, I went in for a follow up appointment. I received the lucky experience of receiving the dreaded eye drops and the uncontrolled dilation of my eyes. I decided to use the situation to my advantage and perform a vision test on websites.
To confirm my initial thoughts and to add a few:
- Light text on a dark background is incredibly hard to read. Hard enough to read that I avoided sites with large areas of light text on dark backgrounds.
- Black text on a white background is readable, but jarring.
- Black text on a slightly gray or lightly colored background is the easiest to read.
- San serif fonts make it difficult to distinguish between rows of text because the slim vertical lines of the letters don’t seem to end.
- Serif fonts are the easiest to read, and give an ending point to each letter, allowing smaller text to be legible to strained eyes.
- Fonts smaller than 14px are difficult to read.
- Overall, Web 2.0 is not fun to look at.
If you’d like to perform this test on your own, and you’ve never suffered from hyperopia or age-distinguishing presbyopia, I suggest you ask your doctor on your next eye exam for dilation drops and do some web surfing shortly after. This useful test has real world application in web design, as most of the population over 40 has some form of farsightedness, or other eye disorders such as macular degeneration. In making our sites truly accessible, visual markup is as important to consider as our html markup.
~ For my next article, I plan on writing about the effects of Lasik surgery: being intolerable of LCD TVs less than 1080p, and any type of monitor except for a glossy Mac Cinema Display.