processing
editor contrast issues
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)
Hey @Izzy-Snyder i would like to work on this issue.
i have implemented the changes to my local branch but having one in the file menu i.e. whether user is logged in or not the disabled options should not highlight.Correct me if wrong
I would like to take up this issue
Hello! My apologies for taking a while to respond. It sounds like @AviGawande has already worked on this a bit, so I am going to ask them to share what they've done, and then maybe if there is more to do or changes to be made, we can coordinate in this thread so there isn't duplicate work happening.
Hey @Izzy-Snyder i would like to work on this issue.
i have implemented the changes to my local branch but having one in the file menu i.e. whether user is logged in or not the disabled options should not highlight.Correct me if wrong
Hello @AviGawande. Could you share some screenshots of what you've worked on and which part of the issue they address?
The disabled options should not highlight regardless of if the user is logged in or not. The set of disabled actions will be different depending on if they're logged in, so I'd stick to using whatever logic is coded in for that already that is changing the text color, and instead disable the highlighting there. Does that make sense?
I know that @harshpsi9194 would like to work on some pieces of this as well - let us know if there are things they could pick up.
Hello @Izzy-Snyder
Hey @Izzy-Snyder i would like to work on this issue.
i have implemented the changes to my local branch but having one in the file menu i.e. whether user is logged in or not the disabled options should not highlight.Correct me if wrong
Hello @AviGawande. Could you share some screenshots of what you've worked on and which part of the issue they address?
The disabled options should not highlight regardless of if the user is logged in or not. The set of disabled actions will be different depending on if they're logged in, so I'd stick to using whatever logic is coded in for that already that is changing the text color, and instead disable the highlighting there. Does that make sense?
I know that @harshpsi9194 would like to work on some pieces of this as well - let us know if there are things they could pick up.
Thanks @Izzy-Snyder for responding, i have implemented the changes except the file menu in which i had confusion , here are the screenshots.
@AviGawande most of this looks great!
To fully address contrast for search and create file, in addition to changing the borders around the fields, the text color may also need to change to meet contrast requirements. There are a couple ways to check this. You could the color contrast checker tool on your screenshots and make sure they have a ratio of at least 4.5:1 (since it's small text). Alternatively, you can check out the wiki entry I just made with reference for which colors can go on which backgrounds, and pick a text color that works against the background.
For the progress bars, the main issue was with the internal colors of the bar. Could you try out my suggestion from earlier - "outline the bar in middle gray, fill with light 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"
I think the italics are a good solution to start for the file menu, but it does impact the style quite a bit, so I'd be interested if @raclim has any feedback on that? I may try to take a shot at that myself if it's feeling confusing.
Thanks for your work on this!
I’d like to work on improving the color contrast across themes. I’ll adjust the SCSS variables (like progress-bar, input borders, toolbar buttons, and disabled text) to meet WCAG contrast ratios. For small text using p5 pink, I’ll pick an alternate accessible color and tweak outlines/fills in searchbar.scss, _nav.scss, and _toolbar.scss to increase visibility. I’ll test the updates in light, dark, and high-contrast themes before opening a PR
@AviGawande @harshpsi9194 @rawatjidelhiwale - a group of contributors along with @raclim are working on updating what has and hasn't been done on this issue. Could each of you share: -what work (if any) you have done (please be clear about which part(s) of the issue this addresses) -whether you are still interested in contributing -what specific parts of the issue you would be interested in working on
We are going to break this issue down into some smaller pieces corresponding to smaller future pull requests. That way people can sign up to work on specific things that are more clear to track since this is such a large issue. We will follow up with that in a few weeks after we've met and discussed! Thank you for your patience :)
@Izzy-Snyder @AviGawande @harshpsi9194 @rawatjidelhiwale there is no update till now, so i am thinking solving this issue Can I move forward with this?
Thanks for following up @Izzy-Snyder and for your interest in this issue @piyushzingade! If possible, would you be able to provide some context to the questions listed above so we could have a better idea of where to guide folks to start?
I'm going to unassign @AviGawande and @harshpsi9194 since I haven't heard back, but if any of you are interested in participating you are welcome to help review any future PRs on this issue!
@piyushzingade and @rawatjidelhiwale, we will be adding some sub issues soon for the unfinished work on this issue and we can assign you based on your interest :) Just trying to make it easier to track, thank you for your patience!