[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