Text on Image Legibility Checker
Choose an image, drag a box where the text will sit and pick the text colour. You get the contrast across that area and the overlay needed to make it readable.
Drag on the picture to draw the box. The overlay is black for light text and white for dark text, and it is applied to the whole image, as a layer in your design would be.
About Text on Image Legibility Checker
Headlines placed over photos are a common source of poor readability. A picture that looks dark overall can still have bright patches that swallow some of the letters. Checking the contrast of one average colour misses this, so this tool measures the pixels in the area where the text will actually sit.
Choose an image, drag a box where the text will go and pick the text colour. It reports the typical contrast, the weakest five per cent of the area and the share of the area that falls below your target. It then finds the lightest overlay that lifts at least 95% of the box above the target, and gives you the colour to use.
How to use Text on Image Legibility Checker
- Choose your image.
- Drag a box on the picture where the text will sit, and set the text colour.
- Pick the contrast target: ordinary text, large text or the enhanced level.
- Read the verdict, then use the suggested overlay.
Common uses
- Checking a hero image before putting a headline on it
- Finding how dark a banner overlay needs to be
- Choosing between white and dark text for a photo
- Reviewing social images and covers for readability
Frequently asked questions
How is the contrast measured?
For every sampled pixel, the contrast ratio between it and your text colour is worked out with the formula from the web accessibility guidelines. The typical value is the middle of those results and the weakest five per cent is the value that 95% of pixels beat.
Which target should I choose?
Use 4.5 to 1 for ordinary text, 3 to 1 for text that is large or bold, and 7 to 1 if you want to meet the enhanced level. Large text is at least about 24 pixels, or 19 pixels if bold.
Is the suggested overlay for the whole image?
Yes. It is a flat layer over the entire picture, as it would be in your page, in black for light text and white for dark text. A gradient that is strongest behind the text keeps more of the picture visible.
Why is the result based on 95%?
Demanding every single pixel pass would ask for a nearly solid overlay because of a few bright specks. The 95% rule keeps the text readable while leaving the picture visible.