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?

2 comments

2 Comments

the_leo1mo 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.

nathanh441mo agoMost Upvoted

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.