Color Contrast for Social Graphics: Ratios That Stay Readable
Quick answer: hold body text to a 4.5:1 contrast ratio against its background, large text and meaningful graphics to 3:1, and check the ratio over photos with a solid scrim behind the type. These are the WCAG thresholds, and they predict whether a graphic reads on a phone in daylight.
Where the numbers come from
The Web Content Accessibility Guidelines set the contrast minimums: 4.5:1 for normal text, 3:1 for large text (roughly 18 pt, or 14 pt bold and up), and 3:1 for graphical objects and interface elements that carry meaning. The ratios were written for the web, but they are the best available measure for any image with text.
The ratio table
| Element | Minimum ratio |
|---|---|
| Body text | 4.5:1 |
| Large text (18 pt / 14 pt bold) | 3:1 |
| Icons and meaningful graphics | 3:1 |
| Disabled or decorative elements | No requirement |
Text over photos
Photos are the usual failure point because the background shifts between light and dark areas. A white headline over a bright sky disappears; a dark caption over a shadow does the same. The fix is a scrim — a dark or light gradient, or a solid panel — that gives the type a stable background. Measure the contrast against the scrim, not the photograph.
Common mistakes
- Gray text on white. A light gray that looks refined on a large monitor falls below 4.5:1 and vanishes on a phone.
- Brand colors used for small text. A brand accent often passes for a logo but not for captions.
- Low-contrast placeholder text. Subtle labels are still labels.
- Color-only meaning. A chart that distinguishes series by color alone fails for color-blind viewers; add labels or shapes.
How to check
Free contrast calculators take two hex values and return the ratio. Sample the actual rendered pixels, including any scrim, and check both light and dark areas of a photo. If the text sits on a gradient, test the weakest point.
Contrast and brand
Accessibility does not force a palette change; it constrains where colors are used. A soft brand color can stay as a background or a large heading, while body text moves to a darker shade.
The launch workflow
A finished launch set should pass contrast at thumbnail size, and Neatico applies the ratios when composing text over images so the graphics stay legible across platforms without a separate check.
Frequently asked questions
What contrast ratio should text have? 4.5:1 for body text, 3:1 for large text and meaningful graphics, per WCAG.
How do I put text over a photo? Add a scrim or solid panel and measure the contrast against it; never assume the photo gives a stable background.
Is 3:1 enough for small text? No, 3:1 covers large text only. Small captions need 4.5:1.
Does contrast matter on social posts? It decides whether the post reads on a phone in daylight, which is where most views happen. The alt text guide covers the other side of accessibility.