phpinfo HTML accessibility improvements with WCAG recommendations

[Ayesh]

• phpinfo HTML accessibility: Fix the color contrast for "no value" labels

  The HTML output of phpinfo() function has a little bit of CSS to improve the readability of PHP configuration values. Previously, the background color was #dddddd, while the text color for "no value" label was #999999. This resulted in a contrast ratio of 2.10, which did not meet he WCAG minimum text contrast guidelines.

  This increases the contrast ratio to 7.06 (AAA grade) by changing the text color to #454545. On dark theme (prefers-color-scheme: dark), the text color is changed from #999999 to #c4c4c4.

  The new colors are calculated by adjusting the "lightness" factor of the current colors using LCH (Lightness, Chroma, Hue) sampling. The lightness is decreased (increased, in case for dark theme) until the new color achieves an AAA score in WCAG guidelines.

  	Before	After
  Normal	WCAG 2.1	WCAG 7.06 AAA
  Dark theme	WCAG 4.03	WCAG 7.24 AAA

• phpinfo HTML Output: Make module title names clickable and link to the URL fragment

  Each section of phpinfo is titled with an <h2><a name="module_NAME">NAME</a></h2> tag. While the name=module_NAME attribute allows linking to that section using a URL fragment (e.g info.php#module_NAME), it lacks discoverability because the <a> tag does not contain an href attribute. This is also highlighted in accessibility scans (in Firefox for instance).

  This adds a link to the <a> tag that links to the URL fragment, fixing the accessibility remark and improving the discoverability of the clickable section titles. Also contains minor CSS changes to account for the dark theme CSS.

  This change was moved to phpinfo HTML Output: Make module title names clickable and link to the URL fragment #9054.

[javiereguiluz]

Thanks Ayesh! I like the idea of improving contrast for folks who need it 👍 Also, the text in italics might be enough to differentiate the "no value" situation from real values.

However, for future reference, I'd like to mention that the way WCAG 2 calculates contrast is flawed. Here's a lengthy technical discussion if anybody is interested: w3c/wcag3#192 This is being fixed in WCAG 3, which introduces a different, and more accurate, way of calculating text contrast: https://www.w3.org/TR/wcag-3.0/#visual-contrast-of-text

[TimWolla]

Both changes are a clear improvement.

[Ayesh]

@javiereguiluz thanks a lot for this, I wasn't aware of issues with WCAG 2, and the discussion is such an amazing resource to learn a lot from.
Judging by the APCA contrast calculation method (with this tool), the current contrast seems acceptable as well, although the new colors proposed is an improvement too.

[mvorisek]

To me, the new no value contrast improves readability of such value, but decreases the difference vs. real/set value which is the "greater purpose" of such styling difference, thus violating accessibility from other side :)

On my monitor, the original no value /w dark theme looks reasonably readable. /w normal theme, the no value text is not as easy to read, so the contrast may be increased slighly, but the newly proposed contrast is too much for reason described above.

[Myndex]

Hi @Ayesh @javiereguiluz @TimWolla

I agree that's a significant improvement! My eyes say thank you, too...

And yea, thread 695 has 128 posts and 44,000 words and can be hard to parse, so I created a Linktree with the easy shallow dive—simplest stuff is at the top: https://linktr.ee/Myndex

And the deep dive is here: https://git.myndex.com

Differentiation

Hi @mvorisek

... the newly proposed contrast is too much for reason described above.

I don't think it's too much, the fact it is smaller and italicized gives it distinction. But as we're on the subject:

You do not have to give up "distinction" to have readability.

Method A: Increase weight

Contrast perception is substantially driven by "spatial frequency" meaning font weight, and size, and spacing. Middle contrast between 33 and dd is 90. Look at the bottom row (NOTE: this is a research tool, so do not think of these values as normative in any way—active research so they change often):

https://www.myndex.com/SAPC/?BG=333333&TXT=909090&DEV=98G4g
https://www.myndex.com/SAPC/?BG=dddddd&TXT=909090&DEV=98G4g

Method B: Add Hue/Chroma

It is a common misconception that "color should be avoided"— not really. What needs to be avoided is using color as the ONLY way to convey information. In this case, color would not be used to "convey" anything, only to add distinction to the words "no value".

In this case however, the text values do need to change, faa in dark mode and 944 in light mode provide more than Lc 60, and the slight added red aides distinction.

https://www.myndex.com/SAPC/?BG=333333&TXT=ffaaaa&DEV=98G4g
https://www.myndex.com/SAPC/?BG=dddddd&TXT=994444&DEV=98G4g

[morrisonlevi]

Are the colors in the screenshots up-to-date? Seems like more recent discussion using another color instead of just brightness. Personally don't like it because we don't need to draw extra attention to "no value" as it's not wrong or right, it's just how it is. I think italics is fine.

[Ayesh]

@morrisonlevi - thanks a lot for the review. The screenshots are still accurate, but they use the WCAG 2.0 recommendations which I learned to be not exactly accurate. I have not selected colors yet, and it is not clear to me if we would be using a color/lightness change in the first place, because just showing no value in italics may be just sufficient.

However, I created #9054 with the HTML anchor change, to separate the concerns and ease the review. I made sure to include a comment on the test file's --POST-- section like you suggested.

Thank you.