[PATCH] css: make diff colors more accessible

[Stephen Finucane]

On Wed, 2022-10-05 at 16:24 +0200, Robin Jarry wrote:
> 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 at jarry.cc>

I've no idea how I missed this. Thanks for the ping, Thomas. This is great (and
very through: I appreciate the screenshots).

I've added a release note and merged to main and stable/3.2. It will be included
in Patchwork v3.2.2 as v3.2.1 just went out.

Stephen

> ---
>  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 --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.