https://
The https:// in the address bar means your information is encrypted and can not be accessed by anyone else
.gov
Only government entities in the U.S. can end in .gov
Digital Standards

Color palette

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.

Accessibility

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.

A
Fail
A
Fail
A
Pass
A
Pass
dark-ben-franklin-blue
#0f4d90
rgb(15 77 144)

A
Fail
A
Fail
A
Pass
A
Pass
ben-franklin-blue
#2176d2
rgb(33 118 210)

A
Pass
A
Pass
A
Fail
A
Fail
light-ben-franklin
#96c9ff
rgb(150 201 255)

A
Pass
A
Pass
A
Fail
A
Fail
electric-blue
#25cef7
rgb(37 206 247)

A
Pass
A
Pass
A
Fail
A
Fail
bell-yellow
#f3c613
rgb(243 198 19)

A
Pass
A
Pass
A
Fail
A
Fail
flyers-orange
#f99300
rgb(249 147 0)

A
Pass
A
Pass
A
Fail
A
Fail
kelly-drive-green
#58c04d
rgb(88 192 77)

A
Pass
A
Pass
A
Fail
A
Fail
light-bell
#ffefa2
rgb(255 239 162)

A
Pass
A
Pass
A
Fail
A
Fail
light-red
#fed0d0
rgb(254 208 208)

A
Pass
A
Pass
A
Fail
A
Fail
light-kelly-drive
#b9f2b1
rgb(185 242 177)

A
Pass
A
Pass
A
Fail
A
Fail
light-blue
#DAEDFe
rgb(218 237 254)

A
Fail
A
Fail
A
Pass
A
Pass
phanatic-green
#3a833c
rgb(58 131 60)

A
Fail
A
Fail
A
Pass
A
Pass
love-park-red
#cc3000
rgb(204 48 0)

A
Fail
A
Fail
A
Pass
A
Pass
pride-purple
#9400c6
rgb(148 0 198)

A
Fail
A
Fail
A
Pass
A
Pass
black
#000000
rgb(0 0 0)

A
Fail
A
Fail
A
Pass
A
Pass
dark-gray
#444444
rgb(68 68 68)

A
Pass
A
Pass
A
Fail
A
Fail
medium-gray
#a1a1a1
rgb(161 161 161)

A
Pass
A
Pass
A
Fail
A
Fail
sidewalk
#cfcfcf
rgb(207 207 207)

A
Pass
A
Pass
A
Fail
A
Fail
ghost-gray
#f0f0f0
rgb(240 240 240)

Implementation

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.

  • Background colors are prefixed with bg-.
  • Border colors are prefixed with bdr-.
  • Font colors do not need a prefix.

Examples:

  • bg-ben-franklin-blue changes the background-color property.
  • bdr-ben-franklin-blue changes the border-color property.
  • ben-franklin-blue changes the color property.

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.

References Typography