Spent $60 on a colorblind test for my website and it showed me a huge problem

I used an online tool that simulates different color vision types on my site's dashboard. Turns out my main 'error' and 'success' alerts looked exactly the same to someone with red-green colorblindness. What's the best way to add a pattern or icon to those alerts without making the design look messy?

3 comments

3 Comments

nina8341mo ago

And the bold text thing is key too. Makes the error pop even if the color is the same. Keeps things clean without adding a ton of visual noise.

the_leo3mo ago

Yeah, my buddy had the same shock with his app's login form. He just added a simple checkmark icon next to the success message and an "X" for errors. It cleaned it up a lot because the icons were small and used the same colors, so it didn't feel like extra clutter. He also made the error text bold, which helped. Honestly, you'd be surprised how such a tiny fix solves the whole problem.

nathanh443mo ago

I get what @the_leo is saying about small fixes, but sometimes adding icons just moves the clutter around. If the core layout is messy, a checkmark won't save it. You might end up needing more changes anyway.