How to choose a readable text color for a background

Text can look clear on your screen and still be hard to read for someone else. The problem is often the contrast between the letters and the background, especially on colored panels, photos, or buttons.

You can sample the exact colors with the Color Picker, then check their contrast ratio against a common accessibility target. The picker reports color values, but it does not calculate the contrast ratio for you.

Choose and check your colors

1. Open the Color Picker and sample the background where the text will appear. Note its HEX value, such as #F2F2F2. Picking colors from anywhere on the screen works in Chrome and Edge on a computer. Other browsers may show a reduced version or no screen-picking feature.
2. Choose a text color and note its HEX value too. If you are changing a design, sample the text from the design. If it has not been added yet, start with a dark or light neutral, then adjust it to fit your palette.
3. Calculate the contrast ratio for the two colors. The Color Picker gives you the values you need, but not the ratio. Use the calculation explained below, or enter both colors into a calculator that reports WCAG contrast.
4. Check the ratio against the smallest text in the design. Aim for at least 4.5:1 for normal text and 3:1 for large text. WCAG defines large text as at least 18 points, or at least 14 points when bold.
5. Preview the text at its actual size and weight, on the actual background. Check every part of a gradient or image background, not just the easiest place to read.

For a background that changes as a page scrolls or a button changes state, check each version. A color pair that passes in one state can become difficult to read in another.

What the contrast result means

At least 4.5:1

The pair meets the common WCAG AA contrast target for normal-sized text. This is a good baseline for paragraphs, labels, and most button text. It does not guarantee that every reader will find the text comfortable, so check the font size, weight, and spacing too.

At least 3:1, but less than 4.5:1

The pair meets the AA contrast target for large text, but not for normal-sized text. Use it only for text that meets the large-text size and weight definition. If the words are important or the font is thin, choosing a stronger contrast is safer.

Less than 3:1

The pair falls below the AA contrast targets for text. Darken the text, lighten the background, or change both. Do not assume that bold type alone makes a low-contrast pair readable.

The ratio changes across a photo or gradient

Use the weakest area behind the text as your guide. A white heading may stand out against a dark part of a photo but disappear over a bright part. Add a solid or translucent panel behind the words, or move the text to an area with more consistent contrast.

How to improve a low-contrast pair

1. Move the text toward black or white. Dark text usually works on a light background, while light text usually works on a dark one. Try a near-black such as #222222 on a pale background, or white on a dark one, then check the ratio again.
2. Change the background instead. If your brand color is important for the text, use a lighter or darker tint of it behind the words. Keep the original shade for borders, icons, or other decorative elements if it does not pass for text.
3. Add a backing behind text on an image. A plain panel gives the letters a more stable background. A shadow or outline can help with a small visual detail, but it does not reliably fix poor contrast across a full line of text.
4. Make small text larger and heavier. This can help readability, and large text has a lower AA contrast threshold. Still, increasing size is not a substitute for checking the ratio, and thin letter shapes can remain hard to see.
5. Check links and controls separately. Make links distinguishable from nearby text with an underline or another visible cue. Check button labels, placeholder text, and hover or selected states too. Do not use color as the only way to show that something is clickable or selected.

Calculate the contrast ratio from color values

The ratio uses relative luminance, a measure of how light a color appears. For each HEX color, get the red, green, and blue channel values from 0 to 255, then divide each by 255. Convert each result, called c, to linear light: if c is 0.04045 or less, divide it by 12.92. Otherwise calculate ((c + 0.055) / 1.055) ^ 2.4.

Call the converted red, green, and blue values R, G, and B. Calculate luminance with 0.2126 × R + 0.7152 × G + 0.0722 × B. Do this for both colors. Put the higher luminance in L1 and the lower in L2, then calculate (L1 + 0.05) / (L2 + 0.05). The result is the contrast ratio.

For example, white #FFFFFF against gray #767676 has a contrast ratio of about 4.54:1, just above the normal-text AA target. The nearby gray #777777 is slightly below that target against white. Small color changes can matter when a pair is close to the limit.

Sample the background again after applying transparency, an overlay, or a filter. The final displayed color may differ from the HEX value of the underlying image or panel.