As of January 3rd, 2023 the ACCESS NYC Pattern library package is deprecated in favor of the NYC Opportunity Standard which contains updated user interface elements and usability guidance.
Color
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
light background Text
Hyperlinks
Selector.color-light-background
mid background
Headings h1, h3, h5
Alternative Text
mid background Text
Hyperlinks
Selector.color-mid-background
dark background
Headings h1, h3, h5
Alternative Text
dark background Text
Hyperlinks
Selector.color-dark-background
primary button
primary button Text
Selector.color-primary-button
secondary button
secondary button Text
Selector.color-secondary-button
tertiary button
tertiary button Text
Selector.color-tertiary-button
covid response button
covid response button Text
Selector.color-covid-response-button
code
code Text
Selector.color-code
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.
blue light
Text blue light
Hex#C3DDFF
Border.border-blue-light
Text.text-blue-light
Background.bg-blue-light
blue bright
Text blue bright
Hex#118DF0
Border.border-blue-bright
Text.text-blue-bright
Background.bg-blue-bright
blue
Text blue
Hex#184E9E
Border.border-blue
Text.text-blue
Background.bg-blue
blue dark
Text blue dark
Hex#112E51
Border.border-blue-dark
Text.text-blue-dark
Background.bg-blue-dark
yellow light
Text yellow light
Hex#FFE6A9
Border.border-yellow-light
Text.text-yellow-light
Background.bg-yellow-light
yellow access
Text yellow access
Hex#FBB720
Border.border-yellow-access
Text.text-yellow-access
Background.bg-yellow-access
green light
Text green light
Hex#B7ECCF
Border.border-green-light
Text.text-green-light
Background.bg-green-light
green
Text green
Hex#05CE7C
Border.border-green
Text.text-green
Background.bg-green
green mid
Text green mid
Hex#0D6D3B
Border.border-green-mid
Text.text-green-mid
Background.bg-green-mid
green dark
Text green dark
Hex#094727
Border.border-green-dark
Text.text-green-dark
Background.bg-green-dark
pink light
Text pink light
Hex#F1B3bD
Border.border-pink-light
Text.text-pink-light
Background.bg-pink-light
pink
Text pink
Hex#F1647C
Border.border-pink
Text.text-pink
Background.bg-pink
red
Text red
Hex#C6252b
Border.border-red
Text.text-red
Background.bg-red
purple
Text purple
Hex#4C2C92
Border.border-purple
Text.text-purple
Background.bg-purple
covid response
Text covid response
Hex#803D8D
Border.border-covid-response
Text.text-covid-response
Background.bg-covid-response
covid response light
Text covid response light
Hex#DAB7E0
Border.border-covid-response-light
Text.text-covid-response-light
Background.bg-covid-response-light
grey light
Text grey light
Hex#D1D5D9
Border.border-grey-light
Text.text-grey-light
Background.bg-grey-light
grey lightest
Text grey lightest
Hex#EEF3F7
Border.border-grey-lightest
Text.text-grey-lightest
Background.bg-grey-lightest
grey mid
Text grey mid
Hex#505C66
Border.border-grey-mid
Text.text-grey-mid
Background.bg-grey-mid
grey dark
Text grey dark
Hex#172129
Border.border-grey-dark
Text.text-grey-dark
Background.bg-grey-dark
black
Text black
Hex#000000
Border.border-black
Text.text-black
Background.bg-black
white
Text white
Hex#FFFFFF
Border.border-white
Text.text-white
Background.bg-white
transparent
Text transparent
Hexrgba(255, 255, 255, 0)
Border.border-transparent
Text.text-transparent
Background.bg-transparent
inherit
Text inherit
Hexinherit
Border.border-inherit
Text.text-inherit
Background.bg-inherit
eighth avenue
Text eighth avenue
Hex#2850AD
Border.border-eighth-avenue
Text.text-eighth-avenue
Background.bg-eighth-avenue
sixth avenue
Text sixth avenue
Hex#FF6319
Border.border-sixth-avenue
Text.text-sixth-avenue
Background.bg-sixth-avenue
crosstown
Text crosstown
Hex#6CBE45
Border.border-crosstown
Text.text-crosstown
Background.bg-crosstown
canarsie
Text canarsie
Hex#A7A9AC
Border.border-canarsie
Text.text-canarsie
Background.bg-canarsie
nassau
Text nassau
Hex#996633
Border.border-nassau
Text.text-nassau
Background.bg-nassau
broadway
Text broadway
Hex#FCCC0A
Border.border-broadway
Text.text-broadway
Background.bg-broadway
broadway seventh avenue
Text broadway seventh avenue
Hex#EE352E
Border.border-broadway-seventh-avenue
Text.text-broadway-seventh-avenue
Background.bg-broadway-seventh-avenue
lexington avenue
Text lexington avenue
Hex#00933C
Border.border-lexington-avenue
Text.text-lexington-avenue
Background.bg-lexington-avenue
flushing
Text flushing
Hex#B933AD
Border.border-flushing
Text.text-flushing
Background.bg-flushing
shuttles
Text shuttles
Hex#808183
Border.border-shuttles
Text.text-shuttles
Background.bg-shuttles