A card that reads beautifully on a white background can turn unreadable in dark mode: light grey text vanishes, a white logo box suddenly appears as a block, and a dark image melts into the background. This tool lets you catch that before you publish. Type your card title, description and image address, and it renders six mock cards: light and dark versions in the style of Discord, Slack and X. Say this plainly: these are mock renders built to match each platform’s colours and layout, not the platforms’ real renderers, so use them to catch contrast and truncation problems, then confirm on the real apps.
What breaks in dark mode
The most common failure is contrast: text colours chosen for white backgrounds, such as medium grey for descriptions, fall below readable contrast on dark grey. The second is the image edge: a card image with a white background looks fine on a light card but appears as a glaring white rectangle on a dark card. The third is truncation: titles cut at about 70 characters and descriptions at about 200, so a title that fits on desktop can lose its ending on a phone. This tool applies those same cut-offs so you see the cut before your readers do.
How to fix what you find
If description text looks washed out in the dark mock, darken the page’s own description colour or shorten it so the key words survive. If your image has a white background, export a version with a transparent or dark-matched background, or add a thin border so the edge reads deliberately rather than accidentally. If the title truncates, move the promise earlier: the first 40 characters carry the click, and anything after 70 is a bonus, not a guarantee.
Why mocks are still useful
Real platform validators exist, but each one checks one network at a time and several need a published URL first. A mock lets you compare all six presentations side by side while the card is still a draft, which is when fixes are cheap. The mock cannot reproduce every detail: font rendering, image cropping and link handling differ on the real apps. Treat a clean mock as a green light to publish and check, not as proof the real card is perfect.
Privacy
Everything runs in your browser. The image address you type is only used to display the image in the mocks on your own screen; nothing is uploaded or stored.
Testing on real devices before you trust the mock
Mocks catch the obvious problems, but real devices still surprise. OLED phone screens show true black, which makes dark cards look darker than on a computer monitor, while older LCD screens wash dark greys towards light grey and can rescue text the mock flagged, or expose text the mock passed. Check the card on one phone with the system set to dark mode and one computer with the app set to dark mode, because system settings and in-app settings do not always agree. App updates also change palettes without warning: a grey that passed last month can fail after an update shifts the background a shade darker. Keep a screenshot of a known-good card on your phone, and when an app updates, compare the new render against it before assuming anything broke. The habit costs a minute and catches the slow drift that no single check, mock or real, can catch on its own.
One more check: the image edge
Pay special attention to the edge of your card image in the dark mocks, because it is the detail most creators miss. An image with a white background that looks intentional on a light card becomes a bright rectangle floating on a dark card, and readers notice it instantly. The fix is simple: export the image with a transparent background when the format allows it, or add a thin border in a mid-grey tone that reads as a deliberate frame on both light and dark cards. The same applies to logos: a dark logo on a transparent background disappears on a dark card, so keep a light version of your logo for dark contexts, or place the logo on a small solid chip that works on any background. Checking the image edge takes ten seconds in the mock and saves the most common dark-mode embarrassment.
Related tools
Social Preview Card Generator · Aspect Ratio Optimizer · Versión en español: Validador de Vista Previa en Modo Oscuro · All Free Online Tools.
Embed this tool on your website — free
Copy the code below to add this working tool to your own page. A small credit link stays with it — that’s all we ask.