New Light Color Scheme and Theme Toggle

We tested the previous Working NYC website color scheme (dark) alongside a new light color scheme design. After the usability tests, we implemented design revisions based on the feedback we received. We also conducted desk research on color blindness to further help inform our design revisions.

Color assignments and combinations are more standardized between the light AND dark modes. This means updates to the dark mode are also going to be implemented using the learnings from our usability interviews alongside the introduction of a light mode.

Enhanced color scales

• Extended the light (new) and dark background scales with more tints and shades.
• Extended the primary (blue), secondary (green), and tertiary (yellow) scales with more tints and shades.
• Made the primary, secondary, and tertiary scale values more saturated.

Color blindness accommodation using updated primary, secondary, and tertiary color combinations

• The primary color (blue) and secondary color (green) cannot be easily distinguished by users with certain types of color blindness (Tritanomaly and Tritanopia). Therefore, they should not be depended upon for differentiating site functionality (for example blue for buttons and green for links). They should both be considered for similar functional text assignments equally (either/or).
• The tertiary color (yellow) should be more easily distinguished against blue and green by users with certain types of color blindness, therefore, it should be used for emphasizing non-functional text.
• The use of underlining text for hyperlinks has been reinforced. Previously we removed underlines for program card headers in an effort to create visual space. However, this goes against standard practice.

The mobile menu and modal patterns use a bright blue background with dark blue text

This stark contrast between the rest of the UI (bright text with dark background) creates a disruptive experience for those with color sensitivity. It has been updated to reflect the rest of the UI to create a less disruptive experience.

Improved contrast

We have improved WCAG compliance to either AA and AAA in some scenarios following these rules.

• Blue is used for the majority of links, alert backgrounds, and form elements in both color modes, however, one scale lighter is used in the dark mode and one scale darker is used in the light mode for higher contrast with the background scales.
• The use of the tertiary (yellow) button is reduced in both color modes.
• The use of secondary (green) links is reduced in both color modes.

Improved legibility with different updated font families and font sizes used.

• The secondary font, Lato, which is used for body copy is now used for headings at level 4 and below. Previously they used the primary font, Montserrat. Reducing the dependency on font switching between two fonts in the body text should help the content be more legible.
• The page header component which contains the page title and subtitle uses smaller font sizes that break more cleanly in smaller viewports.
• Improved focus state. A focus state for interactive elements has been designed and implemented. Previously, the native browser focus state was used.

Enable color preference using a color toggle.

The color toggle enables users to switch between different themes based on their preferences: a dark mode or light mode.

Tasks

• Release Patterns v-latest and install in WordPress Theme

Other Fixes

• ARIA Labels. While accessibility testing, it was recommended we modify some of the ARIA labels for different regions of the page templates to be written in plain language.

• Swap out navigation element with list element for next step links

• Add Loading Spinner to programs archive

• Update Program Detail page headings font size

• Add screen reader labels to feature icons

• Program cards start at H2. Change to start at H3