Tyndale Website Colors
The following colours are the official Tyndale brand colours and other colours used on Tyndale websites. The main colours have been reviewed using the Accessible Colors service. The required Contrast Ratio to meet the WCAG 2.0 guidelines for contrast accessibility level AA is 4.5. Each colour has been tested with both white (#FFF) and dark (#222) text with the resulting contrast ratios recorded below with either a (P)ass or (F)ail indicated.
Main Colours
Royal Blue
Contrast Ratio: 16.41 (P)
Contrast Ratio: 1.03 (F)
Gold
Contrast Ratio: 2.02 (F)
Contrast Ratio: 7.87 (P)
Red
Contrast Ratio: 6.24 (P)
Contrast Ratio: 2.55 (F)
Light
Contrast Ratio: 1.15 (F)
Contrast Ratio: 13.84 (P)
Dark
Contrast Ratio: 15.91 (P)
Contrast Ratio: 0 (F)
White
Contrast Ratio: 0 (F)
Contrast Ratio: 15.91 (P)
Blue Medium (link-color)
Contrast Ratio: 6.45 (P)
Contrast Ratio: 2.47 (F)
Grey Tones Used
Grey Lighter
Grey Light
Grey Medium Light
Grey Medium
Grey Dark
Gradients
We don't currently use these in a lot of places, but if we were to use them, I'd rather they be consistent.
Royal Blue Gradient
#221155 0% → #1e1c8e 100%
Gold Gradient
#EA0 0% → #F7C14A 100%
Red Gradient
#b22 0% → #e22 100%
Green Gradient
#617c01 0% → #790 100%
Dark Gradient
#222 0% → #666 100%
Blue Medium Gradient
#024672 0% → #0062A0 100%
Light Gradient
#CCC 0% → #EFEFEF 100%
Please note: these gradients have not been added as utility classes at this point other than inside the gridz utility classes. These gradient values are here for general documentation to keep gradients consistent.
// example use
.gradient-blue { background: linear-gradient(to right, #221155 0%,#1e1c8e 100%); }