Poor accessibility and usability since redesign

[katlyn]

From commit 1f47bac and forward, updates to the site design have made it less accessible and have decreased usability. There have been some improvements (such as more clear active focus rings), but overall the changes in contrast and layout have made the site more difficult to use.

Accessibility and Contrast

At the time of writing, the application menu has this appearance:

Most notably, the download button has very poor contrast - failing the WebAIM contrast checks for both normal and large text. Additionally, the shadow effect that is overlayed on top of the button further washes the text out to have event worse contrast. At its worst, the button appears like this with a contrast ratio of only 1.23:1.

The save button (after rendering) suffers from a similar issue. Pre-redesign, the render button had a contrast ratio of 11.81:1.

While more difficult to quantify as there are fewer guidelines on the subject, the contrast between a toggled and non-toggled button is also very low, making it difficult to quickly distinguish between items that are active and inactive. Adding to this, the hover color is nearly identical to the actively toggled color.

Pre-redesign hover was shown with an outline and active was shown by inverting the control, making the two states clear. However, it must be acknowledged that this is still not ideal, as it's not immediately obvious which state is active and which is inactive. This same issue exists in the redesign, but is made even worse due to the similarity in the colors for active and inactive.

Usability

One of the largest visual changes in the redesign is that the control menu changed from a floating menu to a static sidebar - taking up all vertical space for the area of the page that it occupies. This leads to less space being available for previews on narrower screens, which in turn leads to less display area for the cropping interface without overlap from previews. With the default loaded previews, a screen width of just 1024 pixels already reduces the crop view's width to just 154 pixles - barely big enough to control, let alone make precise adjustments. This issue exists regardless of display height. Pre-redesign, this largest 512x512 preview was not present, so this issue did not present itself immediate - but with the defaults being changed, it is now immediately evident on smaller window or screen sizes.

In Summary

While I do personally prefer the old design to this one, this issue isn't necessarily to say that it needs to be undone - there are just several issues that should be addressed. Work can be done to fix these as well as to address the issues that may have already been existing pre-redesign to improve the user experience.

[nurusara]

i can say that on mobile (safari ios 14.4.2) the website doesnt work at all and gets stuck at the rounded rectangle thing that appears for some reason before asking you to choose your file :[

this only became a problem a bit after the redesign was released 😭

[TheOddball]

Hm. Didn't even know I may have accidentally added a 512x preview as default. After looking into this, I realized that the 512x preview is in-fact, not default. The site will save when you add a preview manually, and make it appear on subsequent loads.

Also, it appears to be perfectly functional at 1024x768, I did test most screen sizes beforehand.

I will certainly look into all of the raised issues. Thank you for bringing this to my attention.

[TheOddball]

I do agree that the Download button is a bit hard to read, this will be adjusted immediately.
Fixed in d38767d

[TheOddball]

Noticibility was improved on hover of download button in 888fbeb

[TheOddball]

i can say that on mobile (safari ios 14.4.2) the website doesnt work at all and gets stuck at the rounded rectangle thing that appears for some reason before asking you to choose your file :[ this only became a problem a bit after the redesign was released 😭

Unfortunately, I do not have an iOS device to test with