How to Choose Caption Colors for a Website: Making Small Text Easy to Read
A short description under a photograph, such as “Immediately after planting,” is often displayed in smaller type than the main article. This text is a caption. It connects a photograph or chart to the surrounding explanation. But if a caption is made too pale to attract less attention, it may become difficult to read the information that explains the picture. Using a fictional home-gardening progress article, this guide looks at caption colors, backgrounds, and their position relative to images.
Keep Captions Visually Subordinate Without Making Their Information Hard to Read
A caption tells readers what a photograph or chart shows. Imagine two photographs of a young plant with the explanation “Left: just after planting / Right: two weeks later.” That wording clarifies what the pictures are comparing. Even if it appears in smaller type than the main article, its contrast with the background must remain sufficient because the wording is needed to understand the images.
Color is not the only way to make a caption look less prominent. Its size and placement can establish its relationship to the picture. For example, begin with 16px body text and 14–15px captions, positioned directly below the image and aligned with its edges. Here, px means pixels, a unit used to specify text sizes and spacing in web design. Those sizes are starting suggestions, not guarantees of readability, so check them in the actual layout.
A visible caption has a different role from alternative text, which describes image content for people who cannot see the image. Adding a visible caption does not remove the need to consider suitable alternative text where required.
Compare Caption Text on White, Pale, and Dark Surfaces
The following examples use HEX color codes, written with a hash sign followed by six hexadecimal characters from 0–9 and A–F. A contrast ratio expresses the difference in relative luminance between foreground text and its background.
Example 1: A Photograph with a Caption on a White Article Background
- Set the article background to white #FFFFFF and the main body text to deep blue-gray #263846. The contrast ratio for the body text is approximately 12.09:1.
- Use slightly lighter blue-gray #536775 for the caption beneath the picture. Its contrast ratio against white #FFFFFF is approximately 5.89:1. Keep the caption aligned with the photograph so that it is clear which picture the text explains.
- Making the caption as pale as light gray #A5AFB5 reduces its contrast against white #FFFFFF to approximately 2.23:1. This does not reach the 4.5:1 requirement for normal-sized text, so avoid this pairing for meaningful captions.
A caption such as “Left: immediately after planting / Right: leaves two weeks later” can sit directly below the two comparison photographs as one short explanation. If the caption is too far away, readers may have to work out which image it belongs to before they can compare the pictures.
Example 2: Captions Inside Pale Cards or Dark Panels
When several progress photographs are arranged in cards, the card background could be pale green-gray #ECF2EE. Deep blue-gray body text #263846 has an approximate contrast ratio of 10.65:1 against that surface, while blue-gray caption text #536775 has approximately 5.19:1. A color that works on a white surface still needs to be checked after the background changes.
Alternatively, if a photograph and its caption are placed inside a dark blue-gray #273F49 panel, switch the caption to light gray-blue #E8F0F3. This pair has an approximate contrast ratio of 9.61:1. Rather than carrying over the dark caption color from the white version, choose the text color in relation to the surface on which it actually appears.
Check Small Captions and Text Placed Over Photographs
Captions around 14px still count as normal-sized text for contrast purposes. Under WCAG (Web Content Accessibility Guidelines) Level AA, normal-sized text generally requires a contrast ratio of at least 4.5:1, while large text requires at least 3:1. A caption that communicates meaningful information should therefore be checked against the normal-text threshold when it is small.
When a caption is overlaid directly on a photograph, the background changes from one part of the image to another. White or black text will not automatically be readable everywhere. Where possible, move the caption below the photo onto a solid surface. If it needs to stay over the image, test the actual colors behind its letters. On a phone, check that wrapped captions remain next to their photographs and that the type is not uncomfortably small.
Information needed to interpret a diagram or understand when a photograph was taken should not be faded excessively. If a caption needs to look quieter than body copy, making it slightly smaller and keeping it directly below its image often establishes its role more safely than choosing an extremely pale color.