From 4e6d9ab169c4f263bbfa8d3e6ec315d0a0fac612 Mon Sep 17 00:00:00 2001 From: Ayesh Karunaratne Date: Sat, 9 Jul 2022 00:25:43 +0530 Subject: [PATCH] `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. --- ext/standard/css.c | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/ext/standard/css.c b/ext/standard/css.c index 757236c371739..becb0f0811db7 100644 --- a/ext/standard/css.c +++ b/ext/standard/css.c @@ -35,7 +35,7 @@ PHPAPI ZEND_COLD void php_info_print_css(void) /* {{{ */ PUTS(".e {background-color: #ccf; width: 300px; font-weight: bold;}\n"); PUTS(".h {background-color: #99c; font-weight: bold;}\n"); PUTS(".v {background-color: #ddd; max-width: 300px; overflow-x: auto; word-wrap: break-word;}\n"); - PUTS(".v i {color: #999;}\n"); + PUTS(".v i {color: #454545;}\n"); PUTS("img {float: right; border: 0;}\n"); PUTS("hr {width: 934px; background-color: #ccc; border: 0; height: 1px;}\n"); PUTS(":root {--php-dark-grey: #333; --php-dark-blue: #4F5B93; --php-medium-blue: #8892BF; --php-light-blue: #E2E4EF; --php-accent-purple: #793862}"); @@ -47,6 +47,7 @@ PHPAPI ZEND_COLD void php_info_print_css(void) /* {{{ */ " .e {background-color: #404A77}\n" " .h {background-color: var(--php-dark-blue)}\n" " .v {background-color: var(--php-dark-grey)}\n" + " .v i {color: #c4c4c4;}\n" " hr {background-color: #505153}\n" "}\n" );