How do I change text color in Webflow?

Set the color on the words

Select the text element. Open Style panel, Typography, and click the color swatch. That opens the color picker. Choose a hue, then a shade, or paste a hex code. You can also type RGB or HSB values. The opacity slider makes the color see-through. 100% is fully opaque.

Name a class before you color the second heading. The color is saved on the class. Styling the tag, such as All H1 Headings, changes every heading of that level.

Example: the pricing page should use near-black text on a white section, with the plan name in the same color as the price. Select the price, set the class Price, and pick the color. Do not recolor the whole section if only the price should change.

See where the color comes from

A parent passes typography to the text inside it. If you color a section, the headings and paragraphs in that section inherit the color until something more specific overrides it. The Body (All pages) tag is the site-wide default. Select the Body element, choose that tag in the Selector, and set the color you want most text to use.

An orange mark on the color property means the value is inherited. Click it to see which class or tag it comes from. To break the chain, select the child and set a color. Webflow creates or updates a class when you style that property. Rename the class in the Selector so the next person can tell Price from body text.

A span can color one word inside a paragraph. Highlight the word, name a class, and set the color. Clear formatting from the text toolbar if the span was a mistake. Use a span for one word, not for a whole paragraph you could have styled as its own class.

Read the rating in the picker

The contrast checker appears in the color picker when you are editing text color. It compares the text with the solid background behind it and shows Fail, AA, or AAA. The rating uses the background color plus the font size and weight. Bold text can be a bit smaller and still pass. The question mark in that section explains the rating for the element you selected.

For AA, the minimum Webflow cites is 4.5 to 1 for normal text and 3 to 1 for large text, which it describes as 18 point or 14 point bold. AAA is 7 to 1 for normal text and 4.5 to 1 for large text. The eye icon shows where on the palette the current hue and opacity land in AAA, AA, and Fail.

If the rating says Fail, change the text color and watch the rating update. Do not publish a paragraph that still says Fail on a solid background.

The checker does not rate text on top of a photo. A white heading on a busy image can look fine in the picker and fail for a visitor. Put those words on a solid area, or darken the photo until you can read the heading without effort. The gradient guide is a fade behind type, which is still not a contrast score.

Keep long text dark enough

A medium gray paragraph on white is a common Fail. Decorative labels can be quieter than body copy. A sentence someone must read should not be. Webflow notes that high contrast does not rescue a very thin font. Weight and color both have to work.

All caps are harder to read in a long line, and underlined text looks like a link. Color is not a substitute for either choice. If a phrase needs emphasis, use a span for weight or a real link, and keep the color readable.

Set one body color on Body (All pages), then override only the classes that must differ, such as a price or a caption. A page with five grays usually means five one-off picks. A shared color can live as a variable so a later change updates every place that uses it. The variables guide is that shared value. This page is the picker and the rating.

Publish the color you checked

The Designer shows the new color before the live domain does. Publish the site, open the page, and read the paragraph on a desktop width and on a phone. A color that passed on a large heading can fail when the same hex is used on small text, because the checker accounts for size.

Example: body text is a near-black with an AAA rating on white, the caption is darker than a pale gray and still at least AA, and the white heading sits on a solid brand color rather than on the photo behind the hero.

Changing text color on a page you already have is ordinary type work. The membership is one plan for every existing Webflow site: $999 per month, including 10 hours of Webflow work. Additional work is $75 per hour and starts only after you approve a written estimate.