Picked a dark purple over navy for my homepage banner - contrast saved me

I was messing around with a new landing page design last night and got stuck between two background colors for the hero section. One was a deep navy blue and the other was a dark purple, almost eggplant. I ran both through a contrast checker with white text on top and the purple came in at a 4.8 to 1 ratio while the navy was only 4.1 to 1. Decided to go with the purple since it meets WCAG AA for normal text sizes. The final design actually looks way more interesting too, kind of gives it a creative vibe. Has anyone else had a color you liked fail contrast tests and you had to scrap the whole idea?

2 comments

2 Comments

josephf101d ago

Oh man, I feel that pain... nothing worse than falling in love with a color and watching it fail a contrast test. Glad the purple worked out for you though, that ratio sounds solid.

simon_black1d ago

Gotta admit I've been there with a color too. Picked this deep teal for a living room accent wall, loved it on the swatch but once it was up it just swallowed all the light. Ended up repainting it a lighter sage green and it works way better. Funny how something so small can totally change a room.