editor contrast issues

[Izzy-Snyder]

Increasing Access

This issue is about addressing issues with contrast in the p5 editor to comply with web accessibility guidelines

Feature enhancement details

I have been going through different components in the editor and checking to see if they meet contrast guidelines in the different themes. This is not fully comprehensive, but it is what I have found and documented so far!

P5 pink

There is no good background color for p5 pink for small text in either theme. It has a contrast of 4.1:1 against the main background colors. The one color that is above a contrast ratio of 4.5:1 is against pure black, which is not part of all the themes. This is a big issue to address since it is so integrated into the p5 editor style. Either all of the text would need to be 18pt or larger if it is pink, or there should be a different color for links that are in small text. It works totally fine for buttons. In high contrast mode, yellow is used so this is not an issue.

Storage bar on assets page

• P5 pink (#ED225D) and Middle gray (#747474)have a contrast of just 1.1:1
• Suggestion: outline the bar in middle gray, fill with light (#F0F0F0) for a ratio of 3.7:1 for the internal components and 4.5:1 between outlines and background for light and 3.6:1 for dark
• variables.scss, progress-bar-background-color and progress-bar-active-color in each theme (only used on progress bar, so could be edited theme wide without other changes)

Search bar on sketches page

Light theme

• Outline: middle light (A6A6A6)
• Bg: lighter (#FBFBFB)
• Inside: white (FFFFFF)
• Text: can’t tell, but almost certainly too light for small text
• Outline does not have enough contrast with either inside or background
• Suggestion: change outline to middle dark, (666), and text to middle gray 747474. Text will still be lighter than other text but it will be more visible on the background.

Dark theme

• Page bg: darker (1C1C1C)
• Inside: dark (333)
• Outline: middle dark (666)
• Page Bg to outline is just under 3:1
• Text contrast is fine
• Outline could be changed to light (f0f0f0) or lighter (fbfbfb) to have over 4.5:1 contrast with both inside and background

found in:

• searchbar.scss, .searchbar__input or input-border-color and input-background-color in variables.scss (though this would impact other elements)

File menu - non-clickable options

When you are not logged in, you can't do actions such as saving a sketch. This is indicated in the menu in most themes by a very subtle change in text color.

Light theme

• Grayed out text is too light, and has very little contrast to the non-grayed out text
• Bg: #F0F0F0 (light)
• Gray out text: 747474 (middle gray)
• 4.1:1 (too small for small text)

Contrast theme

• no difference in text when enabled/disabled

Dark theme

• Text is ok on background but not relative to each other

change ideas

• Maybe just make all text the same color?
• Add in (disabled) in text form next to it?
• Don't highlight when hovered over and/or put a cancel symbol icon as the mouse?
• italicize disabled options?

found in:

• _nav.scc, .nav__dropdown-item and &.nav__dropdown-item--disabled

Run and stop icon state indicated by color

contrast

• Not enough contrast between button states
• Could change inactive background to middle gray (747474). This would have 3.6:1 contrast on the page bg and 3.4:1 with the active button color (yellow)

dark

• P5 pink and medium dark (4D4D4D)
• inactive button bg is also not high contrast against the background of darker (1c1c1c)
• Change inactive button to light for contrast between bg and active button (15.0:1 with bg and 3.7:1 with active button), OR add light outline around whichever is active as extra indicator.

light

• inactive button is medium light on lighter, 1.4:1 ratio, and under 3:1 relative to active button
• Idea: invert inactive colors (swap light for dark - 333) to give 3:1 contrast between fill colors and 12.2:1 between inactive and bg fills
• Alt idea: Add outline in dark to both and remove fill on inactive button

Found in:

• Variables.scss toolbar-button in each theme, and toolbar__play-button in _toolbar.scss

Create file

dark/contrast

light

• Same adjustments as suggested for search bar (name and outline of bar seem too low contrast)

found in:

• Either modal in _placeholders.scss or theme.js

Checkboxes in light accessibility menu, light theme

• checkboxes are too light
• could change to be dark (same as text)

found in:

• Variables.scss input-border-color in each theme (this is also used for seachbar and any textarea component, so it may require thorough testing)