@afixt/test-utils 1.1.7 → 1.2.0

package/test/testContrast.test.js

@@ -1,682 +1,832 @@
 import { describe, it, expect, beforeEach } from 'vitest';
-import { testContrast, getComputedBackgroundColor, luminance, parseRGB, getColorContrast } from '../src/testContrast';
+import {
+    testContrast,
+    getComputedBackgroundColor,
+    luminance,
+    parseRGB,
+    getColorContrast,
+    parseColor,
+    getRelativeLuminance,
+    getContrastRatio,
+} from '../src/testContrast';
 
 describe('testContrast', () => {
-  beforeEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  it('should return false for null element', () => {
-    expect(testContrast(null)).toBe(false);
-  });
-
-  it('should return true for elements with no direct text', () => {
-    const div = document.createElement('div');
-    div.innerHTML = '<span>Text in child</span>';
-    document.body.appendChild(div);
-    
-    expect(testContrast(div)).toBe(true);
-  });
-
-  it('should handle identical colors (JSDOM test case)', () => {
-    const div = document.createElement('div');
-    div.textContent = 'Test text';
-    div.style.color = 'rgb(0, 0, 0)';
-    div.style.backgroundColor = 'rgb(0, 0, 0)';
-    document.body.appendChild(div);
-    
-    // In JSDOM, this may return true due to computed style limitations
-    // The function is designed to handle this specific test case
-    const result = testContrast(div);
-    expect(typeof result).toBe('boolean');
-  });
-
-  it('should return true for elements with sufficient contrast (AA)', () => {
-    const div = document.createElement('div');
-    div.textContent = 'High contrast text';
-    div.style.color = 'rgb(0, 0, 0)'; // Black text
-    div.style.backgroundColor = 'rgb(255, 255, 255)'; // White background
-    document.body.appendChild(div);
-    
-    expect(testContrast(div, { level: 'AA' })).toBe(true);
-  });
-
-  it('should handle AAA level requirements', () => {
-    const div = document.createElement('div');
-    div.textContent = 'AAA level text';
-    div.style.color = 'rgb(0, 0, 0)';
-    div.style.backgroundColor = 'rgb(255, 255, 255)';
-    document.body.appendChild(div);
-    
-    expect(testContrast(div, { level: 'AAA' })).toBe(true);
-  });
-
-  it('should handle large text differently', () => {
-    const div = document.createElement('div');
-    div.textContent = 'Large text has different requirements';
-    div.style.color = 'rgb(90, 90, 90)';
-    div.style.backgroundColor = 'rgb(255, 255, 255)';
-    div.style.fontSize = '18px';
-    document.body.appendChild(div);
-    
-    // Large text only needs 3:1 for AA
-    expect(testContrast(div, { level: 'AA' })).toBe(true);
-  });
-
-  it('should handle bold text differently', () => {
-    const div = document.createElement('div');
-    div.textContent = 'Bold text at 14px';
-    div.style.color = 'rgb(100, 100, 100)';
-    div.style.backgroundColor = 'rgb(255, 255, 255)';
-    div.style.fontSize = '14px';
-    div.style.fontWeight = 'bold';
-    document.body.appendChild(div);
-    
-    // Bold text at 14px is treated as large text (3:1 for AA)
-    expect(testContrast(div, { level: 'AA' })).toBe(true);
-  });
-
-  it('should handle default options when none provided', () => {
-    const div = document.createElement('div');
-    div.textContent = 'Default options text';
-    div.style.color = 'rgb(0, 0, 0)';
-    div.style.backgroundColor = 'rgb(255, 255, 255)';
-    document.body.appendChild(div);
-    
-    expect(testContrast(div)).toBe(true);
-  });
-
-  it('should handle elements with background images', () => {
-    const div = document.createElement('div');
-    div.textContent = 'Text with background image';
-    div.style.color = 'rgb(0, 0, 0)';
-    div.style.backgroundImage = 'url(image.jpg)';
-    document.body.appendChild(div);
-    
-    // Should return true because background color can't be determined
-    expect(testContrast(div)).toBe(true);
-  });
-
-  it('should handle invisible elements', () => {
-    const div = document.createElement('div');
-    div.textContent = 'Hidden text';
-    div.style.display = 'none';
-    document.body.appendChild(div);
-    
-    expect(testContrast(div)).toBe(true);
-  });
-
-  it('should handle offscreen elements', () => {
-    const div = document.createElement('div');
-    div.textContent = 'Offscreen text';
-    div.style.position = 'absolute';
-    div.style.left = '-9999px';
-    document.body.appendChild(div);
-    
-    expect(testContrast(div)).toBe(true);
-  });
-
-  it('should handle AA level for medium text (14-17px)', () => {
-    const div = document.createElement('div');
-    div.textContent = 'Medium text';
-    div.style.color = 'rgb(100, 100, 100)';
-    div.style.backgroundColor = 'rgb(255, 255, 255)';
-    div.style.fontSize = '16px';
-    document.body.appendChild(div);
-    
-    expect(testContrast(div, { level: 'AA' })).toBe(true);
-  });
-
-  it('should handle AAA level for large text', () => {
-    const div = document.createElement('div');
-    div.textContent = 'Large text AAA';
-    div.style.color = 'rgb(80, 80, 80)';
-    div.style.backgroundColor = 'rgb(255, 255, 255)';
-    div.style.fontSize = '20px';
-    document.body.appendChild(div);
-    
-    expect(testContrast(div, { level: 'AAA' })).toBe(true);
-  });
-
-  it('should handle bold text at 14px for AAA', () => {
-    const div = document.createElement('div');
-    div.textContent = 'Bold 14px AAA';
-    div.style.color = 'rgb(60, 60, 60)';
-    div.style.backgroundColor = 'rgb(255, 255, 255)';
-    div.style.fontSize = '14px';
-    div.style.fontWeight = 'bold';
-    document.body.appendChild(div);
-    
-    expect(testContrast(div, { level: 'AAA' })).toBe(true);
-  });
-
-  it('should handle numeric font weight', () => {
-    const div = document.createElement('div');
-    div.textContent = 'Numeric weight';
-    div.style.color = 'rgb(80, 80, 80)';
-    div.style.backgroundColor = 'rgb(255, 255, 255)';
-    div.style.fontSize = '14px';
-    div.style.fontWeight = '700';
-    document.body.appendChild(div);
-    
-    expect(testContrast(div, { level: 'AA' })).toBe(true);
-  });
-
-  it('should handle transparent background with parent', () => {
-    const parent = document.createElement('div');
-    parent.style.backgroundColor = 'rgb(255, 255, 255)';
-    
-    const child = document.createElement('div');
-    child.textContent = 'Child with transparent bg';
-    child.style.color = 'rgb(0, 0, 0)';
-    child.style.backgroundColor = 'rgba(0, 0, 0, 0)';
-    
-    parent.appendChild(child);
-    document.body.appendChild(parent);
-    
-    expect(testContrast(child)).toBe(true);
-  });
-
-  it('should handle elements without computed styles properly', () => {
-    const div = document.createElement('div');
-    div.textContent = 'Test without style';
-    
-    // Just test that the function handles elements without explicit styles
-    expect(() => testContrast(div)).not.toThrow();
-    expect(typeof testContrast(div)).toBe('boolean');
-  });
-
-  it('should handle small text requiring 4.5:1 ratio', () => {
-    const div = document.createElement('div');
-    div.textContent = 'Small text';
-    div.style.color = 'rgb(0, 0, 0)';
-    div.style.backgroundColor = 'rgb(255, 255, 255)';
-    div.style.fontSize = '12px';
-    document.body.appendChild(div);
-    
-    expect(testContrast(div, { level: 'AA' })).toBe(true);
-  });
-
-  it('should handle element with parent having different colors', () => {
-    const parent = document.createElement('div');
-    parent.style.color = 'rgb(255, 0, 0)'; // Different color
-    parent.style.backgroundColor = 'rgb(0, 0, 255)'; // Different background
-    
-    const child = document.createElement('div');
-    child.textContent = 'Child with different colors';
-    child.style.color = 'rgb(0, 0, 0)';
-    child.style.backgroundColor = 'rgb(255, 255, 255)';
-    
-    parent.appendChild(child);
-    document.body.appendChild(parent);
-    
-    expect(testContrast(child)).toBe(true);
-  });
-
-  it('should handle element with parent having same colors', () => {
-    const parent = document.createElement('div');
-    parent.style.color = 'rgb(0, 0, 0)'; // Same color
-    parent.style.backgroundColor = 'rgb(255, 255, 255)'; // Same background
-    parent.style.fontSize = '16px'; // Same size
-    parent.style.fontWeight = 'normal'; // Same weight
-    
-    const child = document.createElement('div');
-    child.textContent = 'Child with same colors';
-    child.style.color = 'rgb(0, 0, 0)';
-    child.style.backgroundColor = 'rgb(255, 255, 255)';
-    child.style.fontSize = '16px';
-    child.style.fontWeight = 'normal';
-    
-    parent.appendChild(child);
-    document.body.appendChild(parent);
-    
-    expect(testContrast(child)).toBe(true);
-  });
-
-  it('should handle element without parent', () => {
-    const div = document.createElement('div');
-    div.textContent = 'No parent element';
-    div.style.color = 'rgb(0, 0, 0)';
-    div.style.backgroundColor = 'rgb(255, 255, 255)';
-
-    // Don't append to body to test no parent scenario
-    expect(testContrast(div)).toBe(true);
-  });
-
-  it('should handle element with parent having different font size', () => {
-    const parent = document.createElement('div');
-    parent.style.color = 'rgb(0, 0, 0)';
-    parent.style.backgroundColor = 'rgb(255, 255, 255)';
-    parent.style.fontSize = '16px';
-
-    const child = document.createElement('div');
-    child.textContent = 'Different font size';
-    child.style.color = 'rgb(0, 0, 0)';
-    child.style.backgroundColor = 'rgb(255, 255, 255)';
-    child.style.fontSize = '20px'; // Different size
-
-    parent.appendChild(child);
-    document.body.appendChild(parent);
-
-    expect(testContrast(child)).toBe(true);
-  });
-
-  it('should handle element with parent having different font weight', () => {
-    const parent = document.createElement('div');
-    parent.style.color = 'rgb(0, 0, 0)';
-    parent.style.backgroundColor = 'rgb(255, 255, 255)';
-    parent.style.fontWeight = 'normal';
-
-    const child = document.createElement('div');
-    child.textContent = 'Different font weight';
-    child.style.color = 'rgb(0, 0, 0)';
-    child.style.backgroundColor = 'rgb(255, 255, 255)';
-    child.style.fontWeight = 'bold'; // Different weight
-
-    parent.appendChild(child);
-    document.body.appendChild(parent);
-
-    expect(testContrast(child)).toBe(true);
-  });
-
-  it('should return false when contrast is insufficient for AA level', () => {
-    const div = document.createElement('div');
-    div.textContent = 'Low contrast text';
-    div.style.color = 'rgb(200, 200, 200)'; // Light gray
-    div.style.backgroundColor = 'rgb(255, 255, 255)'; // White
-    div.style.fontSize = '12px';
-    document.body.appendChild(div);
-
-    // This should fail AA contrast requirements (4.5:1 for small text)
-    const result = testContrast(div, { level: 'AA' });
-    expect(typeof result).toBe('boolean');
-  });
-
-  it('should return false when contrast is insufficient for AAA level', () => {
-    const div = document.createElement('div');
-    div.textContent = 'Low contrast AAA';
-    div.style.color = 'rgb(150, 150, 150)'; // Medium gray
-    div.style.backgroundColor = 'rgb(255, 255, 255)'; // White
-    div.style.fontSize = '12px';
-    document.body.appendChild(div);
-
-    // This should fail AAA contrast requirements (7:1 for small text)
-    const result = testContrast(div, { level: 'AAA' });
-    expect(typeof result).toBe('boolean');
-  });
-
-  it('should handle AAA level for normal text under 18px', () => {
-    const div = document.createElement('div');
-    div.textContent = 'AAA small text';
-    div.style.color = 'rgb(0, 0, 0)';
-    div.style.backgroundColor = 'rgb(255, 255, 255)';
-    div.style.fontSize = '12px';
-    document.body.appendChild(div);
-
-    expect(testContrast(div, { level: 'AAA' })).toBe(true);
-  });
-
-  it('should handle AAA level for bold text between 14-18px', () => {
-    const div = document.createElement('div');
-    div.textContent = 'AAA bold medium text';
-    div.style.color = 'rgb(80, 80, 80)';
-    div.style.backgroundColor = 'rgb(255, 255, 255)';
-    div.style.fontSize = '16px';
-    div.style.fontWeight = 'bold';
-    document.body.appendChild(div);
-
-    expect(testContrast(div, { level: 'AAA' })).toBe(true);
-  });
-
-  it('should handle AAA level for normal text between 14-18px', () => {
-    const div = document.createElement('div');
-    div.textContent = 'AAA normal medium text';
-    div.style.color = 'rgb(0, 0, 0)';
-    div.style.backgroundColor = 'rgb(255, 255, 255)';
-    div.style.fontSize = '16px';
-    div.style.fontWeight = 'normal';
-    document.body.appendChild(div);
-
-    expect(testContrast(div, { level: 'AAA' })).toBe(true);
-  });
-
-  it('should handle foreground darker than background', () => {
-    const div = document.createElement('div');
-    div.textContent = 'Dark on light';
-    div.style.color = 'rgb(50, 50, 50)'; // Dark foreground
-    div.style.backgroundColor = 'rgb(200, 200, 200)'; // Light background
-    document.body.appendChild(div);
-
-    expect(testContrast(div)).toBe(true);
-  });
-
-  it('should handle background darker than foreground', () => {
-    const div = document.createElement('div');
-    div.textContent = 'Light on dark';
-    div.style.color = 'rgb(200, 200, 200)'; // Light foreground
-    div.style.backgroundColor = 'rgb(50, 50, 50)'; // Dark background
-    document.body.appendChild(div);
-
-    expect(testContrast(div)).toBe(true);
-  });
-
-  it('should handle element with nested transparent backgrounds', () => {
-    const grandparent = document.createElement('div');
-    grandparent.style.backgroundColor = 'rgb(255, 255, 255)';
-
-    const parent = document.createElement('div');
-    parent.style.backgroundColor = 'rgba(0, 0, 0, 0)';
-
-    const child = document.createElement('div');
-    child.textContent = 'Nested transparent';
-    child.style.color = 'rgb(0, 0, 0)';
-    child.style.backgroundColor = 'rgba(0, 0, 0, 0)';
-
-    grandparent.appendChild(parent);
-    parent.appendChild(child);
-    document.body.appendChild(grandparent);
-
-    expect(testContrast(child)).toBe(true);
-  });
+    beforeEach(() => {
+        document.body.innerHTML = '';
+    });
+
+    it('should return false for null element', () => {
+        expect(testContrast(null)).toBe(false);
+    });
+
+    it('should return true for elements with no direct text', () => {
+        const div = document.createElement('div');
+        div.innerHTML = '<span>Text in child</span>';
+        document.body.appendChild(div);
+
+        expect(testContrast(div)).toBe(true);
+    });
+
+    it('should return false for elements with identical foreground and background colors', () => {
+        const div = document.createElement('div');
+        div.textContent = 'Invisible text due to same colors';
+        div.style.color = 'rgb(0, 0, 0)';
+        div.style.backgroundColor = 'rgb(0, 0, 0)';
+        document.body.appendChild(div);
+
+        // Identical colors yield 0 contrast ratio, which fails any threshold
+        const result = testContrast(div);
+        expect(typeof result).toBe('boolean');
+    });
+
+    it('should return true for elements with sufficient contrast (AA)', () => {
+        const div = document.createElement('div');
+        div.textContent = 'High contrast text';
+        div.style.color = 'rgb(0, 0, 0)'; // Black text
+        div.style.backgroundColor = 'rgb(255, 255, 255)'; // White background
+        document.body.appendChild(div);
+
+        expect(testContrast(div, { level: 'AA' })).toBe(true);
+    });
+
+    it('should handle AAA level requirements', () => {
+        const div = document.createElement('div');
+        div.textContent = 'AAA level text';
+        div.style.color = 'rgb(0, 0, 0)';
+        div.style.backgroundColor = 'rgb(255, 255, 255)';
+        document.body.appendChild(div);
+
+        expect(testContrast(div, { level: 'AAA' })).toBe(true);
+    });
+
+    it('should handle large text differently', () => {
+        const div = document.createElement('div');
+        div.textContent = 'Large text has different requirements';
+        div.style.color = 'rgb(90, 90, 90)';
+        div.style.backgroundColor = 'rgb(255, 255, 255)';
+        div.style.fontSize = '18px';
+        document.body.appendChild(div);
+
+        // Large text only needs 3:1 for AA
+        expect(testContrast(div, { level: 'AA' })).toBe(true);
+    });
+
+    it('should handle bold text differently', () => {
+        const div = document.createElement('div');
+        div.textContent = 'Bold text at 14px';
+        div.style.color = 'rgb(100, 100, 100)';
+        div.style.backgroundColor = 'rgb(255, 255, 255)';
+        div.style.fontSize = '14px';
+        div.style.fontWeight = 'bold';
+        document.body.appendChild(div);
+
+        // Bold text at 14px is treated as large text (3:1 for AA)
+        expect(testContrast(div, { level: 'AA' })).toBe(true);
+    });
+
+    it('should handle default options when none provided', () => {
+        const div = document.createElement('div');
+        div.textContent = 'Default options text';
+        div.style.color = 'rgb(0, 0, 0)';
+        div.style.backgroundColor = 'rgb(255, 255, 255)';
+        document.body.appendChild(div);
+
+        expect(testContrast(div)).toBe(true);
+    });
+
+    it('should handle elements with background images', () => {
+        const div = document.createElement('div');
+        div.textContent = 'Text with background image';
+        div.style.color = 'rgb(0, 0, 0)';
+        div.style.backgroundImage = 'url(image.jpg)';
+        document.body.appendChild(div);
+
+        // Should return true because background color can't be determined
+        expect(testContrast(div)).toBe(true);
+    });
+
+    it('should handle invisible elements', () => {
+        const div = document.createElement('div');
+        div.textContent = 'Hidden text';
+        div.style.display = 'none';
+        document.body.appendChild(div);
+
+        expect(testContrast(div)).toBe(true);
+    });
+
+    it('should handle offscreen elements', () => {
+        const div = document.createElement('div');
+        div.textContent = 'Offscreen text';
+        div.style.position = 'absolute';
+        div.style.left = '-9999px';
+        document.body.appendChild(div);
+
+        expect(testContrast(div)).toBe(true);
+    });
+
+    it('should handle AA level for medium text (14-17px)', () => {
+        const div = document.createElement('div');
+        div.textContent = 'Medium text';
+        div.style.color = 'rgb(100, 100, 100)';
+        div.style.backgroundColor = 'rgb(255, 255, 255)';
+        div.style.fontSize = '16px';
+        document.body.appendChild(div);
+
+        expect(testContrast(div, { level: 'AA' })).toBe(true);
+    });
+
+    it('should handle AAA level for large text', () => {
+        const div = document.createElement('div');
+        div.textContent = 'Large text AAA';
+        div.style.color = 'rgb(80, 80, 80)';
+        div.style.backgroundColor = 'rgb(255, 255, 255)';
+        div.style.fontSize = '20px';
+        document.body.appendChild(div);
+
+        expect(testContrast(div, { level: 'AAA' })).toBe(true);
+    });
+
+    it('should handle bold text at 14px for AAA', () => {
+        const div = document.createElement('div');
+        div.textContent = 'Bold 14px AAA';
+        div.style.color = 'rgb(60, 60, 60)';
+        div.style.backgroundColor = 'rgb(255, 255, 255)';
+        div.style.fontSize = '14px';
+        div.style.fontWeight = 'bold';
+        document.body.appendChild(div);
+
+        expect(testContrast(div, { level: 'AAA' })).toBe(true);
+    });
+
+    it('should handle numeric font weight', () => {
+        const div = document.createElement('div');
+        div.textContent = 'Numeric weight';
+        div.style.color = 'rgb(80, 80, 80)';
+        div.style.backgroundColor = 'rgb(255, 255, 255)';
+        div.style.fontSize = '14px';
+        div.style.fontWeight = '700';
+        document.body.appendChild(div);
+
+        expect(testContrast(div, { level: 'AA' })).toBe(true);
+    });
+
+    it('should handle transparent background with parent', () => {
+        const parent = document.createElement('div');
+        parent.style.backgroundColor = 'rgb(255, 255, 255)';
+
+        const child = document.createElement('div');
+        child.textContent = 'Child with transparent bg';
+        child.style.color = 'rgb(0, 0, 0)';
+        child.style.backgroundColor = 'rgba(0, 0, 0, 0)';
+
+        parent.appendChild(child);
+        document.body.appendChild(parent);
+
+        expect(testContrast(child)).toBe(true);
+    });
+
+    it('should handle elements without computed styles properly', () => {
+        const div = document.createElement('div');
+        div.textContent = 'Test without style';
+
+        // Just test that the function handles elements without explicit styles
+        expect(() => testContrast(div)).not.toThrow();
+        expect(typeof testContrast(div)).toBe('boolean');
+    });
+
+    it('should handle small text requiring 4.5:1 ratio', () => {
+        const div = document.createElement('div');
+        div.textContent = 'Small text';
+        div.style.color = 'rgb(0, 0, 0)';
+        div.style.backgroundColor = 'rgb(255, 255, 255)';
+        div.style.fontSize = '12px';
+        document.body.appendChild(div);
+
+        expect(testContrast(div, { level: 'AA' })).toBe(true);
+    });
+
+    it('should handle element with parent having different colors', () => {
+        const parent = document.createElement('div');
+        parent.style.color = 'rgb(255, 0, 0)'; // Different color
+        parent.style.backgroundColor = 'rgb(0, 0, 255)'; // Different background
+
+        const child = document.createElement('div');
+        child.textContent = 'Child with different colors';
+        child.style.color = 'rgb(0, 0, 0)';
+        child.style.backgroundColor = 'rgb(255, 255, 255)';
+
+        parent.appendChild(child);
+        document.body.appendChild(parent);
+
+        expect(testContrast(child)).toBe(true);
+    });
+
+    it('should handle element with parent having same colors', () => {
+        const parent = document.createElement('div');
+        parent.style.color = 'rgb(0, 0, 0)'; // Same color
+        parent.style.backgroundColor = 'rgb(255, 255, 255)'; // Same background
+        parent.style.fontSize = '16px'; // Same size
+        parent.style.fontWeight = 'normal'; // Same weight
+
+        const child = document.createElement('div');
+        child.textContent = 'Child with same colors';
+        child.style.color = 'rgb(0, 0, 0)';
+        child.style.backgroundColor = 'rgb(255, 255, 255)';
+        child.style.fontSize = '16px';
+        child.style.fontWeight = 'normal';
+
+        parent.appendChild(child);
+        document.body.appendChild(parent);
+
+        expect(testContrast(child)).toBe(true);
+    });
+
+    it('should handle element without parent', () => {
+        const div = document.createElement('div');
+        div.textContent = 'No parent element';
+        div.style.color = 'rgb(0, 0, 0)';
+        div.style.backgroundColor = 'rgb(255, 255, 255)';
+
+        // Don't append to body to test no parent scenario
+        expect(testContrast(div)).toBe(true);
+    });
+
+    it('should handle element with parent having different font size', () => {
+        const parent = document.createElement('div');
+        parent.style.color = 'rgb(0, 0, 0)';
+        parent.style.backgroundColor = 'rgb(255, 255, 255)';
+        parent.style.fontSize = '16px';
+
+        const child = document.createElement('div');
+        child.textContent = 'Different font size';
+        child.style.color = 'rgb(0, 0, 0)';
+        child.style.backgroundColor = 'rgb(255, 255, 255)';
+        child.style.fontSize = '20px'; // Different size
+
+        parent.appendChild(child);
+        document.body.appendChild(parent);
+
+        expect(testContrast(child)).toBe(true);
+    });
+
+    it('should handle element with parent having different font weight', () => {
+        const parent = document.createElement('div');
+        parent.style.color = 'rgb(0, 0, 0)';
+        parent.style.backgroundColor = 'rgb(255, 255, 255)';
+        parent.style.fontWeight = 'normal';
+
+        const child = document.createElement('div');
+        child.textContent = 'Different font weight';
+        child.style.color = 'rgb(0, 0, 0)';
+        child.style.backgroundColor = 'rgb(255, 255, 255)';
+        child.style.fontWeight = 'bold'; // Different weight
+
+        parent.appendChild(child);
+        document.body.appendChild(parent);
+
+        expect(testContrast(child)).toBe(true);
+    });
+
+    it('should return false when contrast is insufficient for AA level', () => {
+        const div = document.createElement('div');
+        div.textContent = 'Low contrast text';
+        div.style.color = 'rgb(200, 200, 200)'; // Light gray
+        div.style.backgroundColor = 'rgb(255, 255, 255)'; // White
+        div.style.fontSize = '12px';
+        document.body.appendChild(div);
+
+        // This should fail AA contrast requirements (4.5:1 for small text)
+        const result = testContrast(div, { level: 'AA' });
+        expect(typeof result).toBe('boolean');
+    });
+
+    it('should return false when contrast is insufficient for AAA level', () => {
+        const div = document.createElement('div');
+        div.textContent = 'Low contrast AAA';
+        div.style.color = 'rgb(150, 150, 150)'; // Medium gray
+        div.style.backgroundColor = 'rgb(255, 255, 255)'; // White
+        div.style.fontSize = '12px';
+        document.body.appendChild(div);
+
+        // This should fail AAA contrast requirements (7:1 for small text)
+        const result = testContrast(div, { level: 'AAA' });
+        expect(typeof result).toBe('boolean');
+    });
+
+    it('should handle AAA level for normal text under 18px', () => {
+        const div = document.createElement('div');
+        div.textContent = 'AAA small text';
+        div.style.color = 'rgb(0, 0, 0)';
+        div.style.backgroundColor = 'rgb(255, 255, 255)';
+        div.style.fontSize = '12px';
+        document.body.appendChild(div);
+
+        expect(testContrast(div, { level: 'AAA' })).toBe(true);
+    });
+
+    it('should handle AAA level for bold text between 14-18px', () => {
+        const div = document.createElement('div');
+        div.textContent = 'AAA bold medium text';
+        div.style.color = 'rgb(80, 80, 80)';
+        div.style.backgroundColor = 'rgb(255, 255, 255)';
+        div.style.fontSize = '16px';
+        div.style.fontWeight = 'bold';
+        document.body.appendChild(div);
+
+        expect(testContrast(div, { level: 'AAA' })).toBe(true);
+    });
+
+    it('should handle AAA level for normal text between 14-18px', () => {
+        const div = document.createElement('div');
+        div.textContent = 'AAA normal medium text';
+        div.style.color = 'rgb(0, 0, 0)';
+        div.style.backgroundColor = 'rgb(255, 255, 255)';
+        div.style.fontSize = '16px';
+        div.style.fontWeight = 'normal';
+        document.body.appendChild(div);
+
+        expect(testContrast(div, { level: 'AAA' })).toBe(true);
+    });
+
+    it('should handle foreground darker than background', () => {
+        const div = document.createElement('div');
+        div.textContent = 'Dark on light';
+        div.style.color = 'rgb(50, 50, 50)'; // Dark foreground
+        div.style.backgroundColor = 'rgb(200, 200, 200)'; // Light background
+        document.body.appendChild(div);
+
+        expect(testContrast(div)).toBe(true);
+    });
+
+    it('should handle background darker than foreground', () => {
+        const div = document.createElement('div');
+        div.textContent = 'Light on dark';
+        div.style.color = 'rgb(200, 200, 200)'; // Light foreground
+        div.style.backgroundColor = 'rgb(50, 50, 50)'; // Dark background
+        document.body.appendChild(div);
+
+        expect(testContrast(div)).toBe(true);
+    });
+
+    it('should handle element with nested transparent backgrounds', () => {
+        const grandparent = document.createElement('div');
+        grandparent.style.backgroundColor = 'rgb(255, 255, 255)';
+
+        const parent = document.createElement('div');
+        parent.style.backgroundColor = 'rgba(0, 0, 0, 0)';
+
+        const child = document.createElement('div');
+        child.textContent = 'Nested transparent';
+        child.style.color = 'rgb(0, 0, 0)';
+        child.style.backgroundColor = 'rgba(0, 0, 0, 0)';
+
+        grandparent.appendChild(parent);
+        parent.appendChild(child);
+        document.body.appendChild(grandparent);
+
+        expect(testContrast(child)).toBe(true);
+    });
 });
 
 describe('getComputedBackgroundColor', () => {
-  beforeEach(() => {
-    document.body.innerHTML = '';
-  });
+    beforeEach(() => {
+        document.body.innerHTML = '';
+    });
+
+    it('should return false for null element', () => {
+        expect(getComputedBackgroundColor(null)).toBe(false);
+    });
+
+    it('should return false for document node', () => {
+        expect(getComputedBackgroundColor(document)).toBe(false);
+    });
+
+    it('should return background color for element with solid color', () => {
+        const div = document.createElement('div');
+        div.style.backgroundColor = 'rgb(255, 0, 0)';
+        document.body.appendChild(div);
 
-  it('should return false for null element', () => {
-    expect(getComputedBackgroundColor(null)).toBe(false);
-  });
+        const result = getComputedBackgroundColor(div);
+        // In JSDOM this may return false due to limited computed style support
+        expect(typeof result === 'string' || result === false).toBe(true);
+    });
+
+    it('should return false when background-image is set', () => {
+        const div = document.createElement('div');
+        div.style.backgroundImage = 'url(test.jpg)';
+        document.body.appendChild(div);
+
+        const result = getComputedBackgroundColor(div);
+        expect(result).toBe(false);
+    });
+
+    it('should traverse to parent when background is transparent', () => {
+        const parent = document.createElement('div');
+        parent.style.backgroundColor = 'rgb(0, 255, 0)';
+
+        const child = document.createElement('div');
+        child.style.backgroundColor = 'rgba(0, 0, 0, 0)';
+
+        parent.appendChild(child);
+        document.body.appendChild(parent);
 
-  it('should return false for document node', () => {
-    expect(getComputedBackgroundColor(document)).toBe(false);
-  });
+        const result = getComputedBackgroundColor(child);
+        // In JSDOM this may return false due to limited computed style support
+        expect(typeof result === 'string' || result === false).toBe(true);
+    });
 
-  it('should return background color for element with solid color', () => {
-    const div = document.createElement('div');
-    div.style.backgroundColor = 'rgb(255, 0, 0)';
-    document.body.appendChild(div);
+    it('should return false if getComputedStyle is not available', () => {
+        const div = document.createElement('div');
+        const originalGetComputedStyle = window.getComputedStyle;
+        window.getComputedStyle = null;
 
-    const result = getComputedBackgroundColor(div);
-    // In JSDOM this may return false due to limited computed style support
-    expect(typeof result === 'string' || result === false).toBe(true);
-  });
+        const result = getComputedBackgroundColor(div);
 
-  it('should return false when background-image is set', () => {
-    const div = document.createElement('div');
-    div.style.backgroundImage = 'url(test.jpg)';
-    document.body.appendChild(div);
+        window.getComputedStyle = originalGetComputedStyle;
+        expect(result).toBe(false);
+    });
 
-    const result = getComputedBackgroundColor(div);
-    expect(result).toBe(false);
-  });
+    it('should return false if computed style returns null', () => {
+        const div = document.createElement('div');
+        const originalGetComputedStyle = window.getComputedStyle;
+        window.getComputedStyle = () => null;
 
-  it('should traverse to parent when background is transparent', () => {
-    const parent = document.createElement('div');
-    parent.style.backgroundColor = 'rgb(0, 255, 0)';
+        const result = getComputedBackgroundColor(div);
 
-    const child = document.createElement('div');
-    child.style.backgroundColor = 'rgba(0, 0, 0, 0)';
+        window.getComputedStyle = originalGetComputedStyle;
+        expect(result).toBe(false);
+    });
 
-    parent.appendChild(child);
-    document.body.appendChild(parent);
+    it('should return fallbackColor when background-image is set and skipBackgroundImages is false', () => {
+        const div = document.createElement('div');
+        div.style.backgroundImage = 'url(test.jpg)';
+        document.body.appendChild(div);
 
-    const result = getComputedBackgroundColor(child);
-    // In JSDOM this may return false due to limited computed style support
-    expect(typeof result === 'string' || result === false).toBe(true);
-  });
+        const result = getComputedBackgroundColor(div, { skipBackgroundImages: false });
+        expect(result).toBe('rgb(255, 255, 255)');
+    });
 
-  it('should return false if getComputedStyle is not available', () => {
-    const div = document.createElement('div');
-    const originalGetComputedStyle = window.getComputedStyle;
-    window.getComputedStyle = null;
+    it('should return custom fallbackColor when background-image is set and skipBackgroundImages is false', () => {
+        const div = document.createElement('div');
+        div.style.backgroundImage = 'url(test.jpg)';
+        document.body.appendChild(div);
 
-    const result = getComputedBackgroundColor(div);
+        const result = getComputedBackgroundColor(div, {
+            skipBackgroundImages: false,
+            fallbackColor: 'rgb(0, 0, 0)',
+        });
+        expect(result).toBe('rgb(0, 0, 0)');
+    });
 
-    window.getComputedStyle = originalGetComputedStyle;
-    expect(result).toBe(false);
-  });
+    it('should still return false when background-image is set and skipBackgroundImages is true (default)', () => {
+        const div = document.createElement('div');
+        div.style.backgroundImage = 'url(test.jpg)';
+        document.body.appendChild(div);
 
-  it('should return false if computed style returns null', () => {
-    const div = document.createElement('div');
-    const originalGetComputedStyle = window.getComputedStyle;
-    window.getComputedStyle = () => null;
+        const result = getComputedBackgroundColor(div, { skipBackgroundImages: true });
+        expect(result).toBe(false);
+    });
 
-    const result = getComputedBackgroundColor(div);
+    it('should return fallbackColor when no parent has a background color', () => {
+        const div = document.createElement('div');
+        div.style.backgroundColor = 'rgba(0, 0, 0, 0)';
+        document.body.appendChild(div);
 
-    window.getComputedStyle = originalGetComputedStyle;
-    expect(result).toBe(false);
-  });
+        const result = getComputedBackgroundColor(div, { fallbackColor: 'rgb(255, 255, 255)' });
+        // If traversal reaches a point with no more parents and still transparent,
+        // should use fallbackColor
+        expect(typeof result === 'string' || result === false).toBe(true);
+    });
 });
 
 describe('luminance', () => {
-  it('should calculate luminance for pure black (0, 0, 0)', () => {
-    const result = luminance(0, 0, 0);
-    expect(result).toBe(0);
-  });
-
-  it('should calculate luminance for pure white (255, 255, 255)', () => {
-    const result = luminance(255, 255, 255);
-    expect(result).toBeCloseTo(1, 2);
-  });
-
-  it('should calculate luminance for red (255, 0, 0)', () => {
-    const result = luminance(255, 0, 0);
-    expect(result).toBeGreaterThan(0);
-    expect(result).toBeLessThan(1);
-  });
-
-  it('should calculate luminance for green (0, 255, 0)', () => {
-    const result = luminance(0, 255, 0);
-    expect(result).toBeGreaterThan(0);
-    expect(result).toBeLessThan(1);
-  });
-
-  it('should calculate luminance for blue (0, 0, 255)', () => {
-    const result = luminance(0, 0, 255);
-    expect(result).toBeGreaterThan(0);
-    expect(result).toBeLessThan(1);
-  });
-
-  it('should calculate luminance for gray (128, 128, 128)', () => {
-    const result = luminance(128, 128, 128);
-    expect(result).toBeGreaterThan(0);
-    expect(result).toBeLessThan(1);
-  });
-
-  it('should handle low values correctly (<=0.03928)', () => {
-    // RGB value 10 gives sRGB of 0.039 which is > 0.03928
-    // RGB value 5 gives sRGB of 0.0196 which is <= 0.03928
-    const result = luminance(5, 5, 5);
-    expect(result).toBeGreaterThan(0);
-  });
-
-  it('should handle high values correctly (>0.03928)', () => {
-    const result = luminance(200, 200, 200);
-    expect(result).toBeGreaterThan(0);
-    expect(result).toBeLessThan(1);
-  });
+    it('should calculate luminance for pure black (0, 0, 0)', () => {
+        const result = luminance(0, 0, 0);
+        expect(result).toBe(0);
+    });
+
+    it('should calculate luminance for pure white (255, 255, 255)', () => {
+        const result = luminance(255, 255, 255);
+        expect(result).toBeCloseTo(1, 2);
+    });
+
+    it('should calculate luminance for red (255, 0, 0)', () => {
+        const result = luminance(255, 0, 0);
+        expect(result).toBeGreaterThan(0);
+        expect(result).toBeLessThan(1);
+    });
+
+    it('should calculate luminance for green (0, 255, 0)', () => {
+        const result = luminance(0, 255, 0);
+        expect(result).toBeGreaterThan(0);
+        expect(result).toBeLessThan(1);
+    });
+
+    it('should calculate luminance for blue (0, 0, 255)', () => {
+        const result = luminance(0, 0, 255);
+        expect(result).toBeGreaterThan(0);
+        expect(result).toBeLessThan(1);
+    });
+
+    it('should calculate luminance for gray (128, 128, 128)', () => {
+        const result = luminance(128, 128, 128);
+        expect(result).toBeGreaterThan(0);
+        expect(result).toBeLessThan(1);
+    });
+
+    it('should handle low values correctly (<=0.03928)', () => {
+        // RGB value 10 gives sRGB of 0.039 which is > 0.03928
+        // RGB value 5 gives sRGB of 0.0196 which is <= 0.03928
+        const result = luminance(5, 5, 5);
+        expect(result).toBeGreaterThan(0);
+    });
+
+    it('should handle high values correctly (>0.03928)', () => {
+        const result = luminance(200, 200, 200);
+        expect(result).toBeGreaterThan(0);
+        expect(result).toBeLessThan(1);
+    });
 });
 
 describe('parseRGB', () => {
-  it('should parse rgb() format', () => {
-    const result = parseRGB('rgb(255, 0, 0)');
-    expect(result).toEqual(expect.arrayContaining(['rgb(255, 0, 0)', '255', '0', '0']));
-  });
-
-  it('should parse rgba() format', () => {
-    const result = parseRGB('rgba(255, 0, 0, 0.5)');
-    expect(result).toBeTruthy();
-    expect(result[1]).toBe('255');
-    expect(result[2]).toBe('0');
-    expect(result[3]).toBe('0');
-    expect(result[4]).toBe('0.5');
-  });
-
-  it('should parse rgb with different values', () => {
-    const result = parseRGB('rgb(128, 64, 32)');
-    expect(result).toBeTruthy();
-    expect(result[1]).toBe('128');
-    expect(result[2]).toBe('64');
-    expect(result[3]).toBe('32');
-  });
-
-  it('should return null for invalid format', () => {
-    const result = parseRGB('not a color');
-    expect(result).toBeNull();
-  });
-
-  it('should return null for hex color', () => {
-    const result = parseRGB('#FF0000');
-    expect(result).toBeNull();
-  });
-
-  it('should parse rgba with decimal alpha', () => {
-    const result = parseRGB('rgba(0, 0, 0, 0.75)');
-    expect(result).toBeTruthy();
-    expect(result[4]).toBe('0.75');
-  });
-
-  it('should parse rgb with single digit values', () => {
-    const result = parseRGB('rgb(1, 2, 3)');
-    expect(result).toBeTruthy();
-    expect(result[1]).toBe('1');
-    expect(result[2]).toBe('2');
-    expect(result[3]).toBe('3');
-  });
+    it('should parse rgb() format', () => {
+        const result = parseRGB('rgb(255, 0, 0)');
+        expect(result).toEqual(expect.arrayContaining(['rgb(255, 0, 0)', '255', '0', '0']));
+    });
+
+    it('should parse rgba() format', () => {
+        const result = parseRGB('rgba(255, 0, 0, 0.5)');
+        expect(result).toBeTruthy();
+        expect(result[1]).toBe('255');
+        expect(result[2]).toBe('0');
+        expect(result[3]).toBe('0');
+        expect(result[4]).toBe('0.5');
+    });
+
+    it('should parse rgb with different values', () => {
+        const result = parseRGB('rgb(128, 64, 32)');
+        expect(result).toBeTruthy();
+        expect(result[1]).toBe('128');
+        expect(result[2]).toBe('64');
+        expect(result[3]).toBe('32');
+    });
+
+    it('should return null for invalid format', () => {
+        const result = parseRGB('not a color');
+        expect(result).toBeNull();
+    });
+
+    it('should return null for hex color', () => {
+        const result = parseRGB('#FF0000');
+        expect(result).toBeNull();
+    });
+
+    it('should parse rgba with decimal alpha', () => {
+        const result = parseRGB('rgba(0, 0, 0, 0.75)');
+        expect(result).toBeTruthy();
+        expect(result[4]).toBe('0.75');
+    });
+
+    it('should parse rgb with single digit values', () => {
+        const result = parseRGB('rgb(1, 2, 3)');
+        expect(result).toBeTruthy();
+        expect(result[1]).toBe('1');
+        expect(result[2]).toBe('2');
+        expect(result[3]).toBe('3');
+    });
 });
 
 describe('getColorContrast', () => {
-  beforeEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  it('should return false for null element', () => {
-    expect(getColorContrast(null)).toBe(false);
-  });
-
-  it('should return false if getComputedStyle is not available', () => {
-    const div = document.createElement('div');
-    const originalGetComputedStyle = window.getComputedStyle;
-    window.getComputedStyle = null;
-
-    const result = getColorContrast(div);
-
-    window.getComputedStyle = originalGetComputedStyle;
-    expect(result).toBe(false);
-  });
-
-  it('should calculate contrast for black text on white background', () => {
-    const div = document.createElement('div');
-    div.style.color = 'rgb(0, 0, 0)';
-    div.style.backgroundColor = 'rgb(255, 255, 255)';
-    document.body.appendChild(div);
-
-    const result = getColorContrast(div);
-    // In JSDOM, computed styles may not work correctly, so result may be false
-    expect(typeof result === 'number' || result === false).toBe(true);
-    if (typeof result === 'number') {
-      expect(result).toBeCloseTo(21, 0);
-    }
-  });
-
-  it('should calculate contrast for white text on black background', () => {
-    const div = document.createElement('div');
-    div.style.color = 'rgb(255, 255, 255)';
-    div.style.backgroundColor = 'rgb(0, 0, 0)';
-    document.body.appendChild(div);
-
-    const result = getColorContrast(div);
-    // In JSDOM, computed styles may not work correctly, so result may be false
-    expect(typeof result === 'number' || result === false).toBe(true);
-    if (typeof result === 'number') {
-      expect(result).toBeCloseTo(21, 0);
-    }
-  });
-
-  it('should return 0 for identical foreground and background colors', () => {
-    const div = document.createElement('div');
-    div.style.color = 'rgb(128, 128, 128)';
-    div.style.backgroundColor = 'rgb(128, 128, 128)';
-    document.body.appendChild(div);
-
-    const result = getColorContrast(div);
-    // In JSDOM, computed styles may not work correctly, so result may be false
-    expect(typeof result === 'number' || result === false).toBe(true);
-    if (typeof result === 'number') {
-      expect(result).toBe(0);
-    }
-  });
-
-  it('should return false if background color cannot be determined', () => {
-    const div = document.createElement('div');
-    div.style.color = 'rgb(0, 0, 0)';
-    div.style.backgroundImage = 'url(test.jpg)';
-    document.body.appendChild(div);
-
-    const result = getColorContrast(div);
-    expect(result).toBe(false);
-  });
-
-  it('should return false if foreground color cannot be parsed', () => {
-    const div = document.createElement('div');
-    document.body.appendChild(div);
-
-    const originalGetComputedStyle = window.getComputedStyle;
-    window.getComputedStyle = () => ({
-      getPropertyValue: (prop) => {
-        if (prop === 'color') return 'invalid';
-        return 'rgb(255, 255, 255)';
-      }
-    });
-
-    const result = getColorContrast(div);
-
-    window.getComputedStyle = originalGetComputedStyle;
-    expect(result).toBe(false);
-  });
-
-  it('should calculate contrast for gray on white', () => {
-    const div = document.createElement('div');
-    div.style.color = 'rgb(128, 128, 128)';
-    div.style.backgroundColor = 'rgb(255, 255, 255)';
-    document.body.appendChild(div);
-
-    const result = getColorContrast(div);
-    // In JSDOM, computed styles may not work correctly
-    expect(typeof result === 'number' || result === false).toBe(true);
-    if (typeof result === 'number') {
-      expect(result).toBeGreaterThan(1);
-      expect(result).toBeLessThan(21);
-    }
-  });
-
-  it('should handle darker foreground and lighter background', () => {
-    const div = document.createElement('div');
-    div.style.color = 'rgb(50, 50, 50)';
-    div.style.backgroundColor = 'rgb(200, 200, 200)';
-    document.body.appendChild(div);
-
-    const result = getColorContrast(div);
-    // In JSDOM, computed styles may not work correctly
-    expect(typeof result === 'number' || result === false).toBe(true);
-    if (typeof result === 'number') {
-      expect(result).toBeGreaterThan(1);
-    }
-  });
-
-  it('should handle lighter foreground and darker background', () => {
-    const div = document.createElement('div');
-    div.style.color = 'rgb(200, 200, 200)';
-    div.style.backgroundColor = 'rgb(50, 50, 50)';
-    document.body.appendChild(div);
-
-    const result = getColorContrast(div);
-    // In JSDOM, computed styles may not work correctly
-    expect(typeof result === 'number' || result === false).toBe(true);
-    if (typeof result === 'number') {
-      expect(result).toBeGreaterThan(1);
-    }
-  });
-});
+    beforeEach(() => {
+        document.body.innerHTML = '';
+    });
+
+    it('should return false for null element', () => {
+        expect(getColorContrast(null)).toBe(false);
+    });
+
+    it('should return false if getComputedStyle is not available', () => {
+        const div = document.createElement('div');
+        const originalGetComputedStyle = window.getComputedStyle;
+        window.getComputedStyle = null;
+
+        const result = getColorContrast(div);
+
+        window.getComputedStyle = originalGetComputedStyle;
+        expect(result).toBe(false);
+    });
+
+    it('should calculate contrast for black text on white background', () => {
+        const div = document.createElement('div');
+        div.style.color = 'rgb(0, 0, 0)';
+        div.style.backgroundColor = 'rgb(255, 255, 255)';
+        document.body.appendChild(div);
+
+        const result = getColorContrast(div);
+        // In JSDOM, computed styles may not work correctly, so result may be false
+        expect(typeof result === 'number' || result === false).toBe(true);
+        if (typeof result === 'number') {
+            expect(result).toBeCloseTo(21, 0);
+        }
+    });
+
+    it('should calculate contrast for white text on black background', () => {
+        const div = document.createElement('div');
+        div.style.color = 'rgb(255, 255, 255)';
+        div.style.backgroundColor = 'rgb(0, 0, 0)';
+        document.body.appendChild(div);
+
+        const result = getColorContrast(div);
+        // In JSDOM, computed styles may not work correctly, so result may be false
+        expect(typeof result === 'number' || result === false).toBe(true);
+        if (typeof result === 'number') {
+            expect(result).toBeCloseTo(21, 0);
+        }
+    });
+
+    it('should return 0 for identical foreground and background colors', () => {
+        const div = document.createElement('div');
+        div.style.color = 'rgb(128, 128, 128)';
+        div.style.backgroundColor = 'rgb(128, 128, 128)';
+        document.body.appendChild(div);
+
+        const result = getColorContrast(div);
+        // In JSDOM, computed styles may not work correctly, so result may be false
+        expect(typeof result === 'number' || result === false).toBe(true);
+        if (typeof result === 'number') {
+            expect(result).toBe(0);
+        }
+    });
+
+    it('should return false if background color cannot be determined', () => {
+        const div = document.createElement('div');
+        div.style.color = 'rgb(0, 0, 0)';
+        div.style.backgroundImage = 'url(test.jpg)';
+        document.body.appendChild(div);
+
+        const result = getColorContrast(div);
+        expect(result).toBe(false);
+    });
+
+    it('should return false if foreground color cannot be parsed', () => {
+        const div = document.createElement('div');
+        document.body.appendChild(div);
+
+        const originalGetComputedStyle = window.getComputedStyle;
+        window.getComputedStyle = () => ({
+            getPropertyValue: prop => {
+                if (prop === 'color') {
+                    return 'invalid';
+                }
+                return 'rgb(255, 255, 255)';
+            },
+        });
+
+        const result = getColorContrast(div);
+
+        window.getComputedStyle = originalGetComputedStyle;
+        expect(result).toBe(false);
+    });
+
+    it('should calculate contrast for gray on white', () => {
+        const div = document.createElement('div');
+        div.style.color = 'rgb(128, 128, 128)';
+        div.style.backgroundColor = 'rgb(255, 255, 255)';
+        document.body.appendChild(div);
+
+        const result = getColorContrast(div);
+        // In JSDOM, computed styles may not work correctly
+        expect(typeof result === 'number' || result === false).toBe(true);
+        if (typeof result === 'number') {
+            expect(result).toBeGreaterThan(1);
+            expect(result).toBeLessThan(21);
+        }
+    });
+
+    it('should handle darker foreground and lighter background', () => {
+        const div = document.createElement('div');
+        div.style.color = 'rgb(50, 50, 50)';
+        div.style.backgroundColor = 'rgb(200, 200, 200)';
+        document.body.appendChild(div);
+
+        const result = getColorContrast(div);
+        // In JSDOM, computed styles may not work correctly
+        expect(typeof result === 'number' || result === false).toBe(true);
+        if (typeof result === 'number') {
+            expect(result).toBeGreaterThan(1);
+        }
+    });
+
+    it('should handle lighter foreground and darker background', () => {
+        const div = document.createElement('div');
+        div.style.color = 'rgb(200, 200, 200)';
+        div.style.backgroundColor = 'rgb(50, 50, 50)';
+        document.body.appendChild(div);
+
+        const result = getColorContrast(div);
+        // In JSDOM, computed styles may not work correctly
+        expect(typeof result === 'number' || result === false).toBe(true);
+        if (typeof result === 'number') {
+            expect(result).toBeGreaterThan(1);
+        }
+    });
+});
+
+describe('parseColor', () => {
+    it('should parse rgb() string into an object with r, g, b properties', () => {
+        const result = parseColor('rgb(255, 128, 0)');
+        expect(result).toEqual({ r: 255, g: 128, b: 0 });
+    });
+
+    it('should parse rgba() string into an object with r, g, b, a properties', () => {
+        const result = parseColor('rgba(255, 128, 0, 0.5)');
+        expect(result).toEqual({ r: 255, g: 128, b: 0, a: 0.5 });
+    });
+
+    it('should return null for invalid color strings', () => {
+        expect(parseColor('not a color')).toBeNull();
+        expect(parseColor('#FF0000')).toBeNull();
+        expect(parseColor('')).toBeNull();
+    });
+
+    it('should handle single-digit RGB values', () => {
+        const result = parseColor('rgb(1, 2, 3)');
+        expect(result).toEqual({ r: 1, g: 2, b: 3 });
+    });
+
+    it('should handle rgba with alpha of 0', () => {
+        const result = parseColor('rgba(0, 0, 0, 0)');
+        expect(result).toEqual({ r: 0, g: 0, b: 0, a: 0 });
+    });
+
+    it('should handle rgba with alpha of 1', () => {
+        const result = parseColor('rgba(255, 255, 255, 1)');
+        expect(result).toEqual({ r: 255, g: 255, b: 255, a: 1 });
+    });
+
+    it('should return null for null/undefined input', () => {
+        expect(parseColor(null)).toBeNull();
+        expect(parseColor(undefined)).toBeNull();
+    });
+});
+
+describe('getRelativeLuminance', () => {
+    it('should calculate luminance for black { r: 0, g: 0, b: 0 }', () => {
+        expect(getRelativeLuminance({ r: 0, g: 0, b: 0 })).toBe(0);
+    });
+
+    it('should calculate luminance for white { r: 255, g: 255, b: 255 }', () => {
+        expect(getRelativeLuminance({ r: 255, g: 255, b: 255 })).toBeCloseTo(1, 2);
+    });
+
+    it('should return same value as luminance() for matching inputs', () => {
+        const fromObject = getRelativeLuminance({ r: 128, g: 64, b: 32 });
+        const fromArgs = luminance(128, 64, 32);
+        expect(fromObject).toBe(fromArgs);
+    });
+
+    it('should return null for null/undefined input', () => {
+        expect(getRelativeLuminance(null)).toBeNull();
+        expect(getRelativeLuminance(undefined)).toBeNull();
+    });
+
+    it('should return null for objects missing required properties', () => {
+        expect(getRelativeLuminance({ r: 255 })).toBeNull();
+        expect(getRelativeLuminance({ r: 255, g: 128 })).toBeNull();
+        expect(getRelativeLuminance({})).toBeNull();
+    });
+});
+
+describe('getContrastRatio', () => {
+    it('should return 21:1 for black on white', () => {
+        const result = getContrastRatio('rgb(0, 0, 0)', 'rgb(255, 255, 255)');
+        expect(result).toBeCloseTo(21, 0);
+    });
+
+    it('should return 21:1 for white on black', () => {
+        const result = getContrastRatio('rgb(255, 255, 255)', 'rgb(0, 0, 0)');
+        expect(result).toBeCloseTo(21, 0);
+    });
+
+    it('should return 1 for identical colors', () => {
+        const result = getContrastRatio('rgb(128, 128, 128)', 'rgb(128, 128, 128)');
+        expect(result).toBe(1);
+    });
+
+    it('should return null for invalid color strings', () => {
+        expect(getContrastRatio('invalid', 'rgb(0, 0, 0)')).toBeNull();
+        expect(getContrastRatio('rgb(0, 0, 0)', 'invalid')).toBeNull();
+        expect(getContrastRatio('invalid', 'invalid')).toBeNull();
+    });
+
+    it('should return null for null/undefined input', () => {
+        expect(getContrastRatio(null, 'rgb(0, 0, 0)')).toBeNull();
+        expect(getContrastRatio('rgb(0, 0, 0)', null)).toBeNull();
+    });
+
+    it('should calculate correct ratio for gray on white', () => {
+        const result = getContrastRatio('rgb(128, 128, 128)', 'rgb(255, 255, 255)');
+        expect(result).toBeGreaterThan(1);
+        expect(result).toBeLessThan(21);
+    });
+});