Slack Color Accessibility — WCAG Contrast Audit

Slack’s primary brand colors audited against WCAG contrast — 2 of 4 pairs pass AA for normal text.

At a glance

Pairs audited
4
Passing AA (normal text)
2 of 4
AA threshold
4.5:1
AAA threshold
7:1

Slack’s brand is built around aubergine, the deep purple that anchors the sidebar in classic Slack. The brand was redesigned in 2019 to improve accessibility — earlier brand variants had multiple AA failures. This page audits Slack’s primary brand-color combinations against the WCAG 2.1 AA threshold (4.5:1 for normal-size body text). Results are computed live from the published brand colors and the WCAG luminance formula.

Brand pair audit

Aubergine on White

Body sample text for accessibility check.

#4A154B on #FFFFFF
14.00:1AAA

White on Aubergine

Body sample text for accessibility check.

#FFFFFF on #4A154B
14.00:1AAA

Slack Yellow on White

Body sample text for accessibility check.

#ECB22E on #FFFFFF
1.91:1Fail

Slack Green on White

Body sample text for accessibility check.

#2EB67D on #FFFFFF
2.59:1Fail

Audit results

Aubergine on White — #4A154B on #FFFFFF → 14.00:1 ✓ AAA White on Aubergine — #FFFFFF on #4A154B → 14.00:1 ✓ AAA Slack Yellow on White — #ECB22E on #FFFFFF → 1.91:1 ✗ fails AA Slack Green on White — #2EB67D on #FFFFFF → 2.59:1 ✗ fails AA

What this means in practice

Aubergine on white passes AAA — that’s why it works for body text in the Slack marketing site. Slack’s yellow and green secondary brand colors fail AA on white, which is why they appear primarily as accent fills rather than as text.

Frequently asked questions

Does Slack comply with WCAG?
Brand color tokens are one input to compliance — actual page conformance depends on which pairs are used where. Slack has 2 of 4 primary pairs passing AA at body size. Some pairs are intended for large text or background usage only.
Where can I check the latest brand guidelines?
Brand guidelines change without notice. Always cross-check against Slack’s current published brand site or design-system documentation before shipping. The hex values used here reflect publicly documented brand color tokens at the time of writing.
How do I fix failing brand pairs in my own design system?
When a brand color fails AA on white, the standard fix is to introduce a darker variant (often suffixed -700 or -600 in design-system terminology) for use as text on light surfaces, while reserving the lighter brand color for large headings or background usage. The contrast checker above suggests the nearest passing color in either direction.

Related Tools

palette

Color Palette

Extract colors from images or generate harmonious palettes.

blur_on

Color Gradient Test

Test your monitor for color banding and 8-bit vs 10-bit depth with smooth gradients across grayscale, red, green, blue, and hue channels.

gradient

CSS Gradient

Visual CSS background generator & code.

draw

Logo Maker

Design logos with a drag-and-drop canvas editor. Add text, icons, and shapes — export PNG, SVG, or ZIP.

style

CSS Cheatsheet

Quick reference for CSS selectors, Flexbox, Grid, typography, animations, and modern CSS. Search and copy instantly.