Colour Accessibility Guide
This guide documents which background colours work with our three primary text colours to meet WCAG accessibility standards. All colours are from our Figma design system.
Text Colours
Black (Cool Grey 95)
#010F15
Cool Grey 80
#343F44
White
#FFFFFF
Backgrounds for Black Text
Black text (#010F15) requires light backgrounds. Use for primary body text and headings.
| Background | Hex | Contrast | WCAG Level |
|---|---|---|---|
| White | #FFFFFF | 19.54:1 | AAA |
| Cool Grey 2 | #F8F9FA | 18.69:1 | AAA |
| Cool Grey 5 | #F0F2F2 | 17.48:1 | AAA |
| Cool Grey 10 | #E6E7E8 | 15.92:1 | AAA |
| Cool Grey 20 | #C7D0D4 | 12.02:1 | AAA |
| Cool Grey 30 | #A5B0B5 | 8.57:1 | AAA |
| Cool Grey 40 | #8C979C | 6.44:1 | AA |
| Cool Grey 50 | #7B858A | 5.20:1 | AA |
| UX Blue +4 | #E1F7FF | 17.79:1 | AAA |
| UX Blue +3 | #A1DCF4 | 12.72:1 | AAA |
| UX Blue +2 | #60BFEB | 9.26:1 | AAA |
| UX Green +3 | #D7FBC9 | 16.90:1 | AAA |
| UX Green +2 | #7BF862 | 13.55:1 | AAA |
| UX Amber +3 | #FFFDD8 | 18.58:1 | AAA |
| UX Amber +2 | #FFE399 | 14.77:1 | AAA |
| UX Amber +1 | #FFBD63 | 11.47:1 | AAA |
| UX Amber | #FFA039 | 9.06:1 | AAA |
| UX Red +6 | #FFD1CF | 13.45:1 | AAA |
| UX Red +5 | #FF9594 | 8.30:1 | AAA |
| UX Red +4 | #FF7276 | 6.34:1 | AA |
| UX Purple +7 | #FBEEFB | 17.39:1 | AAA |
| UX Purple +6 | #F3DAF4 | 14.00:1 | AAA |
| UX Purple +5 | #E0AFE4 | 9.42:1 | AAA |
| UX Purple +4 | #CB87D5 | 6.62:1 | AA |
Backgrounds for Cool Grey 80 Text
Cool Grey 80 (#343F44) is lighter than black, so requires even lighter backgrounds. Use for secondary text.
| Background | Hex | Contrast | WCAG Level |
|---|---|---|---|
| White | #FFFFFF | 10.26:1 | AAA |
| Cool Grey 2 | #F8F9FA | 9.81:1 | AAA |
| Cool Grey 5 | #F0F2F2 | 9.18:1 | AAA |
| Cool Grey 10 | #E6E7E8 | 8.36:1 | AAA |
| Cool Grey 20 | #C7D0D4 | 6.31:1 | AA |
| Cool Grey 30 | #A5B0B5 | 4.50:1 | AA |
| Cool Grey 40 | #8C979C | 3.38:1 | AA Large |
| UX Blue +4 | #E1F7FF | 9.34:1 | AAA |
| UX Blue +3 | #A1DCF4 | 6.68:1 | AA |
| UX Blue +2 | #60BFEB | 4.86:1 | AA |
| UX Green +3 | #D7FBC9 | 8.88:1 | AAA |
| UX Green +2 | #7BF862 | 7.12:1 | AAA |
| UX Amber +3 | #FFFDD8 | 9.75:1 | AAA |
| UX Amber +2 | #FFE399 | 7.76:1 | AAA |
| UX Amber +1 | #FFBD63 | 6.02:1 | AA |
| UX Amber | #FFA039 | 4.76:1 | AA |
| UX Red +6 | #FFD1CF | 7.06:1 | AAA |
| UX Red +5 | #FF9594 | 4.36:1 | AA Large |
| UX Purple +7 | #FBEEFB | 9.13:1 | AAA |
| UX Purple +6 | #F3DAF4 | 7.35:1 | AAA |
| UX Purple +5 | #E0AFE4 | 4.95:1 | AA |
Backgrounds for White Text
White text (#FFFFFF) requires dark backgrounds. Use for buttons, headers, and dark sections.
| Background | Hex | Contrast | WCAG Level |
|---|---|---|---|
| Cool Grey 95 (Black) | #010F15 | 19.54:1 | AAA |
| Cool Grey 90 | #1A272C | 15.14:1 | AAA |
| Cool Grey 80 | #343F44 | 10.26:1 | AAA |
| Cool Grey 70 | #4B565A | 7.07:1 | AAA |
| Cool Grey 60 | #616E73 | 5.12:1 | AA |
| Cool Grey 50 | #7B858A | 3.76:1 | AA Large |
| UX Red | #C9003A | 5.85:1 | AA |
| UX Red −1 | #8C0028 | 9.64:1 | AAA |
| UX Red −2 | #63001E | 13.81:1 | AAA |
| UX Red −3 | #420015 | 17.21:1 | AAA |
| UX Green | #00CB00 | 2.22:1 | Fail |
| UX Green −1 | #00B400 | 2.58:1 | Fail |
| UX Green −2 | #008C00 | 3.78:1 | AA Large |
| UX Green −3 | #006300 | 5.93:1 | AA |
| UX Green −4 | #004C00 | 8.32:1 | AAA |
| UX Green −5 | #004000 | 9.61:1 | AAA |
| UX Green −6 | #002300 | 16.15:1 | AAA |
| UX Blue | #108BC1 | 3.87:1 | AA Large |
| UX Blue −1 | #0D7EB2 | 4.41:1 | AA Large |
| UX Blue −2 | #0C679C | 5.68:1 | AA |
| UX Blue −3 | #084071 | 9.35:1 | AAA |
| UX Blue −4 | #082B62 | 12.52:1 | AAA |
| UX Blue −5 | #04134A | 16.05:1 | AAA |
| UX Purple | #60008E | 11.67:1 | AAA |
| UX Purple −1 | #4F0083 | 13.31:1 | AAA |
| UX Purple −2 | #430079 | 14.53:1 | AAA |
| UX Purple −3 | #37006E | 16.07:1 | AAA |
| UX Purple −4 | #240049 | 18.04:1 | AAA |
| UX Amber −3 | #CF4000 | 4.00:1 | AA Large |
| UX Amber −4 | #A22900 | 6.04:1 | AA |
| UX Amber −5 | #6D1600 | 10.79:1 | AAA |
| UX Amber −6 | #330900 | 17.36:1 | AAA |
Caution: Green backgrounds (UX Green to UX Green +1) do not provide sufficient contrast for white text. Use black text on green backgrounds instead.
Visual Examples
Black on Cool Grey 5
Primary content text on light backgrounds. Contrast: 17.48:1 (AAA)
Cool Grey 80 on Blue +4
Secondary text on tinted backgrounds. Contrast: 9.34:1 (AAA)
White on UX Red
Call-to-action buttons and alerts. Contrast: 5.85:1 (AA)
White on Black
Dark sections and footers. Contrast: 19.54:1 (AAA)
White on UX Purple
Accent buttons and highlights. Contrast: 11.67:1 (AAA)
White on UX Blue −3
Links and interactive elements. Contrast: 9.35:1 (AAA)
WCAG Guidelines Reference
Understanding WCAG Contrast Levels
| Level | Contrast Ratio | Usage |
|---|---|---|
| AAA | 7:1 or higher | Enhanced accessibility. Ideal for all text. |
| AA | 4.5:1 or higher | Minimum for normal text (under 18pt or 14pt bold). |
| AA Large | 3:1 or higher | Acceptable for large text (18pt+ or 14pt+ bold) and UI components. |
| Fail | Below 3:1 | Does not meet accessibility standards. Avoid for text. |
Tip: When in doubt, aim for AAA compliance. It ensures readability for users with visual impairments and in challenging viewing conditions like bright sunlight.