Text colour

The text colour class sets the color property. It controls the colour of text.

View GCDS colour guidance to choose the right text colour for your context.

Overview

CSS Shortcut class	Applied style
`text-primary`	`color: var(--gcds-text-primary);`
`text-secondary`	`color: var(--gcds-text-secondary);`
`text-current`	`color: currentColor;`
`text-light`	`color: var(--gcds-text-light);`
`text-transparent`	`color: transparent;`

Examples

This text uses the default Government of Canada text colour.

<p class="text-primary">
  This text uses the default Government of Canada text
  colour.
</p>

This text uses the secondary text colour.

<p class="text-secondary">
  This text uses the secondary text colour.
</p>

This text’s colour is based on the current colour property.

<div class="bg-primary text-light">
  <p class="text-current">
    This text’s colour is based on the current colour
    property.
  </p>
</div>

This is the light text colour.

<p class="text-light">This is the light text colour.</p>

This text is invisible, but still accessible to screenreaders.

<p class="text-transparent">
  This text is invisible, but still accessible to
  screenreaders.
</p>

Conditional styling

Apply this style to specific screen sizes

Use a responsive layout prefix to apply this class only to a specified screen size. The available breakpoints are:

<div class="xs:text-secondary ...">
  ...
</div>

Learn more about the responsive layout prefix.

Apply this style to specific states

Use a state prefix to apply this class only to a specified interaction state. The available states are:

<div class="hover:text-secondary ...">
  ...
</div>

Learn more about the state prefix.

2026-02-12