From 9ae42717240082ae3351fb655a4c881fdc5ba183 Mon Sep 17 00:00:00 2001
From: elioat <elioat@tilde.institute>
Date: Tue, 11 Feb 2025 07:10:25 -0500
Subject: *

---
 html/ccc/index.html | 73 +++++++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 60 insertions(+), 13 deletions(-)

(limited to 'html')

diff --git a/html/ccc/index.html b/html/ccc/index.html
index 5637101..9f2e4c6 100644
--- a/html/ccc/index.html
+++ b/html/ccc/index.html
@@ -6,7 +6,7 @@
     <title>Color Contrast Checker</title>
     <meta name="description" content="Give it a list of colors, find accessible combinations.">
     <style>
-        body { font-family: Arial, sans-serif; padding: 20px; }
+        body { font-family: Arial, sans-serif; padding: 20px; size: 16px;}
         .color-input { margin-bottom: 10px; width: 100%; height: 100px; font-size: 16px; /* Prevent iOS zoom */ }
         .color-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
         .color-box { padding: 10px; text-align: center; border: 1px solid #ccc; }
@@ -87,8 +87,9 @@
     </header>
     <main>
         <form id="colorForm" onsubmit="event.preventDefault(); updateColors();">
-            <label for="colors">Enter colors as hex, rgb, or rgba values as either a comma separated list or a newline separated list:</label>
+            <label for="colors">Colors you want to check for contrast:</label>
             <textarea id="colors" class="color-input" required placeholder="Feel free to mix and match hex, rgb, and rgba values!"></textarea>
+            <p style="margin-top: 0;">You can enter colors as either a comma separated list or a newline separated list. Colors can be in hex (#RGB or #RRGGBB), rgb(r,g,b), or rgba(r,g,b,a) format. You. can mix and match color formats, too.</p>
             <div class="form-controls">
                 <button type="submit">Check Contrast</button>
                 <div class="checkbox-controls">
@@ -103,7 +104,7 @@
         <section id="results" class="color-grid" aria-live="polite"></section>
     </main>
     <footer>
-        <p>Color Contrast Checker - A tool to help you find accessible color combinations.</p>
+        <p>Color Contrast Checker &mdash; A tool to help you find accessible color combinations.</p>
         <p>This tool can only determine if two color combinations have a mathmatically correct contrast ratio. Digital accessiblity isn't just about math, though, so use this as a starting place, not as the final word on if a color combination is accessible.</p>
     </footer>
     
@@ -218,41 +219,76 @@
 
         // ===== Contrast Calculation and WCAG Compliance =====
         function getContrastRatio(color1, color2) {
+            // Calculate relative luminance using WCAG formula
+            // L = 0.2126 * R + 0.7152 * G + 0.0722 * B
+            // where R, G, and B are the red, green, and blue values of the color
+            // the formula normalizes the RGB values to a 0-1 range
+            // and then applies coefficients to represent human perception of color
+            // Returns a value between 0 and 1, where 0 is darkest and 1 is brightest
             function luminance(r, g, b) {
-                let a = [r, g, b].map(v => {
+                // Convert RGB values to sRGB colorspace values
+                let channels = [r, g, b].map(v => {
+                    // Step 1: Normalize RGB values to 0-1 range
                     v /= 255;
-                    return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
+                    
+                    // Step 2: Convert to sRGB using WCAG formula
+                    // If value is small (≤ 0.03928), use simple linear calculation
+                    // Otherwise, use the more complex power formula
+                    return v <= 0.03928 
+                        ? v / 12.92 
+                        : Math.pow((v + 0.055) / 1.055, 2.4);
                 });
-                return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
+                
+                // Step 3: Apply luminance coefficients
+                // These coefficients represent human perception of color
+                // Red contributes 21.26%, Green 71.52%, and Blue 7.22% to perceived brightness
+                return channels[0] * 0.2126  // Red coefficient
+                     + channels[1] * 0.7152  // Green coefficient
+                     + channels[2] * 0.0722; // Blue coefficient
             }
 
-            // Parse colors and handle alpha compositing with white background
+            // Handle colors with transparency by compositing them with white background
             const parseAndComposite = (color) => {
                 const parsed = parseColor(color);
+                // If color is fully opaque, return as is
                 if (parsed.a === 1) return parsed;
                 
-                // Composite with white background
+                // For semi-transparent colors, composite with white background
+                // Using alpha compositing formula: result = (foreground × alpha) + (background × (1 - alpha))
                 const alpha = parsed.a;
                 return {
-                    r: (parsed.r * alpha) + (255 * (1 - alpha)),
-                    g: (parsed.g * alpha) + (255 * (1 - alpha)),
-                    b: (parsed.b * alpha) + (255 * (1 - alpha)),
-                    a: 1
+                    r: (parsed.r * alpha) + (255 * (1 - alpha)), // Blend red channel
+                    g: (parsed.g * alpha) + (255 * (1 - alpha)), // Blend green channel
+                    b: (parsed.b * alpha) + (255 * (1 - alpha)), // Blend blue channel
+                    a: 1 // Result is fully opaque
                 };
             };
 
+            // Process both colors, handling any transparency
             const rgb1 = parseAndComposite(color1);
             const rgb2 = parseAndComposite(color2);
             
+            // Calculate luminance for both colors
             const lum1 = luminance(rgb1.r, rgb1.g, rgb1.b);
             const lum2 = luminance(rgb2.r, rgb2.g, rgb2.b);
             
-            return (Math.max(lum1, lum2) + 0.05) / (Math.min(lum1, lum2) + 0.05);
+            // Calculate contrast ratio using WCAG formula:
+            // (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance
+            // The 0.05 constant prevents division by zero and handles very dark colors
+            const lighter = Math.max(lum1, lum2);
+            const darker = Math.min(lum1, lum2);
+            return (lighter + 0.05) / (darker + 0.05);
         }
 
+
+        // This is an incomplete check since it is only dealing with color, and doesn't consider font sizing
+        // https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast
         function getWCAGLevel(contrast) {
+            // Level AAA: Contrast ratio of at least 7:1
             if (contrast >= 7) return "AAA";
+            // Level AA: Contrast ratio of at least 4.5:1
             if (contrast >= 4.5) return "AA";
+            // Failing: Contrast ratio below 4.5:1
             return "Fail";
         }
 
@@ -370,6 +406,17 @@
             });
         }
 
+
+
+
+
+
+
+
+
+
+
+        
         // ===== Testing Functions =====
         function runContrastTests() {
             const testCases = [
-- 
cgit 1.4.1-2-gfad0