Text Color

The colour of the text in the column, which everything inside it inherits.

Where to find it
Labelled Text Color in the "Selected Column" section of the Modify drawer.
Per device
Yes — you can set one value for every screen, or separate values for phone, tablet, and desktop.
Underlying CSS
color

In plain English

This sets the colour of the words in the column. What makes it powerful is inheritance: every piece of text inside the column picks the colour up automatically, so you set it once on the column rather than on each component in turn.

That makes it the right tool for a dark section. Give the column a dark Background Color and a light Text Color, and every heading and paragraph inside becomes readable in one move.

As with Background Color, you can pick a keyword or enter an exact hex, rgb, or hsl value.

When you would use it

  • A section has a dark background and all its text needs to be light.
  • A block of text should use a brand colour rather than the default.
  • Secondary text should be a softer grey than the main copy.

How to change it

  1. Select the column, open "Selected Column", then "Text Color".
  2. Choose a keyword or type an exact value.
  3. Everything inside the column follows, unless a component sets its own colour explicitly.
One value, or one per device? Every input in this setting sits under a “Same value for all resolutions” checkbox. Leave it checked for a single value everywhere, or uncheck it to give phones, tablets, and desktops their own. How per-device values work.

Watch out for

  • Contrast is an accessibility requirement, not a preference. Normal body text should be at least 4.5 times as light or dark as its background; large headings can go down to 3.
  • A component with its own hard-coded colour will ignore this setting. That is the component's decision, not a bug in the column.
  • Very light grey on white is the most common accessibility failure on the web. If in doubt, go darker.

Related settings

For developers

The technical reference for what this setting produces: MDN: color. You do not need any of it to use the setting — it is there for whoever is building the components or debugging the published page.

Where to go next