User:Xingyzt/archive/proposal

From Wikipedia, the free encyclopedia

Redesigning page-protection padlock icons to be more accessible
EXAMPLES:
[edit]

Background

Page-protection padlocks are icons at the top right corner of protected pages. However, the current padlock designs have several flaws, many of which harm people who have visual impairments.

1. The padlocks were not designed for viewing at such a small size.
  • The edges on the icons have a white glow, which makes them appear to blend into the backgruond.
  • The shackle is thin and light, contrasting poorly with the background.
2. Many of the padlocks do not have adequate color contrast.
  • Per WP:COLOR, the contrast of text (or in this case, small icons) with its background should reach at least Web Content Accessibility Guidelines (WCAG) 2.0's AA level. This is because some readers of Wikipedia have visual impairments such as partial or full color blindness.
  • However, current lock icons like pending changes protection (light grey) and create protection (cyan) fails to meet the AA standards.
3. Most users cannot tell the type of protection each lock represents from a glance.
  • There are no visual aids that help people understand what the different padlocks mean.
Proposal
Old New
Fully protected
Template-protected
Silver padlock
Blue padlock
Green padlock
Purple padlock
White padlock
Dark blue padlock
Black padlock
Turquoise padlock

This proposal redesigns the current padlock icons with more accessibility and minimalism in mind. Unnecessary elements such as textures and shadows are removed, and all of these redesigned icons have AA-level contrast.

Symbols are embedded in the padlocks to further help in identifying different locks. For example, upload protection now has an upload icon inside the purple padlock, and cascade protection, where pages transcluded onto the protected page are also protected, now has a link icon.

Additional notes

Some have suggested that the shackles to be changed to grey to make the padlocks look more realistic. I think that it would be detrimental, as these icons are for viewing at a small size and grey shackles reduces the amount of space left for the color.

Others have noted that these padlocks are similar to the ones used at WikiData. I wasn't aware of that, but it would be great if the folks there implement the embedded icons too.

Tl;dr

The proposed redesign makes the page protection padlock icons accessible for colorblind and other visually impaired users by adding embedded icons and boosting the color contrast. They are also less complex, without fancy textures and shadows, making them both faster to load and easier to see.