Brand Guide Accessibility

Color

The Social Driver brand color is vibrant and energetic. However our message can easily be ignored or lost if we don't keep in mind the limitations of these colors. There are tools we can implement to guarantee our message is accessible and apply this knowledge with the work we do for our clients everyday. Employing accessibility best practices improves the user experience for all users.

The goal is to hit the contrast ratio of 4.5:1. Learn More
Large text is easier to read, so the contrast requirement is reduced to 3:1. WCAG defines large text as text that is 18pt and larger, or 14pt and larger if it is bold.

Accessible Color Palette Builder

Although this tool is helpful in showing multiple colors at once, the size of the letter forms also informs the final contrast ratio output. Continue on to see additional tools.

1.1 Screenshot of current Social Driver brand colors. At first glance it would seem that we are very limited with using our current brand colors. This tool is helpful in quickly exploring a brand color's limitations, however it does not take into consideration the font sizing and how that can affect the final ratio.

1.2 Screenshot of suggested Social Driver brand colors. By adding in a darker gray color, the number of color combinations that hit that 4.5:1 ratio have increased.

WebAIM: Color Contrast Checker

This tool takes into consideration both the color and size of the font.