Talked to a UX designer at a coffee shop last week about dark mode contrast

She mentioned most people don't check their text contrast against the actual background. I was using a pure black background with white text - thought it looked fine. She pulled out a contrast checker on her phone. Turns out my ratio was way off. Has anyone else tested their dark mode color combos with a WCAG tool?

2 comments

2 Comments

adams8222h agoMost Upvoted

Ha I feel that, I once designed a whole interface using my phone's brightness at max thinking it looked crisp. Turns out I was just burning my retinas and failing every accessibility test known to man.

thompson.xena21h ago

Honestly that contrast checker thing is a total eye opener. I used to just eyeball it too and thought I was good until I actually ran my designs through the WCAG tool. The biggest fix for me was switching from pure black to like a dark charcoal - it still looks dark mode but the contrast ratio jumps way up because pure black is actually really harsh on the eyes. Also I learned that white on black isn't always the best, sometimes a slightly off-white or a warm gray works way better and the contrast checker will actually tell you if it passes. Tbh I've started just keeping the WCAG color contrast checker open as a browser tab now and run every color combo through it before I even start coding anything.