Color blindness in the diffs from the translation memory

Disclaimer: I am not an accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) expert, so everything written here is the result of my experimentation and I may be wrong.

A recent change in the color of the diffs from the translation memory raised an accessibility problem (thank you, @tobifjellner).

We have highlighted with red color the removed words and with green color the added words.

These are the current colors:

These colors have their origin in the first graphical diff/merge tool:

GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ has the same default color scheme, and these colors have become a standard in the IT industry.

Color blindness

The Accessibility Inspector in Firefox Developer Tools allows us to simulate the different color blindness. I am going to simulate the 5 different color blindness at translate.wordpress.org page with this translation.

Without blindness

Protanopia (no red)

Deuteranopia (no green)

Tritanopia (no blue)

Achromatopsia (no color)

Contrast loss

Problems

I see problems for the people with Deuteranopia (no green) and Achromatopsia (no color), so we have to look for new colors:

  • Who resolve the all blindness problems.
  • Who have enough contrast between the font color and the background.

Or for a new solution to allow to all color blindness people to differentiate between the removed text and the added one. We don’t have in our roadmap to create different themes.

Possible solutions

Change the colors

I am going to review the different themes available at GitHub with this PR, so we can see if some theme resolve all the problems presented above.

  • Light default. Problems with deuteranopia and achromatopsia.
  • Light high contrast. Problems with deuteranopia and achromatopsia.
  • Light Protanopia & Deuteranopia. Small problems with achromatopsia.
  • Light Tritanopia. Problems with achromatopsia.
  • Dark default. Problems with deuteranopia and achromatopsia.
  • Dark high contrast. Small problems with deuteranopia and achromatopsia.
  • Dark Protanopia & Deuteranopia. Problems with achromatopsia.
  • Dark Tritanopia. Problems with achromatopsia.
  • Dark dimmed. Problems with deuteranopia and achromatopsia.

The best option is the “Light Protanopia & Deuteranopia” theme, but:

  • The colors are not very representative for their purpose.
  • It has problems with achromatopsia.
Default color for the “Light Protanopia & Deuteranopia” theme.
“Light Protanopia & Deuteranopia” theme with the achromatopsia simulation.

Strike-through deleted text

If we add a strike-through mark to the deleted text, we:

  • Can maintain the same color scheme we have.
  • Solve the problems with the color blindness.
  • Remove some readability to the deleted text.
The deleted text with “text-decoration: line-through;”
The deleted text with “text-decoration: line-through;” and achromatopsia simulation

Contrast

The current color and background combination for the removed and added texts doesn’t meet WCAG standards for accessible text.

The contrast for the removed text is 4.29 and the contrast for the added text is 3.21. The minimum ratio (AA rating) should be 4.5 and the enhanced ratio (AAA rating) should be, at least, 7.

Possible solution

The best solution is to change the color for both texts, achieving the 7:1 ratio. If we use black, the deleted text ratio is 11.32:1 and the added text is 14.44, getting the AAA ratio.

Conclusion

If we change the contrast, and if we add the strike-through to the deleted text, we will improve the accessibility, and we will open the solution to color blindness people.

Achromatopsia simulation

#accessibility