Color Contrast and Readable Text

What contrast means

Contrast is the difference in brightness between text and the color behind it. Black on white has very high contrast. Pale gray on white has very low contrast. A page can look elegant in a design mockup and still be tiring or impossible to read for many people, particularly on a phone used outdoors.

Low contrast does not affect only people with diagnosed vision conditions. Aging eyes, glare, dim battery-saving screen settings, small text and tired eyes all make weak contrast worse. A page that reads comfortably on a calibrated desktop monitor in a dark room may be unreadable on a phone in sunlight.

How contrast is measured

Accessibility guidelines express contrast as a ratio between the lightness of two colors, from 1:1 (no difference at all) up to 21:1 (black on white). The commonly cited targets at the standard conformance level are:

• at least 4.5:1 for normal-size text
• at least 3:1 for large text, which is typically around 18 point regular or 14 point bold and bigger
• at least 3:1 for important interface components and graphics, such as the border of a form field or an icon needed to understand a control

Guidelines are revised over time, and some newer approaches model perception differently, so treat these numbers as widely used benchmarks rather than a final word. Be aware that you cannot judge ratios by eye reliably. Colors that look “fine” to someone with good eyesight can fall well below the thresholds.

Where low contrast hides

The body text is rarely the problem. Trouble tends to cluster in secondary elements:

• Placeholder text inside form fields, often a pale gray that vanishes on screens in bright light
• Footer text and legal notices styled to be unobtrusive
• Captions, dates and metadata shown in small, light type
• Text over images or gradients, where contrast changes across the line
• Buttons, especially a light-colored text label on a pastel or brand-colored background
• Disabled states, which may be intentionally dim but still need to be understandable
• Link color, where a link barely differs from surrounding text
• Focus indicators and borders, which need to be visible against their surroundings

The combination of small size and low contrast is the worst case, because both reduce legibility.

How to evaluate your own pages

You do not need special equipment.

1. Eyeball test, then verify. Squint or step back from the screen. Anything that fades out is a candidate for measurement.
2. Use a contrast checker. Many free tools and browser features let you pick or enter two colors and read off the ratio. You can compare against the targets above. Because the tool lists will change, no particular one is recommended here.
3. Test the actual colors. Look at the real foreground and background values used on the page, including semi-transparent overlays that change the effective color.
4. Check states. Test hover, focus, visited, selected and disabled styles. A button that passes in its normal state can fail when hovered.
5. Test text over images. Check the lightest and darkest parts of the image behind the text. A semi-opaque panel behind the text, or a darker overlay, can stabilize the contrast.
6. Try the page in different conditions. Turn the phone brightness down, move near a window, and view the page in grayscale. If hierarchy or meaning disappears, color or contrast is carrying too much weight.

An automated scan can flag many text failures quickly, though it may miss text over images and judge some overlays incorrectly. It is a good starting point for the broader checks described in accessibility checks.

Do not rely on color alone

Contrast is related to, but different from, color dependence. Some people have a color vision deficiency, so do not use color as the only signal. Errors shown only in red, required fields shown only by color, or a chart whose lines are distinguishable only by hue can be lost on some readers. Add text, icons, underlines or patterns.

Make readability choices beyond the ratio

A passing ratio is the minimum, not a guarantee of comfort. Other factors matter:

• Size. Body text that is very small stays hard to read even at a good ratio. Mobile font sizes are covered with tap targets.
• Weight. Thin font weights lose strength on screens, so a light weight in a dark gray may still look faint.
• Line length and spacing. Very long lines and tight line spacing wear readers out. Moderate line height and shorter lines help.
• Pure black on pure white. Some readers find the maximum contrast glaring, so a very dark gray on an off-white background is common. It should still comfortably pass the thresholds.
• Dark mode. If you offer a dark theme, test it separately. Passing ratios in the light theme say nothing about the dark one.

These principles overlap with plain language: readable presentation and readable wording work together to make a page easy to take in.

Fixing problems without a redesign

Often the repair is small. Darken the secondary text color a step. Add a solid background behind text on a photo. Increase the font weight of captions. Change one button color in the style sheet and it updates everywhere. Record the changes and recheck the pages, keeping a note in your change log so you know what was adjusted and when.

Expect disagreement. Designers may prefer lighter palettes, and brand colors may not pass. Where a brand color fails, it can often be kept for large decorative elements while a darker variant is used for text. Results depend on the audience, and no ranking outcome is guaranteed, but a page that more people can read comfortably is a sensible aim in itself.