A user with low vision told me my color contrast was a real problem

They said the light gray text on my white background was impossible to read, even with their screen magnifier. I ran it through the WebAIM contrast checker and it scored a 2.1, way under the 4.5 minimum. I changed the text to a dark charcoal and it made a huge difference. Anyone else have a good tool for checking contrast on mobile apps?

3 comments

3 Comments

wadeyoung3d ago

Stark is a great start, but you really need to test on actual devices too. A simulator can't catch how glare or a cheap screen changes the colors. Why not keep a few old phones around with brightness turned down low? Seeing your own app under bad conditions is the real test.

phoenixp303d ago

Keep a cheap tablet in a sunny window. I mean, you can run all the sims you want, but seeing your own app wash out in real glare is a different story. I had this light blue button that looked fine inside, but in my car it just vanished. Testing on actual hardware under bad light is the only way to know for sure.

uma_patel193d ago

Oh man, that WebAIM checker is a lifesaver. I was just reading a blog post by a designer who said they use the Stark plugin for Figma and Sketch. It does contrast checks but also simulates different types of color blindness right in the design file. Super handy for catching stuff early.