[PATCH] css: make diff colors more accessible

Thomas Monjalon thomas at monjalon.net
Thu Oct 24 06:24:01 AEDT 2024


05/10/2022 16:24, Robin Jarry:
> 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>
> ---
>  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; }

On dpdk.org, we are using this CSS and we are satisfied.
The only difference is that we kept the green for .quote
and reduced it to 85%.

I hope this patch will be merged, thanks.




More information about the Patchwork mailing list