Color Contrast and Visual Design (WCAG Guidelines)

<!-- Poor contrast (FAIL) -->
<p style="color: #777; background: #fff;">
  This text has 4.47:1 contrast - FAILS AA for normal text
</p>

<!-- Fixed contrast (PASS AA) -->
<p style="color: #595959; background: #fff;">
  This text has 7.0:1 contrast - PASSES AA and AAA
</p>

<!-- Large text (18pt+) with lower contrast OK -->
<h2 style="color: #767676; background: #fff; font-size: 24px;">
  Large text with 3.01:1 contrast - PASSES AA for large text
</h2>

<!-- Button with sufficient contrast -->
<button style="
  background: #0066cc; 
  color: #fff; 
  border: 2px solid #004499;">
  Text: 8.59:1 (PASS), Border: 5.14:1 against background (PASS)
</button>

<!-- Focus indicator with sufficient contrast -->
<style>
.accessible-link:focus {
  outline: 3px solid #0066cc; /* 3.02:1 against white background */
  outline-offset: 2px;
}
</style>
<a href="#" class="accessible-link">Accessible focus indicator</a>

<!-- Icon with sufficient contrast -->
<svg style="fill: #595959;" role="img" aria-label="Settings">
  <!-- Icon with 7:1 contrast against white background -->
  <path d="M..."></path>
</svg>

// Calculate contrast ratio between two colors
function getContrastRatio(color1, color2) {
  const l1 = getRelativeLuminance(color1);
  const l2 = getRelativeLuminance(color2);
  
  const lighter = Math.max(l1, l2);
  const darker = Math.min(l1, l2);
  
  return (lighter + 0.05) / (darker + 0.05);
}

// Calculate relative luminance
function getRelativeLuminance(hexColor) {
  // Convert hex to RGB
  const rgb = hexToRgb(hexColor);
  
  // Convert RGB to sRGB
  const srgb = rgb.map(val => {
    val = val / 255;
    return val <= 0.03928 
      ? val / 12.92 
      : Math.pow((val + 0.055) / 1.055, 2.4);
  });
  
  // Calculate luminance
  return 0.2126 * srgb[0] + 0.7152 * srgb[1] + 0.0722 * srgb[2];
}

function hexToRgb(hex) {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? [
    parseInt(result[1], 16),
    parseInt(result[2], 16),
    parseInt(result[3], 16)
  ] : null;
}

// Check WCAG compliance
function checkWCAG(foreground, background, fontSize, isBold) {
  const ratio = getContrastRatio(foreground, background);
  const isLargeText = fontSize >= 18 || (fontSize >= 14 && isBold);
  
  const aaThreshold = isLargeText ? 3 : 4.5;
  const aaaThreshold = isLargeText ? 4.5 : 7;
  
  return {
    ratio: ratio.toFixed(2),
    passAA: ratio >= aaThreshold,
    passAAA: ratio >= aaaThreshold,
    isLargeText
  };
}

// Usage
const result = checkWCAG('#595959', '#ffffff', 16, false);
console.log(`Contrast: ${result.ratio}:1`);
console.log(`AA: ${result.passAA ? 'PASS' : 'FAIL'}`);
console.log(`AAA: ${result.passAAA ? 'PASS' : 'FAIL'}`);

<!-- Bad: Color only for status -->
<span style="color: red;">Error</span>
<span style="color: green;">Success</span>

<!-- Good: Color + icon + text -->
<span class="status-error">
  <svg aria-hidden="true" class="icon">...error icon...</svg>
  Error: File not found
</span>

<span class="status-success">
  <svg aria-hidden="true" class="icon">...checkmark...</svg>
  Success: File uploaded
</span>

<!-- Bad: Color-only link distinction -->
<p style="color: #000;">
  Visit our <a href="#" style="color: #00f;">website</a> for more info.
</p>

<!-- Good: Underline + color -->
<p>
  Visit our <a href="#" style="color: #0066cc; text-decoration: underline;">
    website
  </a> for more info.
</p>

<!-- Good: Form validation with multiple cues -->
<style>
.input-error {
  border: 2px solid #d32f2f; /* Color */
  border-left: 5px solid #d32f2f; /* Extra visual cue */
  background: #ffebee; /* Background tint */
  background-image: url('error-icon.svg'); /* Icon */
  background-position: right 8px center;
  background-repeat: no-repeat;
}
</style>

<input 
  type="email" 
  class="input-error"
  aria-invalid="true"
  aria-describedby="email-error">
<span id="email-error" class="error-text">
  ⚠ Please enter a valid email address
