The color blue is an essential part of the City’s visual identity. It’s synonymous with being trustworthy, dependable, and secure. Combined with shades of gray and white, the palette provides a welcoming feeling. It’s easy to read, clean, and simple.
Use the accent colors to add some pop and draw attention to certain elements. Always use the accent colors sparingly.
While the color palette is flexible, not all color combinations will meet Web Content Accessibility Guidelines. The following color combinations are valid, and will pass WCAG AA contrast ratios.
To verify that other color combinations pass the WCAG standards you can use an online color contrast checker. You can also download the Firefox or Chrome browser extension or use the online version of the WAVE toolbar to check accessibly of webpages.
Utility classes are provided so that any combination of colors can be used, however, only the combinations above meet accessibility requirements. Utility classes are prefixed with the type of utility, then the name of the color.
Background, border and font color are available as utility classes and can be applied to any element.
All color utility classes are
!important to ensure they will override assigned properties.
If you are using the Standards sass, you can use
color(name-of-color) in your sass files to assign any of the color values above.