Online Tool Store
· Updated · 5 min read
How to Check Text Readability on an Image (With Examples)
Manesh Jayawardhana
CIO & Co-founder
To check text readability on an image, inspect the background directly behind the letters, adjust the text color or background treatment, and review the result at its final display size. A headline can look clear over one part of a photo and disappear over another.
Test your image’s text readability with the free Text on Image Tester. Choose an image, enter your headline, adjust color, size and shadow, then download a PNG preview.
The tool gives a rough brightness warning. It does not calculate a WCAG contrast ratio, and a missing warning does not establish that every letter is readable.
How to test text on an image
- Open the Text on Image Tester and choose your background image. You can also try the sample gradient first.
- Enter the actual headline or caption you plan to publish. The tester centers a single line of text.
- Adjust the text color and font size. Toggle the drop shadow to compare the visual result.
- Inspect every word, especially where the background changes from light to dark. Treat the warning as a prompt to look more closely.
- Select Download PNG and review the exported image at the size your audience will see it.
- For different placement, line wrapping, a background panel or a mobile crop, make those changes in your design editor and check the final version again.
Your selected image is processed locally in the browser. You do not need to send it to a server to create the preview.
Three examples of improving text readability
These are design recipes to try with your own image. Crop, placement and background-panel changes happen in your image editor; the tester provides text color, size and shadow controls.
| Starting design | Change to try | What to check afterward |
|---|---|---|
| White headline over a bright sky | Try dark text such as #111827, initially with shadow off. | Inspect letters over both clouds and darker scenery. A single color may not work across the whole headline. |
| White text across alternating light and dark detail | Add a solid dark panel behind the complete headline in your editor, with padding around the letters. | Ensure the panel covers every letter in every crop. A solid panel provides a consistent background to measure. |
| A desktop banner reduced to a narrow mobile image | Shorten the headline or create a separate mobile crop in your editor, then test that version. | View the export at its actual mobile width. Large source-file lettering can become small on screen. |
For a reproducible color comparison, white text (#FFFFFF) on flat light gray (#EEEEEE) has approximately 1.16:1 contrast. Changing the background behind the text to solid dark gray (#333333) gives approximately 12.63:1. These ratios describe those flat color pairs; they are not measurements of an entire photograph.
What the readability warning can and cannot tell you
The tester compares the text color’s brightness with the average brightness of a rectangular background region behind the text. This can flag obvious problems, but an average can hide a bright patch behind one word.
The warning does not measure the effect of the shadow, calculate a WCAG contrast ratio or certify accessibility. Inspect individual letters as well as the overall preview. If a busy photo makes the result uncertain, a solid panel behind the text gives you a consistent background to check.
What contrast ratio should text on a photo have?
WCAG’s minimum contrast requirement is generally 4.5:1 for normal text and 3:1 for large text, subject to its exceptions. Large text means at least 18 pt, or 14 pt bold. Judge size at the final display dimensions: shrinking an image also shrinks its lettering. See the W3C explanation of minimum contrast.
A photo has different colors beneath different letters. Do not treat a single background sample or an average as proof that the whole headline passes. Check the relevant foreground/background combinations, or use a consistent background panel you can measure reliably.
Common mistakes before exporting a banner or thumbnail
- Choosing a text color from the overall photo brightness instead of inspecting the area behind the words.
- Assuming a missing warning means that a design passes an accessibility check.
- Using a heavy shadow to rescue text that would be clearer with a different color or background.
- Testing short placeholder text instead of the actual headline.
- Skipping the final mobile-size preview or checking only one crop.
Frequently asked questions
Should I always add a shadow to text on a photo?
No. A shadow can help separate letters from background detail, but it can also soften their edges. Compare both versions. If parts of the headline still disappear, change the color, placement or background treatment in your design editor.
Can I check a YouTube thumbnail or social media graphic?
Yes. Use the actual image and headline, then inspect the exported result at the size it will appear in a feed. Prepare separate crops in your editor when different platforms use different shapes.
Can the tester move text or add an overlay?
The current tester centers a single line and lets you adjust its color, size and drop shadow. Use your design editor for text placement, multiple lines, background panels and crop adjustments.
Is image text readability the same as a readability score?
No. Image text readability concerns visual legibility: contrast, size, placement and background detail. A readability checker evaluates written language, such as sentence complexity. Use the image tester when the problem is seeing the words on a photo.
Is my image uploaded to a server?
The preview uses your selected file locally in the browser, and the PNG is generated there too.
Try the free Text on Image Tester with your real headline, then inspect the final export before publishing.