Hi there,
I am wondering what people’s opinions are on what the colour of the text in this button should be; either light or dark?
I’ve used some tools to check usability and the white one fails, but the dark one passes. However, the dark doesn’t look right/readable, or is it just me?
Any suggestions or feedback would be great, thanks!
Light text:
Dark text:
I find both of them okay but not as easy to read as they could be. I would experiment with bolding the text. Maybe also trying a tiny drop shadow?
Can’t say i like any of the colors in that picture tbh. Personally i think the white looks better, but the tool is probably looking at it as a light-on-light and considering it bad.
Those one with white colour looks more noticeable. However the colour of button text should be assessed against whole page design.
I don’t find the dark text very easy to read.
You’re definitely not imagining it — the dark text does technically pass accessibility tests, but visually it just doesn’t pop the same way. It kind of blends into the button and makes the call-to-action feel weaker. The white text, even if it fails on paper, actually feels much more readable and natural at a glance.
Maybe a good middle ground is tweaking the pink background a bit — slightly darker or more muted — so the white text passes, or even adding a subtle text shadow or stroke to boost contrast. Sometimes the tools don’t fully capture how something feels in real use. It’s all about that balance between compliance and real-world readability.
For stuff like this, I find if you have to question it, there’s probably something wrong, so then I next fall back to tools. In this case, let’s look at the WebAIM contrast checker, which checks how well the foreground and background colors work together, which affects eye strain. Less eye strain = people less likely to leave if your content is good enough.
The goal is at least AA passing, which means most people can read it without eye strain.
Your background color is #FF006F. If I plug that in for the background and use #FFFFFF, the following is returned. So this means it’s fine for headings and icons, but for text on a button or other reading, it’s not good enough.
Obviously, you can’t lighten #FFF any further, which means making the background darker. The tool allows you to lighten and darken both pieces, and the first color for the background I could find which passed accessibility was #E60063.
Amazingly, the tool does seem to pass #000 as the foreground color, which I do not understand as I find it the harder of the two combinations to read. But it does pass.
Perhaps it’s the purple you’ve also got there which makes the black hard to read, but the tool doesn’t allow for three colors.
That being said, from a stylistic perspective, is the pink and purple something essential? It screams comic book super villian to me.
See, if the white text is failing contrast checks but the dark text doesn’t feel right, you might be dealing with more than just color factors like font weight, background shade, and overall button styling can play a big role. Sometimes, a slightly off-white instead of pure white can improve readability without sacrificing contrast.
You could also try increasing the font weight or letter spacing to enhance clarity. If the dark text still feels off, consider tweaking the button’s background color slightly to create a better balance. Peeps, this is just a suggestion!
