Skip to content

Commit c443cd9

Browse files
rjarrystephenfin
authored andcommitted
css: make diff colors more accessible
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 <[email protected]>
1 parent fa14cf8 commit c443cd9

File tree

2 files changed

+13
-8
lines changed

2 files changed

+13
-8
lines changed

htdocs/css/style.css

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ h2 a, h2 span {
1717
}
1818

1919
pre {
20-
line-height: 110%;
20+
line-height: normal;
2121
background-color: white;
2222
border-radius: 0;
2323
}
@@ -354,15 +354,15 @@ button[class^=comment-action] {
354354
}
355355

356356
.quote {
357-
color: #007f00;
357+
color: #365cb5;
358358
}
359359

360-
span.p_header { color: #2e8b57; font-weight: bold; }
361-
span.p_chunk { color: #a52a2a; font-weight: bold; }
362-
span.p_context { color: #a020f0; }
363-
span.p_add { color: #008b8b; }
364-
span.p_del { color: #6a5acd; }
365-
span.p_mod { color: #0000ff; }
360+
span.p_header { font-weight: bold; }
361+
span.p_chunk { color: #329fb0; font-weight: bold; }
362+
span.p_context { }
363+
span.p_add { color: #1b9d09; background-color: #edffed; }
364+
span.p_del { color: #c80101; background-color: #ffe2e2; }
365+
span.p_mod { color: #a020f0; }
366366

367367
.acked-by {
368368
color: #2d4566;
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
other:
3+
- |
4+
The patch diff color palette was modified to make it more accessible for
5+
all users, including those with common color deficiencies.

0 commit comments

Comments
 (0)