jmoenig
An Accessible High Contrast Mode
This is not done!! Not sure when I will finish this, but this is one way to think about meeting WCAG contrast requirements.
- darken the default palette by 40%
- still use white/black text for blocks because of this.
- Create a new 'design' mode which is largely based off flat design
- This design sets large fonts
- Create a new theme called 'high contrast' which uses the high contrast colors
TODOs:
- Flat mode buttons look ugly. I tried to add a border (we need to remove the gradient)
- The design mode menu checkboxes are broken
- I think 40% is too much. Maybe 30% or 25% darker?
- With darker blocks, should we use a light mode, or possibly a
- slightly lighter dark mode background?
- We should darken the font (to be closer to #000) in dialogs and other places
- We should increase the base font size in dialogs and related places by a bit
- The green/red boolean toggle will need adjustment
A smattering of screenshots:
Some are from: https://multiple-contrast-checker.netlify.app which I used to generate the color tables. we probably want to verify the hex codes match what are the rgb values in Snap! because I used copilot to convert them but they look close enough.
Project with all C-shaped blocks to test zebra coloring and combos Untitled-2.xml
Also, the scroll bars are definitely too big, and I think this 2X larger as a default for a large font mode is probably a bit much. This does highlight a couple edge cases with accounting for the positioning of a scrollbar in a scroll frame
Wow, this is already really nice and even ... beautiful! Do you want me to pull it into production already, or should we keep working on it and perhaps pull it into dev?
Let's wait a bit -- we need to fix the menus and sliders before pulling to dev, definitely not production yet. :)
@jmoenig OK! I think this is quite close. It's not perfect, but probably good enough for dev mode, and nearly good enough for production (one bug, I think).
There's a few things:
- I did try to add subtle outlines to all buttons in flat design, which I think is useful for everyone.
- When you load Snap! from a previously saved flat design setting, it doesn't apply the same settings/colors for some reason. This is the one bug that I think still exists.
Some things I am not sure about, and there's lots of little things to tackle over time:
- Should we have a white outline (very visible) in the high contrast setting or something a little more subtle? (We could go 'thicker' but that actually looked weird...) -- This would be good to get feedback from others one, I'm not set on any one color. I do think a more contrasty outline is beneficial though.
- 'large text' I think makes more sense as a morphic design setting (kinda like flat mode) and high contrast is saved in the IDE (as a theme). This was the most reasonable way I could see separating this two, but there are lots of edge cases. When I save the setting, I save the design as
large-text-flat. In theory we could create a new saved setting for font-mode or large-text or something, but it felt like there was already a lot of settings, and I think flat mode is a little less to visually process... - In high contrast mode, the dialog titles are now a bit darker
- I did a bit of refactoring for how settings are saved and loaded for some classes so it'd be easier to restore the values. Still a little clunky, but I'm not sure there's a perfect option.
In the future, we might want to separate the dialog title color from the button highlight color, but as long as they are the same, I tried to tweak the color so it's good for both black and white text.
For later, mostly for myself:
- Tweak the red/green of the boolean block in high contrast mode
- the active highlight in list items in high contrast mode is too dark for black text
- the text+scrollbars exceed the boundaries of ScrollFrameMorph's by a pixel or two in each direction (not a big deal in practice, but more noticeable with large scrollbars and fonts. This has been there for a while.)