Design System

Colour Accessibility

Every text and background combination from the Costsaver palette tested against WCAG 2.1 AA. Normal text requires 4.5:1, large text (18px bold / 24px) requires 3:1.

Full Palette

Primary

CS Blue

#283DC3

CS Yellow

#FFC801

Accent

Accent Red

#DB0000

Pastel

Pastel Yellow

#FFF0B8

Pastel Blue

#D9DCF5

Pastel Grey

#F5F5F5

Pastel Green

#DCFFDF

UI

Black

#161616

Grey 80

#4A4B4D

Grey 60

#666666

Grey 40

#C3C3C3

Grey 20

#E3E3E3

Grey 10

#FAFAFC

White

#FFFFFF

System

Star Rating

#FFD500

Error

#B22835

Success

#01830E

Warning

#A8660B

Accessible Pairings

WCAG AA Pass

CS Yellow #FFC801

CS YellowAAA
Aa
Black11.6:1
CS YellowAA
Aa
Grey 805.6:1
CS YellowAA
Aa
CS Blue5.3:1

CS Blue #283DC3

CS BlueAAA
Aa
White8.2:1
CS BlueAA
Aa
CS Yellow5.3:1

White #FFFFFF

WhiteAAA
Aa
Black18.1:1
WhiteAAA
Aa
Grey 808.7:1
WhiteAAA
Aa
CS Blue8.2:1
WhiteAA
Aa
Error6.5:1
WhiteAA
Aa
Grey 605.7:1
WhiteAA
Aa
Accent Red5.2:1
WhiteAA
Aa
Success4.9:1
WhiteAA
Aa
Warning4.6:1

Pastel Yellow #FFF0B8

Pastel YellowAAA
Aa
Black15.9:1
Pastel YellowAAA
Aa
Grey 807.7:1
Pastel YellowAAA
Aa
CS Blue7.2:1
Pastel YellowAA
Aa
Error5.7:1
Pastel YellowAA
Aa
Grey 605.0:1
Pastel YellowAA
Aa
Accent Red4.6:1

Pastel Blue #D9DCF5

Pastel BlueAAA
Aa
Black13.4:1
Pastel BlueAA
Aa
Grey 806.4:1
Pastel BlueAA
Aa
CS Blue6.1:1
Pastel BlueAA
Aa
Error4.8:1

Pastel Grey #F5F5F5

Pastel GreyAAA
Aa
Black16.6:1
Pastel GreyAAA
Aa
Grey 808.0:1
Pastel GreyAAA
Aa
CS Blue7.6:1
Pastel GreyAA
Aa
Error5.9:1
Pastel GreyAA
Aa
Grey 605.3:1
Pastel GreyAA
Aa
Accent Red4.8:1
Pastel GreyAA
Aa
Success4.5:1

Pastel Green #DCFFDF

Pastel GreenAAA
Aa
Black16.7:1
Pastel GreenAAA
Aa
Grey 808.1:1
Pastel GreenAAA
Aa
CS Blue7.6:1
Pastel GreenAA
Aa
Error6.0:1
Pastel GreenAA
Aa
Grey 605.3:1
Pastel GreenAA
Aa
Accent Red4.8:1
Pastel GreenAA
Aa
Success4.6:1

Black #161616

BlackAAA
Aa
White18.1:1
BlackAAA
Aa
CS Yellow11.6:1

Grey 80 #4A4B4D

Grey 80AAA
Aa
White8.7:1
Grey 80AA
Aa
CS Yellow5.6:1

Non-Accessible Pairings

Do Not Use

These pairings fall below the WCAG 2.1 AA minimum contrast ratio of 4.5:1 for normal text and must not be used.

CS Yellow #FFC801

CS Yellow
Aa
White1.6:1
CS Yellow
Aa
Accent Red3.4:1
CS Yellow
Aa
Error4.2:1
CS Yellow
Aa
Grey 603.7:1
CS Yellow
Aa
Success3.2:1
CS Yellow
Aa
Warning3.0:1

CS Blue #283DC3

CS Blue
Aa
Grey 801.1:1
CS Blue
Aa
Black2.2:1
CS Blue
Aa
Accent Red1.6:1
CS Blue
Aa
Grey 601.4:1

White #FFFFFF

White
Aa
CS Yellow1.6:1

Pastel Backgrounds

Pastel Yellow
Aa
CS Yellow1.4:1
Pastel Blue
Aa
CS Yellow1.1:1
Pastel Blue
Aa
Grey 604.2:1
Pastel Blue
Aa
Accent Red3.9:1
Pastel Yellow
Aa
Warning4.0:1
Pastel Yellow
Aa
Success4.3:1