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.
Selector
Selector
Selector
Selector
Selector
Selector
Selector
Selector
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.
Hex
Border
Text
Background
Border
Text
Background
Border
Background
Hex
Border
Text
Background
Hex
Border
Text
Background
green light
Hex
Border
Text
Background
Hex
Border
Background
Hex
Border
Text
Background
Hex
Border
Text
Background
Hex
Border
Text
Background
Border
Text
Background
Hex
Border
Text
Background
Hex
Border
Text
Background
Hex
Border
Text
Background
Border
Text
Background
Hex
Border
Background
Hex
Hex
Border
Text
Background
Border
Text
Background
Hex
Border
Text
Background
Border
Background
Hex
Border
Text
Background
Border
Background
Hex
Border
Text
Background