</span>

<!-- Chart with patterns + colors -->
<style>
.chart-bar-1 { 
  fill: #0066cc; 
  stroke-dasharray: none; 
}
.chart-bar-2 { 
  fill: #00897b; 
  stroke-dasharray: 5,5; /* Stripe pattern */
}
.chart-bar-3 { 
  fill: #f57c00; 
  stroke-dasharray: 2,2; /* Dot pattern */
}
</style>

<!-- Safe color combinations (work for most CVD types) -->
<style>
:root {
  /* Blue-Orange palette (deuteranopia/protanopia safe) */
  --color-primary: #0077bb;    /* Blue */
  --color-secondary: #ee7733;  /* Orange */
  --color-accent: #009988;     /* Teal */
  
  /* High contrast palette */
  --color-dark: #332288;       /* Dark purple */
  --color-medium: #44aa99;     /* Teal */
  --color-light: #ddcc77;      /* Tan */
  
  /* Status colors with sufficient difference */
  --color-success: #117733;    /* Dark green */
  --color-warning: #ddaa33;    /* Gold */
  --color-error: #cc3311;      /* Red */
  --color-info: #0077bb;       /* Blue */
  
  /* Avoid these combinations */
  /* Red + Green (common CVD issue) */
  /* Light green + Yellow */
  /* Blue + Purple (for some types) */
}

