WordPress.org

Making WordPress.org

Opened 6 months ago

Last modified 5 months ago

#5757 new enhancement

Color blind feature for translate.wordpress.org ?

Reported by: NekoJonez Owned by:
Milestone: Priority: normal
Component: Translate Site & Plugins Keywords: needs-patch
Cc:

Description

Lately when I'm going through all the waiting strings for all the plugins and themes in my locale, I notice that I sometimes have a hard time seeing the difference between the orange of fuzzy strings and the red of refused strings.

This becomes especially annoying when for a plugin suddenly 200+ strings go fuzzy, and you want to reject to completely redo them...

Personally, I'm not color-blind, but I do think that people being color-blind especially for red will have an even harder time seeing the difference. So, I think it would be cool to have a feature in your translation settings or something along those lines to change the colors to make things like written above easier when checked.

Attachments (2)

translation-table.jpg (475.8 KB) - added by critterverse 6 months ago.
Revised design for translation tables that show the status of strings for a specific project in a locale
translation-table-v2.jpg (481.6 KB) - added by critterverse 6 months ago.
Alt version that has a slightly more saturated red and orange color for "Fuzzy" and "Rejected" rows to help make the difference more pronounced

Download all attachments as: .zip

Change History (12)

This ticket was mentioned in Slack in #accessibility by nekojonez. View the logs.


6 months ago

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


6 months ago

This ticket was mentioned in Slack in #polyglots by nao. View the logs.


6 months ago

@critterverse
6 months ago

Revised design for translation tables that show the status of strings for a specific project in a locale

#4 @critterverse
6 months ago

  • Keywords needs-patch added

Hey all, sharing a potential design solution based on an idea @NekoJonez had in the Accessibility Team channel on Slack! The idea was to add an additional column that indicates the status of individual strings in a table view. We discussed potentially adding an icon but since there are 6 different status options, I thought a text label might be more clear.

A few notes:

  • We could potentially add this new column after the “Priority” column and before the “Original string” column, with the label of “Status”
  • Another thing that I found was making it difficult to differentiate between one cell to the next was the very light gray border color being used. I would recommend using a darker gray like the gray used for the header bar area (hex # 666C70)
  • The “Details” link in blue (last column to the right) is also not providing enough contrast with certain color-coding combinations. I would suggest using the regular black text color with an underline to indicate that it’s a link.
  • We could also tweak the red and orange color for "Fuzzy" and "Rejected" rows to help make the difference more pronounced (mockup uses # EB9090 for red and # F6A983 for orange).
Last edited 6 months ago by critterverse (previous) (diff)

@critterverse
6 months ago

Alt version that has a slightly more saturated red and orange color for "Fuzzy" and "Rejected" rows to help make the difference more pronounced

#5 @NekoJonez
6 months ago

Thank you @critterverse for the amazing work and proposal! Love it!

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


6 months ago

#7 @ocean90
6 months ago

In 11052:

Translate: Update color for "Details" link to provide enough contrast in all color combinations.

Props NekoJonez, critterverse.
See #5757.

#8 @ocean90
6 months ago

In 11053:

Translate: Tweak the red and orange colors used for rejected and fuzzy translations.

Props NekoJonez, critterverse.
See #5757.

This ticket was mentioned in Slack in #polyglots by evarlese. View the logs.


5 months ago

#10 @Otshelnik-Fm
5 months ago

border's very contrasting. This was in wordpress 5.x, but then the sharpness of the borders was reduced there and it became good. Fix it

the :focus of the active window is terrible. Blue makes its way through the black border - this is also worth paying attention to and correcting

Note: See TracTickets for help on using tickets.