Colors
The ACCESS NYC Patterns color palette builds on top of the U.S. Web Design System. Specific combinations were tested for adequate contrast following the distinguishability guideline of the Web Content Accessibility Guidelines (WCAG) 2.0.
Body text color is black on white and heading text color is dark blue, meeting compliance and using the brand colors of ACCESS NYC. Because we can’t illustrate all interactive elements solely with color, hyperlinks are also underlined to accommodate color blindness.
Primary and secondary colors highlight interactions with buttons and hyperlinks. Each state of interaction, including default, hover, and focus states, conform to the WCAG AA standard at a base level.
Below are swatches with examples of the approved color combinations. Please note that WCAG AA compliance depends on the base text size. The examples below may not be fully compliant because their font-size is set to a smaller size.
light background
Headings h1, h3, h5
Alternative Text
Selector.color-light-background
mid background
Headings h1, h3, h5
Alternative Text
Selector.color-mid-background
dark background
Headings h1, h3, h5
Alternative Text
Selector.color-dark-background
primary button
Selector.color-primary-button
secondary button
Selector.color-secondary-button
The background colors assigned to each status (info, success, warning, and urgent) can be used through their corresponding .bg-status-<status> utility.
success Background
selector.bg-status-success
info Background
selector.bg-status-info
warning Background
selector.bg-status-warning
urgent Background
selector.bg-status-urgent
With the help of Tailwind CSS every color in ACCESS NYC Patterns can be used as a utility class for static, hover, and responsive states of the text, border, and background properties. Refer to the Tailwind CSS Docs for full details. In order to maintain WCAG AA compliance, custom combinations of text and background colors must be tested for adequate contrast. The WebAIM Color Contrast Checker makes testing easy.
Below are examples of the color utilities and their corresponding selectors. Please note, not all of the text color examples are accessible because they show the color utility in use on a white background.
color blue light
Hex#E1EEFF
Border.border-color-blue-light
Text.text-color-blue-light
Background.bg-color-blue-light
color blue bright
Hex#118DF0
Border.border-color-blue-bright
Text.text-color-blue-bright
Background.bg-color-blue-bright
color blue
Hex#184E9E
Border.border-color-blue
Text.text-color-blue
Background.bg-color-blue
color blue dark
Hex#112E51
Border.border-color-blue-dark
Text.text-color-blue-dark
Background.bg-color-blue-dark
color yellow light
Hex#FFE6A9
Border.border-color-yellow-light
Text.text-color-yellow-light
Background.bg-color-yellow-light
color yellow access
Hex#FBB720
Border.border-color-yellow-access
Text.text-color-yellow-access
Background.bg-color-yellow-access
color green light
Hex#D4FFE7
Border.border-color-green-light
Text.text-color-green-light
Background.bg-color-green-light
color green
Hex#05CE7C
Border.border-color-green
Text.text-color-green
Background.bg-color-green
color green mid
Hex#0D6D3B
Border.border-color-green-mid
Text.text-color-green-mid
Background.bg-color-green-mid
color green dark
Hex#094727
Border.border-color-green-dark
Text.text-color-green-dark
Background.bg-color-green-dark
color pink light
Hex#F1B3bD
Border.border-color-pink-light
Text.text-color-pink-light
Background.bg-color-pink-light
color pink
Hex#F1647C
Border.border-color-pink
Text.text-color-pink
Background.bg-color-pink
color red
Hex#C6252b
Border.border-color-red
Text.text-color-red
Background.bg-color-red
color purple
Hex#4C2C92
Border.border-color-purple
Text.text-color-purple
Background.bg-color-purple
color grey light
Hex#D1D5D9
Border.border-color-grey-light
Text.text-color-grey-light
Background.bg-color-grey-light
color grey lightest
Hex#EEF3F7
Border.border-color-grey-lightest
Text.text-color-grey-lightest
Background.bg-color-grey-lightest
color grey mid
Hex#505C66
Border.border-color-grey-mid
Text.text-color-grey-mid
Background.bg-color-grey-mid
color grey dark
Hex#172129
Border.border-color-grey-dark
Text.text-color-grey-dark
Background.bg-color-grey-dark
color black
Hex#000000
Border.border-color-black
Text.text-color-black
Background.bg-color-black
color white
Hex#ffffff
Border.border-color-white
Text.text-color-white
Background.bg-color-white
color transparent
Hexrgba(255,255,255,0)
Border.border-color-transparent
Text.text-color-transparent
Background.bg-color-transparent
eighth avenue
Hex#2850AD
Border.border-eighth-avenue
Text.text-eighth-avenue
Background.bg-eighth-avenue
sixth avenue
Hex#FF6319
Border.border-sixth-avenue
Text.text-sixth-avenue
Background.bg-sixth-avenue
crosstown
Hex#6CBE45
Border.border-crosstown
Text.text-crosstown
Background.bg-crosstown
canarsie
Hex#A7A9AC
Border.border-canarsie
Text.text-canarsie
Background.bg-canarsie
nassau
Hex#996633
Border.border-nassau
Text.text-nassau
Background.bg-nassau
broadway
Hex#FCCC0A
Border.border-broadway
Text.text-broadway
Background.bg-broadway
broadway seventh avenue
Hex#EE352E
Border.border-broadway-seventh-avenue
Text.text-broadway-seventh-avenue
Background.bg-broadway-seventh-avenue
lexington avenue
Hex#00933C
Border.border-lexington-avenue
Text.text-lexington-avenue
Background.bg-lexington-avenue
flushing
Hex#B933AD
Border.border-flushing
Text.text-flushing
Background.bg-flushing
shuttles
Hex#808183
Border.border-shuttles
Text.text-shuttles
Background.bg-shuttles