Page MenuHomePhabricator

[spike] Use w3c accessibility standards to detect readability issues with dark themes
Closed, ResolvedPublic


w3c provides web standards around accessibility. The nature of our rendering issues might be similar to accessibility issues (when using a dark theme in the web browser level for accessibility purposes). We can investigate if there is any sustainable solution/tooling that exists for dark theme rendering issues in the ecosystem that we could re-use.

Event Timeline

Theme issues appears because of the wrong contrast ratio value for elements. From wiki:

The contrast ratio (CR) is a property of a display system, defined as the ratio of the luminance of the brightest shade (white) to that of the darkest shade (black) that the system is capable of producing

There are a bunch of tools/websites that allow to check contrast ratio for different colors ( example 1, example 2)

Contrast ratio calculation algorithm based on this functionality:

  1. Consider contrast requirements for text with small font size ( <18pt or >=14pt bold ) and big font size ( >=18pt ). Satisfying these requirements is needed to reach AA and AAA level of conformance. [1]

These requirements based on WCAG ( Web Content Accessibility Guidelines ) [2] [3]

This table represents contrast ratio that need to be achieved:

Small text ( <18pt or >=14pt bold )4:5:17:1
Big text ( >=18pt )3:14:5:1

Note from [5]:

For CJK languages ( Chinese, Japanese, and Korean ) the "equivalent" sizes would be the minimum large print size used for those languages and the next larger standard large print size.

  1. Calculate relative luminance for background and foreground using formula: L = 0.2126 * R + 0.7152 * G + 0.0722 [5]
  1. Calculate contrast ratio using both background/foreground relative luminance: CR = (L1 + 0.05) / (L2 + 0.05) [6]
  1. Use CR value as a filter value to notify users about uncomformance design

[1] - WCAG 2.0 - Conformance requirements ( link )
[2] - WCAG 2.0 '4:5:1' contrast criteria calculation ( link )
[3] - WCAG 2.1 Contrast minimum ( link )
[4] - WCAG 2.1 Large scale (text) ( link )
[5] - WCAG 2.1 Relative luminance (link)
[6] - WCAG 2.1 Contrast ration definition ( link )
Also: useful article ( link ).

The strategy looks good to me, I wonder if we can get this kind of check with just native JS and CSS easily without relying on 3rd party libraries

Third party libraries are not required for contrast ration calculation.

We're taking this into account to move forward with the MediaWiki Mobile Previews feature request.