Run and stop icon color contrast refactor

Increasing Access

This specific subissue aims to address the colors of the run and stop icon in the main page of the p5.js editor.

Web accessibility guidelines require color to not be the only way of conveying visual information. Currently, the button state is only distinguishable by colors that do not have sufficient contrast between each other in dark or high contrast mode.

Feature enhancement details

Change Requested

The requested change is to indicate the active/inactive states by a filled and stroke only version of the button, both using the active color. This would allow for the button states to always be distinguishable from each other without using color alone.

It would probably be good to have the button to have a primary and a secondary variant, as well as variants for disabled, hover, and active (that apply to both primary and secondary). The primary variant would be filled, and the secondary variant would be stroke only. See this article :)

However, if that’s out of your wheelhouse, this could be a more granular change since currently it only affects one button.

Visuals

Before (start/stop indicated with subtle color change alone):

Requested change (basic)

rest

• bg fill: none
• icon fill: none
• icon and button outline: toolbar-button-color

hover

• bg fill: none
• icon fill: none
• icon and button outline: button-background-active-color

active

• bg fill: button-background-active-color
• icon fill: toolbar-button-color

Comprehensive style change:

primary, rest (used for other toolbar buttons)

• bg fill: toolbar-button-background-color
• icon fill: toolbar-button-color

primary, hover/active

• bg fill: button-background-active-color
• icon fill: toolbar-button-color
• Files to change

secondary, rest

• bg fill: none
• icon fill: none
• icon and button outline: toolbar-button-color

secondary, hover

• bg fill: none
• icon fill: none
• icon and button outline: button-background-active-color

secondary, active

• bg fill: button-background-active-color
• icon fill: toolbar-button-color

Files to change

Client > styles > _toolbar.scss

Classes: .toolbar__play-button and .toolbar__stop-button

Under “&:disabled”:

• Remove the fill
• Change the outline to the themify variable button-background-active-color

Client > styles > abstracts > _placeholders.scss

%toolbar-button

• May need to make some changes here to the outline or fill so the square/triangle in the button has an outline of button-background-active-color
• Make sure that this does not affect the other toolbar buttons

PR Criteria

• Provide screenshots in your PR of the visual changes implemented
• Provide quality assurance steps for how reviewers can ensure your changes are made properly
• Ensure that changes to not alter other toolbar buttons

Additional Resources:

• Color Combinations for Accessibility – tool developed by @izzy-synder that generates custom color palettes for components while adhering to WCAG guidelines and p5.js styling standardizations.
• Zeplin Style Link – the p5.js editor’s styling standardizations
• Preparing a Pull Request – how-to guide on creating a Pull Request
• Style Guide Documentation (WIP), best-practices guide on implementing styling changes to the codebase.