Increasing Access

This feature enhancement is targeting increasing web accessibility for visually impaired users by adhering color contrast standards to WCAG guidelines.

Feature enhancement details

Issue Description

This specific subissue aims to refactor the color contrasts of the Storage Bar on the Assets page for all themes.

WCAG guidelines state that non-text color contrast should be at least 3:1. In all themes, the progress bar’s color $P5-pink and background color of the bar $gray have a contrast of just 1.1:1. This could be addressed by 1) increasing contrast between the bar color and the progress bar background, and 2) adding a border that contrasts with the page background.

Location of the requested changes on the editor: https://editor.p5js.org/{username}/assets

Change Requested

• Light theme

  • Change progress-bar-background-color to $light
  • Add a variable to the light theme called progress-bar-border-color and set it to $middle-gray

• Dark theme

  • Change progress-bar-background-color to $darker
  • Add a variable to the light theme called progress-bar-border-color and set it to $middle-gray

• Contrast theme

  • Change progress-bar-background-color to $darker
  • Add a variable to the light theme called progress-bar-border-color and set it to $middle-light
  • Change progress-bar-active-color to $yellow

• In _asset-size.scss, change the border from transparent to progress-bar-border-color

  • Within @include themify(), add a line that sets border-color to getThemifyVariable(' progress-bar-border-color')

Visuals

Dark mode:

Light mode:

Files to change

• Variables.scss ($themes), _asset-size.scss

PR Criteria

• Provide screenshots in ur PR of the visual changes implemented
• Provide QA steps for how reviewers can ensure your changes are made properly
• Test out by uploading assets in your local environment. You'll need to set up an AWS s3 configuration by creating an AWS s3 bucket. This is the main doc dedicated to outlining the steps, which came from the Configuration section of the Installation doc.

Additional Resources:

• Color Combinations for Accessibility – tool developed by @Izzy-Snyder 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.