Add to Home Screen

Enjoy instant access, offline use, and a native app experience

Communicare-Compendium™

WCAG Color Contrast Audit

Analyzes all design-token and brand color pairs against WCAG 2.1 AA/AAA standards.

19 Pass
7 Warn
1 Fail

AAA ≥ 7:1

Highest — all text sizes

AA ≥ 4.5:1

Standard — normal text

AA Large ≥ 3:1

Large text only (18px+)

Fail < 3:1

Does not meet any WCAG level

Group:Status:
Sample Text — Body text on backgroundAa

Body text on background

AAA
19.80:1
Sample Text — Card text on cardAa

Card text on card

AAA
19.80:1
Sample Text — Primary text on primary bgAa

Primary text on primary bg

AAA
17.18:1
Sample Text — Secondary text on secondary bgAa

Secondary text on secondary bg

AAA
16.44:1
Sample Text — Muted text on muted bgAa

Muted text on muted bg

AA Large
4.35:1

Suggested fix — adjust text color to:

#6e6e6e
Preview with fix →
4.68:1 ✓
Sample Text — Accent text on accent bgAa

Accent text on accent bg

AAA
16.44:1
Sample Text — Destructive text on destructiveAa

Destructive text on destructive

AA Large
3.61:1

Suggested fix — adjust text color to:

#1a1a1a
Preview with fix →
4.62:1 ✓
Sample Text — Sidebar text on sidebarAa

Sidebar text on sidebar

AAA
10.01:1
Sample Text — Sidebar primary on sidebarAa

Sidebar primary on sidebar

AAA
16.97:1
Sample Text — Sidebar accent text on accentAa

Sidebar accent text on accent

AAA
16.12:1
Sample Text — Sidebar primary fg on primaryAa

Sidebar primary fg on primary

AAA
16.97:1
Sample Text — White on purple-600 (buttons)Aa

White on purple-600 (buttons)

AA
5.70:1
Sample Text — White on indigo-600 (buttons)Aa

White on indigo-600 (buttons)

AA
6.29:1
Sample Text — White on teal-600 (buttons)Aa

White on teal-600 (buttons)

AA Large
3.74:1

Suggested fix — adjust text color to:

#191919
Preview with fix →
4.70:1 ✓
Sample Text — White on pink-600 (buttons)Aa

White on pink-600 (buttons)

AA
4.60:1
Sample Text — White on green-600 (buttons)Aa

White on green-600 (buttons)

AA Large
3.30:1

Suggested fix — adjust text color to:

#242424
Preview with fix →
4.71:1 ✓
Sample Text — White on amber-600 (badges)Aa

White on amber-600 (badges)

AA Large
3.19:1

Suggested fix — adjust text color to:

#292929
Preview with fix →
4.57:1 ✓
Sample Text — White on blue-600 (buttons)Aa

White on blue-600 (buttons)

AA
5.17:1
Sample Text — gray-900 on whiteAa

gray-900 on white

AAA
17.74:1
Sample Text — gray-600 on white (body text)Aa

gray-600 on white (body text)

AAA
7.56:1
Sample Text — gray-400 on white (placeholders)Aa

gray-400 on white (placeholders)

Fail
2.54:1

Suggested fix — adjust text color to:

#6b7484
Preview with fix →
4.71:1 ✓
Sample Text — purple-600 on white (links)Aa

purple-600 on white (links)

AA
5.70:1
Sample Text — teal-600 on white (links)Aa

teal-600 on white (links)

AA Large
3.74:1

Suggested fix — adjust text color to:

#0b8177
Preview with fix →
4.75:1 ✓
Sample Text — purple-700 text on purple-50 bgAa

purple-700 text on purple-50 bg

AA
6.48:1
Sample Text — teal-700 text on teal-50 bgAa

teal-700 text on teal-50 bg

AA
5.25:1
Sample Text — gray-600 text on gray-50 bgAa

gray-600 text on gray-50 bg

AAA
7.23:1
Sample Text — red-500 on white (error states)Aa

red-500 on white (error states)

AA Large
3.76:1

Suggested fix — adjust text color to:

#eb1515
Preview with fix →
4.52:1 ✓