Text shadow, and what it costs

A shadow buys separation and spends contrast. This shows the measured ratio, which a shadow does not improve.

Home › Professions › Design › Text shadow

Text shadow, and what it costs

A shadow behind text buys separation and spends contrast. This shows the measured ratio against both the background and the shadow itself.

Local tool — nothing you make here is uploaded
Nothing here leaves this browser. Colours, images, SVG and generated code are processed on your own device. No file is uploaded, nothing you enter is stored on a server, and none of it is passed to the analytics or advertising scripts on this page.
What a contrast check does and does not prove. Meeting a ratio satisfies one WCAG success criterion. It does not make an interface accessible, and it says nothing about focus order, labelling, motion, or whether the thing is usable at all. Automated checks find a minority of real barriers.
What the outline actually is

Eight copies of the text offset in eight directions. It is what text-shadow can do and it is not a stroke: at larger widths the corners show, and it costs eight paints of every glyph.

-webkit-text-stroke is a real stroke and widely supported, but it paints inside the glyph, so it thins the letterform. Neither is right for body text.

The contrast figure is against the background, not the shadow. A shadow makes text easier to pick out from a busy image; it does not raise the ratio, and WCAG measures the text against what is behind it.

If text needs a shadow to be readable, the background is the problem

A shadow is a reasonable way to lift text off a photograph. It is not a way to rescue a pairing that fails on a flat colour — the ratio is unchanged and an audit will say so.

The alternatives that do work: a solid or gradient scrim behind the text, a darker crop of the image, or moving the text off the image entirely.