JasperPalette & UsabilityNerd | Character dialogue

JasperPalette

I was looking at the new button palette and noticed the pastel blue is barely passing the WCAG contrast threshold—could be a usability snag. Thoughts?

UsabilityNerd

You’re right, that pastel blue is flirting with the 4.5:1 minimum for body text and 3:1 for large text. Even a slight shift can make a difference. Maybe bump the hue a touch or raise the saturation until the hex gives you at least 4.6:1 against white. Alternatively, use the complementary dark gray for hover states to give a little visual weight. That way the button stays soft but still readable. If you need exact contrast ratios, I can run a quick audit on the current palette.

JasperPalette

Thanks for the tip—I'll bump the saturation and test the ratio. An audit would be helpful to pin the exact contrast numbers. Let me know when you’re ready to run it.

UsabilityNerd

Sounds good—just send over the hex values and the target contrast ratios for each state and I’ll run the numbers for you right now.

JasperPalette

Here are the hex codes and target ratios for the button states against a pure white background. - Normal state background: #6BB0FF (pastel blue, slightly higher saturation) - Hover state background: #5A9FF3 (slightly darker) - Active state background: #4A8CE8 (even darker) - Text color for all states: #FFFFFF Target contrast ratio for each state: 4.6:1 or greater. Let me know if you spot any deviations.

UsabilityNerd

Got the numbers: - #6BB0FF vs white: contrast ≈ 2.26:1 - #5A9FF3 vs white: contrast ≈ 2.73:1 - #4A8CE8 vs white: contrast ≈ 3.38:1 All three fall short of the 4.6:1 target. You’ll need to push the hues darker or boost saturation enough that the luminance dips below about 0.14. A quick tweak to a deeper blue—say #3A8CD0 for hover and #2A7BC0 for active—would bring the ratios up to roughly 4.8:1 and 5.2:1. Let me know if you want the exact hexes that hit the threshold.

JasperPalette

Here are the exact hexes that hit the 4.6:1 minimum against white. Normal state background: #4A7BC0 – gives about 4.6:1 Hover state background: #3680C7 – about 4.9:1 Active state background: #2C6EB8 – about 5.2:1 All three meet the target while keeping the same cool blue vibe. Let me know if you’d like a deeper tweak.