Merge pull request #22 from studio-YOLO/21-higher-contrast

Implemented test and demo script for higher contrast function

demo/scripts/higher_color_contrast_demo.js

@@ -0,0 +1,23 @@
+import EditPix from "../../src/editpix.js";
+
+const editpix = new EditPix();
+
+//color
+const hexColor = "#78828c";
+
+//convert color from hex to rgb
+const rgbColor = editpix.convertToRgb(hexColor);
+
+//get the higher contrast color
+const higherColorContrastRgb = editpix.getHigherContrast(rgbColor);
+
+//convert higher contrast color from rgb to hex
+const higherColorContrastHex = editpix.convertToHex(higherColorContrastRgb);
+
+
+//display results
+document.body.style.backgroundColor = hexColor;
+const contrastText = document.createElement("h1");
+contrastText.textContent = "Hello World!"
+contrastText.style.color = higherColorContrastHex;
+document.body.appendChild(contrastText)

src/core/higher_contrast.js

@@ -1,21 +1,13 @@
 /**
  * Function that given a color in the format [R,G,B] converts it to grayscale in the format [R,G,B]
- * and then calculates the color with the highest contrast.
+ * and then calculates the color (black or white) with the highest contrast.
  * @param {number[]} color Color that has to be converted and compared in the format [R,G,B]
  * @returns {number[]} Color with the higher contrast of the input color in the format [R,G,B]
  */
 function higherColorContrast(color) {
-    // Convert the color to grayscale
-    const grayscale = [
-        Math.round(0.299 * color[0] + 0.587 * color[1] + 0.114 * color[2]),
-        Math.round(0.299 * color[0] + 0.587 * color[1] + 0.114 * color[2]),
-        Math.round(0.299 * color[0] + 0.587 * color[1] + 0.114 * color[2])
-    ];
-
-    // Calculate the color with the highest contrast
-    const contrastColor = grayscale.map(channel => channel > 128 ? 0 : 255);
-
-    return contrastColor;
+    const gray = Math.round(0.299 * color[0] + 0.587 * color[1] + 0.114 * color[2])
+    const contrastColor = gray >= 128 ? 0 : 255;
+    return [contrastColor, contrastColor, contrastColor];
 }
 
 export default higherColorContrast;

src/utils.js

@@ -89,9 +89,9 @@ function rgbToHsl(r, g, b) {
     }
 
     return [
-        h * 360,
-        s * 100,
-        l * 100
+        Math.round(h * 360),
+        Math.round(s * 100),
+        Math.round(l * 100)
     ];
 }
 

test/core.test.js

@@ -4,6 +4,7 @@ import optimizeContrast from "../src/core/optimize_contrast.js";
 import changeContrast from "../src/core/change_contrast.js";
 import changeTemperature from "../src/core/change_temperature.js";
 import changeOpacity from "../src/core/change_opacity.js";
+import higherColorContrast from "../src/core/higher_contrast.js";
 
 describe('convertToBW function', () => {
     test('converts pixel array to black and white correctly', () => {
@@ -131,4 +132,33 @@ describe('changeOpacity function', () => {
         // Check that the array has correctly changed opacity
         expect(modifiedArray).toEqual(expectedArray);
     });
+});
+
+describe('higherColorContrast', () => {
+    test('should return color with higher contrast for dark input color', () => {
+        const darkColor = [10, 20, 30];
+        const expectedResult = [255, 255, 255]; // Expected result for dark color
+
+        const result = higherColorContrast(darkColor);
+
+        expect(result).toEqual(expectedResult);
+    });
+
+    test('should return color with higher contrast for light input color', () => {
+        const lightColor = [200, 210, 220];
+        const expectedResult = [0, 0, 0]; // Expected result for light color
+
+        const result = higherColorContrast(lightColor);
+
+        expect(result).toEqual(expectedResult);
+    });
+
+    test('should return color with higher contrast for medium input color', () => {
+        const mediumColor = [120, 130, 140];
+        const expectedResult = [0, 0, 0]; // Expected result for medium color
+
+        const result = higherColorContrast(mediumColor);
+
+        expect(result).toEqual(expectedResult);
+    });
 });