Increase the color contrast of the iconography on the status report page

Yellow is just such a difficult color for contrast. Orange is easier.

The current color can be described by:

hsl(46, 67%, 52%)
rgb(216, 178, 52)
#D8B234

I'm no color expert but changing it to this

hsl(41, 95%, 31%)
rgb(157, 110, 4)
#9D6E04

Would meet color contrast accordign to Tanaguru.com's Contrast Finder.

Tests are failing because the change was made in the dist/css directory, which contains files that get generated by a preprocessor. Changes need to be made in the styles directory and then npm build needs to be called which updates the distribution files.

Also, color codes are using lower case characters.

Ok.. I don't know what to do from here though https://git.drupalcode.org/project/gin/-/merge_requests/635/diffs

What's required is to run npm build locally in your dev environment. That will compile the changes into the distribution files and the result should then also be committed to the MR.

Sadly, I need more information. This is a 3 line change (one little search/replace). npm build locally doesn't work for me Unknown command: "build".

It is a pretty trivial patch, but I still don't know how to contribute it.

diff --git a/styles/theme/variables.scss b/styles/theme/variables.scss
index 8e37e68b..ede2f940 100644
--- a/styles/theme/variables.scss
+++ b/styles/theme/variables.scss
@@ -12,7 +12,7 @@
   --gin-color-disabled-bg: #eaeaea;
   --gin-color-disabled-border: #c2c2c2;
 
-  --gin-color-warning: #d8b234;
+  --gin-color-warning: #9d6e04;
   --gin-color-warning-light: #efcf64;
   --gin-bg-warning: #{mix(black, #efcf64, 70%)};
   --gin-bg-warning-light: rgba(226, 151, 0, .08);
@@ -35,7 +35,7 @@
   --gin-status-bg: #eee;
   --gin-status-success-text: #1d6844;
   --gin-status-success-bg: #26a76930;
-  --gin-status-warning-text: #{mix(black, #d8b234, 40%)};
+  --gin-status-warning-text: #{mix(black, #9d6e04, 40%)};
   --gin-status-warning-bg: rgba(226, 151, 0, .15);
   --gin-status-danger-text: #cc3d3d;
   --gin-status-danger-bg: rgba(222, 117, 96, .15);
@@ -292,7 +292,7 @@
   --gin-status-bg: rgba(255, 255, 255, 0.12);
   --gin-status-success-text: #8bd3b1;
   --gin-status-success-bg: #26a76940;
-  --gin-status-warning-text: #{mix(white, #d8b234, 40%)};
+  --gin-status-warning-text: #{mix(white, #9d6e04, 40%)};
   --gin-status-warning-bg: rgba(226, 151, 0, .15);
   --gin-status-danger-text: #{mix(white, #cc3d3d, 50%)};
   --gin-status-danger-bg: rgba(222, 117, 96, .15);

This is looking good now, setting to "Needs review" so that people can test and review this.

@mgifford just FYI, the npm build command needs to be run in the Gin directory. But @siddharthjain has now done it for us, thank you.

Thanks @siddharthjain_7998 & @jurgenhaas

I'll try to figure this out in the future.

I checked the contrast of this icon.

The changes were well and the colour contrast now meets WCAG SC1.4.11.

See these screenshots:

Before:

After:

added the before and after screenshots provided in #12 🐛 Increase the color contrast of the iconography on the status report page Active to the user interface section in the issue summary.

and one question if i take a look at https://git.drupalcode.org/project/gin/-/merge_requests/635/diffs?commit... the changes are only about altering the hex values while looking at the diff there are more: changes? https://git.drupalcode.org/project/gin/-/merge_requests/635.diff . shouldnt those two have the same set of changes?