Page MenuHomePhabricator

[spike] Use a heuristic to detect colour issues on rendered content for dark theme
Closed, ResolvedPublic

Description

One potential approach to deal with dark theme rendering issues in mobile apps is to intervene at the mobileapps. While preparing the articles for the API response we could use some sort of heuristic to detect text when text is rendered over a similar gradient (or a colour that might render it unreadable) and fix it by

  • Choosing a different similar colour that would improve readability
  • Notifying the article talk page with a link

Event Timeline

Hi @MSantos , @Jgiannelos

I decided to create a draft version of the possible solution which I've placed into repo - https://github.com/VadimKovalenkoSNF/wiki-colour-issues-filter
There are two branches: main and client-filtering
In the main branch you are able to check both approaches with filtering - client side and server side.
Server side is commented because I haven't managed to init filtering using domino package (which is using as virtual DOM library for mobileapps).
Probably, they haven't implemented functionality of the window.getComputedStyle (check here - https://github.com/fgnass/domino/blob/12a5f67136a0ac10e3fa1649b8787ba3b309e9a7/lib/Window.js#L55)
As for client side (it is default in my code), it works, but the time of the parsing of the page may vary. Also, at the moment it checks only equal colors and highlight nodes with the wrong styling with red border.

In the client-filtering branch I've implemented color comparison but with simple static page with iframe inside.
However, at the moment iframe can render desktop version of the Wikipedia. To gain this ability for mobileapps should be adjusted Content Security Policy directive if possible. I didn't dive into it, but leave iframe feature as an option in the future.
You can check client-filtering in github pages as well - https://vadimkovalenkosnf.github.io/wiki-colour-issues-filter/

Let me know, if you have additional questions/suggestions.

cc: @ssastry , @AnnaMikla

I think we should consider it done since we have both Vadims implementation for readability and pa11y which implements the w3c checks for a11y.