AI / Design Communication & Image Prompting
Dark-mode readability risk
Measure contrast, glow, and elevation instead of eyeballing a dark theme
This is my dark-mode palette: [values or screenshot]. Assess readability risk and give numbers for each item: 1) Contrast ratios for body text, secondary text, placeholder, and disabled states against their backgrounds — flag anything under 4.5:1; 2) Whether the background should be pure black or an elevated surface like #121212, with the tradeoff; 3) Which saturated colours vibrate against a dark ground and need desaturating or lightening; 4) Shadows are nearly invisible in dark mode — what should carry elevation instead; 5) How to handle images, illustrations with white backgrounds, and 1px dividers; 6) Where fatigue sets in after ten minutes of reading. Finish with a revised palette.
How to use
Do not judge dark-mode readability on a monitor; check it on a phone with brightness at 30%.
Good for
- Dark mode ships next week and the mockup simply uses the dark version of the brand palette — you need to know which pairings are unreadable on a real device first.
- iOS and Android give different dark-mode guidance and the team wants one system — quantify the risk first, then decide where the platforms must diverge.
Not for
- Someone inverted the light UI once and called it dark mode — inversion is not design; that needs rebuilding, not assessment.
- The product is mostly image browsing with very little text — contrast is not the weak point; image brightness control should come first.
Example
Input
A dark screen: background #000000, body text #FFFFFF, secondary text #8A8A8E, primary button #0A84FF with white label, cards as rgba(255,255,255,0.06) over pure black, 1px dividers at rgba(255,255,255,0.1)
What you get
Body text on pure black is 21:1, but pure white on pure black halates on OLED, so it recommends #121212 behind #E6E6E6, which still gives 15.8:1. Secondary text at #8A8A8E on #121212 is only 4.3:1 and needs to move to #A1A1A6. The primary button's white label on #0A84FF is 3.0:1 and fails; the fix is a dark label or lightening the blue to #409CFF. Dividers at 0.1 opacity fall below the visible threshold on pure black and go to 0.16. Elevation moves to surface brightness and 1px borders rather than shadow.
Common mistakes
- Checking only body-text contrast — the things people actually fail to read are secondary text, placeholders, and disabled states.
- Building dark mode as pure black plus saturated colour — the colour fringes and glows, and long sessions feel worse than light mode.
Try tweaking it like this
- Split it: a pure-black version for OLED battery saving and a #121212 version for reading, then compare — one product can hold both tradeoffs.
- Add a brand-colour substitution table for dark mode — brand colours usually need their own lift and cannot be carried over as-is.