contrast-check.md

title	description	layout
Quick Test: Check contrast with your mobile device	Using an ordinary mobile device you can check your site's readability.	post

Estimated time 5 minutes

Having good contrast and readability are an important part of creating an accessible website. One trick you can do to test whether or not your contrast is sufficient enough is by using your mobile device.

1. Set the brightness of your mobile device to its lowest setting.
2. Open up your website on the device and begin browsing around.

If you find something difficult to read, congrats, you found an accessibility issue!

Darn it, I no have to go change my site...

What do you think of changing "phone" references to "mobile device" to encompass tablets, etc. Could also include smart TV's too, but those aren't so prevalent.

Should I mention that on my iPhone the a11yproject.com navigation/logo are hard to read doing this... ;)

Cool. What site did you use to test that theory with?

@gtarnoff Good idea! Though, I noticed an iPads was generally more legible than an iPhone, but good idea nonetheless.
@grayghostvisuals http://daverupert.com == failtown :(

It's so simple you can't read this without actually performing the test yourself.

So easy. Nice work

Yeah, I see what you mean. Gotta squint with the phone 2 inches from my face and getting a headache from it.

Also, so ya know, on my crappy Android 2.2 test device with stock browser the SVG logo for a11yproject.com won't display cuz I don't have SVG support on it. I just get the blue lego box with question mark for images that don't display. No fallback.

Tested daverupert.com with my Motorola DroidX2 Android v2.3.5 using native google browser.

To me it just seems the body copy is a little light. Headings are fine. I guess that means the test works ✊

@davatron5000
@matthewjsmith
@bryanstedman
@thomassjogren

Just Came Across This: Check it out! http://contrastrebellion.com

@grayghostvisuals Yeah, every time a page with a cool design is featured on Hacker News and its contrast is not that good, that link is the top response. Maybe it should also be added to the Resources list?