You've just published a blog post. The headline is strong, the content is solid. You share the link on LinkedIn, and the preview card pops up — but it's a muted gray box with thin white text that barely registers against the feed. Nobody clicks. The problem isn't the content. It's the color choices in your OG image.
After creating and testing OG images with different color schemes on ogimgen.com, I found that swapping a color palette can increase visual contrast dramatically — and that directly affects whether people stop scrolling and click. Here's what I tested and what the results suggest.
The Contrast Test: Four Color Schemes on One Headline
I opened the OG Image Generator and typed the same headline — "10 SEO Strategies for 2026" — four times, each with a different template. The generator's five templates each use a distinct color palette. I downloaded all four and ran the URLs through the OG Checker to compare how they'd render as social previews.
Modern Blue — Dark navy background (#1e293b), white title text, a blue accent strip. This is the safest choice. The high contrast between dark background and white text ensures readability even at small thumbnail sizes. The blue accent connects visually to platforms like Facebook and LinkedIn, making the card feel native to those feeds.
Minimal Dark — Near-black background (#0f172a), white text, no accent. The contrast ratio here is extreme — roughly 15:1 against white. This means the text is perfectly readable at any size. However, in a dark-mode feed (Twitter/X), a dark-on-dark card can blend into the background and lose visual presence.
Elegant Teal — Teal background (#0d9488), white text, dark bottom strip. This is a mid-tone background. The contrast is adequate but not extreme — roughly 5:1 against white text, which passes WCAG AA standards but dips below the ideal for small thumbnails. The teal stands out beautifully in a mostly-blue LinkedIn feed because it's different without being jarring.
Warm Sunset — Warm orange-red gradient (#f97316 to #dc2626), white text. The gradient adds visual depth, but the mid-tone sections of the gradient reduce text contrast. On a white-background feed like LinkedIn's light mode, the card pops because it's warm-toned against the cool UI. On a dark mode feed, the card still works because the gradient edges are bright enough.
What Color Psychology Says About Social Sharing
Color psychology isn't a pseudoscience — it has measurable effects on attention and behavior. For OG images specifically, three principles matter most:
Contrast trumps everything. A beautiful pastel palette with low contrast will always underperform a clashing high-contrast scheme at thumbnail sizes. If someone scrolls past your card in 0.2 seconds, the only thing that registers is the luminance difference between text and background. Stick to dark background / white text or white background / dark text — your call-to-action won't work if nobody reads it.
Color differentiation from platform UI. Facebook's interface is predominantly blue (#1877F2). LinkedIn uses blue too (#0A66C2). Twitter/X uses black/white depending on theme. If your OG image uses the same dominant color as the platform's chrome, your card blends in. A warm-toned card (orange, teal, purple) in a blue feed naturally draws the eye because it activates different color receptors. I noticed this most clearly with the Elegant Teal template on LinkedIn — the teal contrast against LinkedIn's blue UI was immediately noticeable in the preview.
Brand consistency builds recognition. This one conflicts with the differentiation principle. If your brand uses blue, should you use a different color for OG images to stand out on blue-platform feeds? My take: use your brand colors as accents (bottom bar, logo area, icon) and a complementary high-contrast color for the main background. This way the card is still recognizable as yours, but it doesn't disappear into the platform's UI.
Platform-Specific Color Tips
| Platform | UI Color | Recommended OG Card Style |
|---|---|---|
| Blue (#1877F2) | Warm or dark backgrounds. Avoid blue-dominant cards — they blend with the chrome. | |
| Blue (#0A66C2) | Teal, orange, or purple backgrounds stand out against LinkedIn's blue-white layout. Dark backgrounds with white text work consistently. | |
| Twitter/X (Light) | White (#FFFFFF) | Dark backgrounds create a strong floating card effect against the white feed. |
| Twitter/X (Dark) | Dark (#15202B) | Light or vibrant backgrounds prevent the card from disappearing into the dark chrome. |
| Discord | Dark (#313338) | Any high-contrast card works. Discord shows the full image without cropping, so text placement is less restrictive. |
| Slack | White (#FFFFFF) | Slack generates a small inline preview. Bold, simple designs with large text work best. |
The Safe Zone Principle for Color
Color contrast only works if the text stays readable. Platforms crop OG images differently — Facebook clips about 20% off each side on mobile, Twitter adds letterboxing for 2:1 cards, LinkedIn centers the image and crops top/bottom.
Keep all text within the center 80% of the image (a 960 × 504 area centered in your 1200 × 630 canvas). When I tested with the OG Checker tool, I could see how the preview changed across platforms — text that looked perfectly placed in the full image ended up cropped on Facebook's mobile preview. The solution: use the center-safe-zone rule for both placement and color contrast. Test each template with the checker before committing.
Quick Color Checklist for OG Images
- Minimum contrast ratio of 4.5:1 between text and background (WCAG AA). For small text in thumbnails, aim for 7:1.
- Don't use the platform's dominant color as your main background — your card will blend into the chrome.
- Use brand colors as accents, not the full background. A colored bottom bar or logo placement is enough for recognition.
- Avoid light text on mid-tone backgrounds — pastel yellow on light blue looks elegant in full size but disappears at thumbnail scale.
- One strong visual element per card. If your background is a gradient, keep the text simple. If you use bold typography, keep the background flat.
- Test on dark mode and light mode. The same card can look very different on Twitter/X dark theme vs LinkedIn light theme.
Putting It into Practice
Here's the workflow I used for this article. Open the OG Image Generator, pick the Elegant Teal template (it stands out against both Facebook's blue and LinkedIn's blue better than Modern Blue does), enter your title with a distinctive subtitle, download the PNG. Then run the URL through the OG Checker to see how it previews across platforms — the checker tool shows you exactly how your card will look, so you can adjust colors before you publish.
If you're publishing to multiple platforms, generate two versions — one dark-background card and one warm-toned card — and test which one gets more engagement on each platform. Based on my tests, dark backgrounds perform better on Twitter/X (light mode) and LinkedIn, while warm-toned cards pop on Facebook's blue feed.
Ready to create your color-optimized OG image? Try the generator now — it takes 30 seconds to pick a template, enter your title, and download. Then verify it with the OG Checker before sharing.