diff mbox series

css: make diff colors more accessible

Message ID 20221005142405.20896-1-robin@jarry.cc
State New
Headers show
Series css: make diff colors more accessible | expand

Commit Message

Robin Jarry Oct. 5, 2022, 2:24 p.m. UTC 
The colors used to display patch diffs are confusing. The context color
is very similar to the added line color and the contrast between added
and removed lines is very low.

Originally, the choice of purple/blue (instead of the more common
red/green palette) may have been made with colorblindness accessibility
in mind. However, after inspecting the current colors with
colorblindness "simulators", I found that the low contrast was
consistent no matter what vision deficiency (if any) you might have.

Update the colors to use a more common red/green palette. Add background
colors to increase contrast for colorblind people. Use less confusing
colors for context and diff hunks. Use normal line height to prevent
background colors from overlapping. Use a different color for email
quotes (blue) to avoid confusion with added lines.

I have made a compilation of the current and updated color palette
previews for normal vision and all common color deficiencies. I also
included the same diff as seen from Github interface for reference.

Link: http://files.diabeteman.com/patchwork-diff-colors/
Signed-off-by: Robin Jarry <robin@jarry.cc>
---
 htdocs/css/style.css                             | 16 ++++++++--------
 ...-colors-more-accessible-82eda58a89984d46.yaml |  5 +++++
 2 files changed, 13 insertions(+), 8 deletions(-)
 create mode 100644 releasenotes/notes/make-diff-colors-more-accessible-82eda58a89984d46.yaml
diff mbox series

Patch

diff --git a/htdocs/css/style.css b/htdocs/css/style.css
index 9156aa6ee073..1a739510924c 100644
--- a/htdocs/css/style.css
+++ b/htdocs/css/style.css
@@ -17,7 +17,7 @@  h2 a, h2 span {
 }
 
 pre {
-    line-height: 110%;
+    line-height: normal;
     background-color: white;
     border-radius: 0;
 }
@@ -354,15 +354,15 @@  button[class^=comment-action] {
 }
 
 .quote {
-    color: #007f00;
+    color: #365cb5;
 }
 
-span.p_header    { color: #2e8b57; font-weight: bold; }
-span.p_chunk    { color: #a52a2a; font-weight: bold; }
-span.p_context    { color: #a020f0; }
-span.p_add    { color: #008b8b; }
-span.p_del    { color: #6a5acd; }
-span.p_mod    { color: #0000ff; }
+span.p_header    { font-weight: bold; }
+span.p_chunk    { color: #329fb0; font-weight: bold; }
+span.p_context    { }
+span.p_add    { color: #1b9d09; background-color: #edffed; }
+span.p_del    { color: #c80101; background-color: #ffe2e2; }
+span.p_mod    { color: #a020f0; }
 
 .acked-by {
     color: #2d4566;
diff --git a/releasenotes/notes/make-diff-colors-more-accessible-82eda58a89984d46.yaml b/releasenotes/notes/make-diff-colors-more-accessible-82eda58a89984d46.yaml
new file mode 100644
index 000000000000..f65995e51d9a
--- /dev/null
+++ b/releasenotes/notes/make-diff-colors-more-accessible-82eda58a89984d46.yaml
@@ -0,0 +1,5 @@ 
+---
+other:
+  - |
+    The patch diff color palette was modified to make it more accessible for
+    all users, including those with common color deficiencies.