Increasing color contrast of input fields

[runningonsideprojects]

Increasing Access

adhering more components to WCAG guidelines ensures that more people are able to use the editor

Feature enhancement details

Issue Description

This specific subissue aims to increase the contrast of several input field elements so they adhere to WCAG guidelines. WCAG guidelines state that non-text color contrast should be at least 3:1, and small text contrast should be 4.5:1.

The elements we’ve identified that are failing to adhere to these provisions are:

• search sketches text field
• checkboxes in the settings modal
• name field when creating a file in the editor.

In light mode:

• The fields are not distinguishable from the background because there is neither:
  • 3:1 contrast between the input background color ($lightest) and the page background
  • NOR 3:1 contrast between the field outline and the page background
• The placeholder text color is also too low contrast with the field background

In dark mode:

• The fields are not distinguishable from the background because there is neither:
  • 3:1 contrast between the field background color ($dark) and the page background
  • NOR 3:1 contrast between the field outline and the page background
• And the color contrast between the placeholder text (#757575) and input background color ($dark) of the input element is 2.74:1

Change Requested

• Light theme:

  • change input-border-color to $middle-dark
  • Configure input::placeholder (variable that sets inactive input text) to $middle-gray

• Dark theme:

  • Change input-border-color to either $light or $lighter
  • Change Configure input::placeholder (variable that sets inactive input text) to $middle-gray

Visuals

Location of the Search sketches component in the editor: https://editor.p5js.org/{username}/sketches

Location of the Create File component: 1) click the < arrow next to sketch.js, then a drawer should open up. 2) Click the + next to Sketch Files.

Location of the checkboxes in the Settings Modal:

https://editor.p5js.org/ (sketch files > + > create file and settings > accessibility)

Files to change

• input-border-color and input-background-color in variables.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
• Ensure that the changes to input-border-color and input-background-color do not cause contrast issues for other elements.

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.

[dpoppe7]

Hello! I would like to work on this issue, could it be assigned to me?