Colours in Canvas

Canvas' Rich Content Editor gives you access to a range of colours for text and backgrounds. Not all of them are safe to use for body text — some only have enough contrast for headings or large UI elements, and others should be reserved for backgrounds, borders, and highlights only.

The tables below summarise which colours are suitable for use as text on a white background in Canvas content. They are grouped by their WCAG contrast rating when used as text on white:

AAA / AA — suitable for body text on white.
AA — suitable for large text, headings or UI elements on white.
Accent / background only — not recommended for text on white; best used for backgrounds, borders or highlights.

Useful references

AAA-compliant colour combinations

The combinations below all meet WCAG AAA contrast (7:1 ratio or higher). Use these when you want the strongest possible accessibility guarantee — for example in body paragraphs, callout boxes, and alert messages.

Dark text on light or coloured backgrounds

Text colour	Background colour	Ratio
Black `#000000`	White `#ffffff`	21:1
Dark `#232333`	White `#ffffff`	15.4:1
Navy `#000080`	White `#ffffff`	16.1:1
Medium Blue `#0000cd`	White `#ffffff`	11.2:1
Indigo `#4b0082`	White `#ffffff`	13:1
Dark Green `#006400`	White `#ffffff`	7.4:1
Saddle Brown `#8b4513`	White `#ffffff`	7.1:1
Black `#000000`	Yellow `#fff200`	18:1
Black `#000000`	Pale Green `#98fb98`	16.6:1
Black `#000000`	Pale Turquoise `#afeeee`	16.4:1
Black `#000000`	Lavender `#e6e6fa`	16.8:1

Light text on dark backgrounds

Text colour	Background colour	Ratio
White `#ffffff`	Black `#000000`	21:1
White `#ffffff`	Dark `#232333`	15.4:1
White `#ffffff`	Navy `#000080`	16.1:1
White `#ffffff`	Medium Blue `#0000cd`	11.2:1
White `#ffffff`	Indigo `#4b0082`	13:1
White `#ffffff`	Dark Green `#006400`	7.4:1
White `#ffffff`	Saddle Brown `#8b4513`	7.1:1
Pink `#ffd6e5`	Medium Blue `#0000cd`	8.5:1

Colours suitable for body text on white (AAA / AA)

Colour	Hex	Rating (on white)
Black	`#000000`	AAA / AA
Dark	`#232333`	AAA / AA
Navy	`#000080`	AAA / AA
Medium Blue	`#0000cd`	AAA / AA
Saddle Brown	`#8b4513`	AAA / AA
Teal	`#008080`	AAA / AA
Medium Violet Red	`#c71585`	AAA / AA
Indigo	`#4b0082`	AAA / AA
Crimson	`#dc143c`	AAA / AA
Dark Green	`#006400`	AAA / AA

Colours for large text, headings or UI (AA on white)

The colours below meet AA contrast for text on white, but are best reserved for larger text (such as headings) or for interface elements like buttons and labels, rather than long paragraphs.

Colour	Hex	Rating (on white)
Slate Grey	`#708090`	AA
Medium Blue Slate	`#7b68ee`	AA
Red	`#ff0000`	AA
Orange Red	`#ff4500`	AA

Accent and background colours (not for text on white)

The colours below are generally not suitable for body text on a white background. They can be used as background fills, borders, highlights, or within graphics, provided the contrast with any overlaid text is checked.

Colour	Hex	Notes
White	`#ffffff`	Use as a background, not as text on white.
White Smoke	`#f5f5f5`	Use as a light background panel.
Deep Sky Blue	`#00bfff`	Accent or background; not recommended for text on white.
Yellow	`#ffff00`	Highlight or accent only; very low contrast as text.
Khaki	`#f0e68c`	Use as a soft background or accent.
Turquoise	`#40e0d0`	Accent colour; check contrast if used behind text.
Pale Turquoise	`#afeeee`	Light background only; avoid for text.
Violet	`#ee82ee`	Accent colour; not for body text on white.
Light Pink	`#ffb6c1`	Light background only.
Lavender	`#e6e6fa`	Subtle background panel or highlight.
Salmon	`#fa8072`	Accent; avoid as text on white.
Dark Orange	`#ff8c00`	Accent colour; check contrast when used.
Orange	`#ffa500`	Accent only; not recommended for text on white.
Spring Green	`#00ff7f`	Highlight or accent; check contrast carefully.
Pale Green	`#98fb98`	Soft background only; avoid for text on white.

Using colours in Canvas content

When applying colours in Canvas, use them through inline styles on text or container elements. For example:

<p style="color: #0000cd;">
  This paragraph uses Medium Blue as text on a white background.
</p>

<div style="background-color: #f5f5f5; padding: 1rem;">
  <p>This panel uses White Smoke as a light background.</p>
</div>

For combinations not shown here, use the WebAIM Contrast Checker to verify that your chosen colours meet at least AA contrast (4.5:1 for normal text, 3:1 for large text).