bug #59334 [ErrorHandler] [A11y] Simple proposal for color updates on error stack traces against colorblindness (DocFX)

fabpot · fabpot · commit 006bbba22168 · 2025-01-01T09:58:26.000+01:00
This PR was submitted for the 7.3 branch but it was merged into the 6.4 branch instead. Discussion ---------- [ErrorHandler] [A11y] Simple proposal for color updates on error stack traces against colorblindness | Q | A | ------------- | --- | Branch? | 7.3 | Bug fix? | no | New feature? | no | Deprecations? | no | Issues | N/A | License | MIT Hi! I'm colorblind, slightly. I know it can be a real headache to try colors that can match all colorblindnesses, it's a nightmare, as a lot of them are opposed and as some fixes can actually make things worse for other people. I just open this with a very small changeset in colors for stack traces. The rest of the debug pages seem OK to me (profiler, tables, etc.). But currently I'm really struggling to read the highlighted lines and the dark red PHP syntax highlighting for native identifiers. I only changed those colors, trying to make it better. Feel free to discuss better proposals, like using the WebAIM WCAG 2.0 checker ([https://webaim.org/resources/contrastchecker/](https://webaim.org/resources/contrastchecker/)). Background to red text: https://webaim.org/resources/contrastchecker/?fcolor=FF7B72&bcolor=2E3136 Highlight to PHP identifiers will fail, but it's almost impossible without changing all colors. 1.94/1 is still acceptable as most characters are non-word: https://webaim.org/resources/contrastchecker/?fcolor=71663ACC&bcolor=FF7B72 If anyone thinks we can come up with better proposals, there you go! At least this fixes it for me and non-colorblind people around me seem to find it still readable, if not better, too. :) Commits ------- d01b302 Update exception.css
diff --git a/src/Symfony/Component/ErrorHandler/Resources/assets/css/exception.css b/src/Symfony/Component/ErrorHandler/Resources/assets/css/exception.css
@@ -57,7 +57,7 @@
     --page-background: #36393e;
     --color-text: #e0e0e0;
     --color-muted: #777;
-    --color-error: #d43934;
+    --color-error: #f76864;
     --tab-background: #404040;
     --tab-border-color: #737373;
     --tab-active-border-color: #171717;
@@ -80,7 +80,7 @@
     --metric-unit-color: #999;
     --metric-label-background: #777;
     --metric-label-color: #e0e0e0;
-    --trace-selected-background: #71663acc;
+    --trace-selected-background: #5d5227cc;
     --table-border: #444;
     --table-background: #333;
     --table-header: #555;
@@ -92,7 +92,7 @@
     --background-error: #b0413e;
     --highlight-comment: #dedede;
     --highlight-default: var(--base-6);
-    --highlight-keyword: #ff413c;
+    --highlight-keyword: #de8986;
     --highlight-string: #70a6fd;
     --base-0: #2e3136;
     --base-1: #444;