/* Sequential data with brightness steps */
.data-1 { background: #f7fbff; } /* Lightest */
.data-2 { background: #deebf7; }
.data-3 { background: #c6dbef; }
.data-4 { background: #9ecae1; }
.data-5 { background: #6baed6; }
.data-6 { background: #4292c6; }
.data-7 { background: #2171b5; }
.data-8 { background: #08519c; }
.data-9 { background: #08306b; } /* Darkest */
</style>

<!-- Default styles -->
<style>
.button {
  background: #0066cc;
  color: white;
  border: 2px solid #0066cc;
  padding: 12px 24px;
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
  .button {
    border-width: 3px; /* Thicker borders */
    font-weight: 600; /* Bolder text */
  }
  
  /* Ensure focus indicators are extra visible */
  .button:focus {
    outline: 4px solid;
    outline-offset: 4px;
  }
}

/* Forced colors mode (Windows High Contrast) */
@media (forced-colors: active) {
  .button {
    /* Use system colors instead of custom colors */
    background: ButtonFace;
    color: ButtonText;
    border-color: ButtonText;
  }
  
  .button:hover {
    background: Highlight;
    color: HighlightText;
    border-color: Highlight;
  }
  
  .button:disabled {
    color: GrayText;
    border-color: GrayText;
  }
  
  /* Preserve important visual distinctions */
  .icon {
    /* Force icon to be visible */
    forced-color-adjust: auto;
  }
  
  /* Custom focus indicators */
  .button:focus {
    outline: 2px solid ButtonText;
    outline-offset: 2px;
  }
}

/* Inverted colors support */
@media (inverted-colors: inverted) {
  /* Re-invert images/media so they appear normal */
  img, video {
    filter: invert(1);
  }
}

/* Increased contrast (macOS/iOS) */
@media (prefers-contrast: more) {
  body {
    /* Slightly increase base contrast */
  }
  
  .text-secondary {
    /* Make secondary text darker */
    color: #444; /* Instead of #666 */
  }
}
</style>

<!-- Status with icon + color + text -->
<div class="alert alert-success">
  <svg aria-hidden="true" class="alert-icon">
    <use href="#checkmark-icon"></use>
  </svg>
  <strong>Success:</strong> Your changes have been saved.
</div>

<div class="alert alert-error">
  <svg aria-hidden="true" class="alert-icon">
    <use href="#error-icon"></use>
  </svg>
  <strong>Error:</strong> Unable to connect to server.
</div>

<div class="alert alert-warning">
  <svg aria-hidden="true" class="alert-icon">
    <use href="#warning-icon"></use>
  </svg>
  <strong>Warning:</strong> Your session will expire in 5 minutes.
</div>

<style>
.alert {
  padding: 12px 16px;
  border-left: 5px solid; /* Thick left border */
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.alert-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.alert-success {
  background: #e8f5e9;
  border-color: #2e7d32;
  color: #1b5e20;
}

.alert-success .alert-icon {
  fill: #2e7d32;
}

.alert-error {
  background: #ffebee;
  border-color: #c62828;
  color: #b71c1c;
}

.alert-error .alert-icon {
  fill: #c62828;
}

.alert-warning {
  background: #fff3e0;
  border-color: #f57c00;
  color: #e65100;
}

.alert-warning .alert-icon {
  fill: #f57c00;
}
</style>

<!-- Required field indicators -->
<label for="email">
  Email Address
  <abbr 
    title="required" 
    aria-label="required"
    style="color: #d32f2f; text-decoration: none; font-weight: bold;">
    *
  </abbr>
  <span class="sr-only">(required)</span>
</label>

<!-- Link with underline (not just color) -->
<p>
  Read our <a href="/privacy" style="
    color: #0066cc;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;">privacy policy</a> for details.
</p>

<!-- Progress indicator with multiple cues -->
<div class="progress-steps">
  <div class="step step-completed">
    <span class="step-number">1</span>
    <svg class="step-icon" aria-hidden="true">✓</svg>
    <span class="step-label">Personal Info</span>
  </div>
  <div class="step step-active">
    <span class="step-number">2</span>
    <span class="step-label">Payment</span>
  </div>
  <div class="step step-upcoming">
    <span class="step-number">3</span>
    <span class="step-label">Confirmation</span>
  </div>
</div>

<!-- Theme system with light/dark modes -->
<style>
:root {
  /* Light theme (default) */
  --color-background: #ffffff;
  --color-surface: #f5f5f5;
  --color-text: #212121;
  --color-text-secondary: #757575;
  --color-primary: #1976d2;
  --color-primary-dark: #1565c0;
  --color-error: #d32f2f;
  --color-success: #388e3c;
  --color-warning: #f57c00;
  
  /* Ensure minimum contrast ratios */
  --color-link: #0066cc; /* 4.5:1 on white */
  --color-border: #e0e0e0;
  
  /* Typography */
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-sm: 14px;
  --line-height-base: 1.5;
  --line-height-heading: 1.2;
  
  /* Spacing scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  
  /* Accessible focus indicator */
  --focus-ring: 2px solid var(--color-primary);
  --focus-offset: 2px;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #121212;
    --color-surface: #1e1e1e;
    --color-text: #e0e0e0;
    --color-text-secondary: #b0b0b0;
    --color-primary: #90caf9;
    --color-primary-dark: #64b5f6;
    --color-error: #ef5350;
    --color-success: #66bb6a;
    --color-warning: #ffa726;
    --color-link: #90caf9; /* 7:1 on dark background */
    --color-border: #333333;
  }
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
  :root {
    --color-text: #000000;
    --color-background: #ffffff;
    --color-border: #000000;
    --focus-ring: 3px solid;
    --focus-offset: 3px;
  }
}

/* Manual theme toggle support */
[data-theme="dark"] {
  --color-background: #121212;
  --color-surface: #1e1e1e;
  --color-text: #e0e0e0;
  --color-text-secondary: #b0b0b0;
  /* ... dark theme colors ... */
}

[data-theme="high-contrast"] {
  --color-background: #000000;
  --color-text: #ffffff;
  --color-primary: #ffff00;
  --color-link: #00ffff;
  /* Maximum contrast colors */
}

/* Apply theme variables */
body {
  background: var(--color-background);
  color: var(--color-text);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

a {
  color: var(--color-link);
  text-decoration: underline;
}

button {
  background: var(--color-primary);
  color: var(--color-background);
  border: none;
  padding: var(--space-sm) var(--space-md);
}

button:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius, 8px);
  padding: var(--space-md);
}
</style>

<!-- Theme toggle -->
<button id="theme-toggle" aria-label="Toggle dark mode">
  <svg aria-hidden="true">...moon/sun icon...</svg>
</button>

<script>
const themeToggle = document.getElementById('theme-toggle');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');

// Get stored theme or use system preference
function getTheme() {
  const stored = localStorage.getItem('theme');
  if (stored) return stored;
  return prefersDark.matches ? 'dark' : 'light';
}

// Apply theme
function setTheme(theme) {
  document.documentElement.setAttribute('data-theme', theme);
  localStorage.setItem('theme', theme);
  themeToggle.setAttribute('aria-label', 
    theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'
  );
}

// Initialize theme
setTheme(getTheme());

// Toggle theme
themeToggle.addEventListener('click', () => {
  const current = document.documentElement.getAttribute('data-theme') || 'light';
  setTheme(current === 'dark' ? 'light' : 'dark');
});

// Listen for system preference changes
prefersDark.addEventListener('change', (e) => {
  if (!localStorage.getItem('theme')) {
    setTheme(e.matches ? 'dark' : 'light');
  }
});
</script>