This help article provides some tips for how to best curate the color palette for your Trust Center. The goal is to ensure your Trust Center can be clearly read by visitors while maintaining your company's branding.
A simple, yet very important, check is to ensure that there is a good contrast ratio between the colors on your Trust Center, especially between text & the color behind the text. A good contrast ratio is a good indicator that your Trust Center can be easily read by a majority visitors.
The Web Content Accessibility Guidelines (WCAG) international standard recommends:
A minimum contrast ratio of 4.5:1 for small text (3:1 for large text)
Enhanced criteria recommends a contrast ratio of 7:1 (4.5:1 for large text)
You can use this website to measure the contrast ratio of your selected colors
SafeBase Color Palette
There are 3 color selections to be made for the background colors of your Trust Center. They are listed in ascending order from what color will be presented minimally to what color takes up the most space on the Trust Center.
Choose the Primary Color. This is an accent color that will draw the most attention on your Trust Center. You may want to choose a bolder or brighter brand colors for this color selection.
Choose the Card Background Color. Ensure the card background text color has good contrast ratio with the primary color.
Choose the Background & Header Color. This color will take up the most space on your trust center. is most visible. Ensure if your card background text color has good contrast ratio with the primary color here.
Text Color Selection
Choose the Text Color. Ensure the text color has a good contrast ratio with the card background color.
Choose the Link Color. This color should not be the same color as the text color. It is recommended that there are 2 differentiators between the link and normal text to imply that the link is clickable (ie. different color & underlined).
Choose the Button Text Color. Ensure the button text color has good contrast ratio with the primary color.