Skip to main content

Patterns

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

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

The background colors assigned to each status (info, success, warning, and urgent) can be used through their corresponding .bg-status-<status> utility.

success Background

success Text

selector.bg-status-success

info Background

info Text

selector.bg-status-info

warning Background

warning Text

selector.bg-status-warning

urgent Background

urgent Text

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

Text color blue light

Hex#E1EEFF

Border.border-color-blue-light

Text.text-color-blue-light

Background.bg-color-blue-light

color blue bright

Text color blue bright

Hex#118DF0

Border.border-color-blue-bright

Text.text-color-blue-bright

Background.bg-color-blue-bright

color blue

Text color blue

Hex#184E9E

Border.border-color-blue

Text.text-color-blue

Background.bg-color-blue

color blue dark

Text color blue dark

Hex#112E51

Border.border-color-blue-dark

Text.text-color-blue-dark

Background.bg-color-blue-dark

color yellow light

Text color yellow light

Hex#FFE6A9

Border.border-color-yellow-light

Text.text-color-yellow-light

Background.bg-color-yellow-light

color yellow access

Text color yellow access

Hex#FBB720

Border.border-color-yellow-access

Text.text-color-yellow-access

Background.bg-color-yellow-access

color green light

Text color green light

Hex#D4FFE7

Border.border-color-green-light

Text.text-color-green-light

Background.bg-color-green-light

color green

Text color green

Hex#05CE7C

Border.border-color-green

Text.text-color-green

Background.bg-color-green

color green mid

Text color green mid

Hex#0D6D3B

Border.border-color-green-mid

Text.text-color-green-mid

Background.bg-color-green-mid

color green dark

Text color green dark

Hex#094727

Border.border-color-green-dark

Text.text-color-green-dark

Background.bg-color-green-dark

color pink light

Text color pink light

Hex#F1B3bD

Border.border-color-pink-light

Text.text-color-pink-light

Background.bg-color-pink-light

color pink

Text color pink

Hex#F1647C

Border.border-color-pink

Text.text-color-pink

Background.bg-color-pink

color red

Text color red

Hex#C6252b

Border.border-color-red

Text.text-color-red

Background.bg-color-red

color purple

Text color purple

Hex#4C2C92

Border.border-color-purple

Text.text-color-purple

Background.bg-color-purple

color grey light

Text color grey light

Hex#D1D5D9

Border.border-color-grey-light

Text.text-color-grey-light

Background.bg-color-grey-light

color grey lightest

Text color grey lightest

Hex#EEF3F7

Border.border-color-grey-lightest

Text.text-color-grey-lightest

Background.bg-color-grey-lightest

color grey mid

Text color grey mid

Hex#505C66

Border.border-color-grey-mid

Text.text-color-grey-mid

Background.bg-color-grey-mid

color grey dark

Text color grey dark

Hex#172129

Border.border-color-grey-dark

Text.text-color-grey-dark

Background.bg-color-grey-dark

color black

Text color black

Hex#000000

Border.border-color-black

Text.text-color-black

Background.bg-color-black

color white

Text color white

Hex#ffffff

Border.border-color-white

Text.text-color-white

Background.bg-color-white

color transparent

Text color transparent

Hexrgba(255,255,255,0)

Border.border-color-transparent

Text.text-color-transparent

Background.bg-color-transparent

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