@casoon/dragonfly/core/accessibility/contrast.css

Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.

/*
 * Accessibility - Contrast
 *
 * Styles und Utilities für verbesserten Farbkontrast.
 * Diese Datei enthält Definitionen für kontrastreiche Farben und Kontrastprüfung.
 */

@layer accessibility {
  /*
   * Kontrastreiche Farbvariablen
   * 
   * Diese Variablen bieten Farben mit hohem Kontrast für eine bessere Zugänglichkeit.
   * Sie erfüllen mindestens die WCAG 2.1 AA-Anforderungen (Kontrastverhältnis ≥ 4.5:1).
   */
  :root {
    /* Primäre Kontrastfarben */
    --color-a11y-primary: var(--color-blue-600); /* Dunkleres Blau für besseren Kontrast auf weißem Hintergrund */
    --color-a11y-primary-hover: var(--color-blue-700); /* Noch dunkleres Blau für Hover-Zustände */
    --color-a11y-primary-text: var(--color-white); /* Weißer Text auf dunklerem Blau */
    
    /* Sekundäre Kontrastfarben */
    --color-a11y-secondary: var(--color-gray-600); /* Dunkleres Grau für besseren Kontrast */
    --color-a11y-secondary-hover: var(--color-gray-700); /* Noch dunkleres Grau für Hover-Zustände */
    --color-a11y-secondary-text: var(--color-white); /* Weißer Text auf dunklerem Grau */
    
    /* Statusfarben mit hohem Kontrast */
    --color-a11y-success: var(--color-green-600); /* Dunkleres Grün für besseren Kontrast */
    --color-a11y-warning: var(--color-orange-600); /* Dunkleres Orange für besseren Kontrast */
    --color-a11y-error: var(--color-red-600); /* Dunkleres Rot für besseren Kontrast */
    --color-a11y-info: var(--color-blue-600); /* Dunkleres Blau für besseren Kontrast */
    
    /* Text-Farben mit hohem Kontrast */
    --color-a11y-text-primary: var(--color-gray-very-dark); /* Fast schwarzer Text auf hellem Hintergrund */
    --color-a11y-text-secondary: var(--color-gray-600); /* Dunkleres Grau für sekundären Text */
    --color-a11y-text-tertiary: var(--color-gray-medium); /* Dunkleres Grau für tertiären Text */
    
    /* Hintergrundfarben mit hohem Kontrast */
    --color-a11y-background: var(--color-white); /* Weißer Hintergrund */
    --color-a11y-surface: var(--color-gray-very-light); /* Hellgraue Oberfläche */
    
    /* Randfarben mit hohem Kontrast */
    --color-a11y-border: var(--color-gray-600); /* Dunklerer Rahmen für besseren Kontrast */
  }
  
  /* 
   * Kontrast-Modus 
   * 
   * Diese Klasse kann auf body oder :root angewendet werden,
   * um einen Hochkontrast-Modus zu aktivieren.
   */
  .high-contrast-mode {
    /* Überschreibe Standard-Farbvariablen mit Hochkontrast-Versionen */
    --color-primary-500: var(--color-a11y-primary);
    --color-primary-600: var(--color-a11y-primary-hover);
    --color-primary-700: var(--color-a11y-primary-hover);
    --color-secondary-500: var(--color-a11y-secondary);
    --color-secondary-600: var(--color-a11y-secondary-hover);
    --color-secondary-700: var(--color-a11y-secondary-hover);
    --color-success: var(--color-a11y-success);
    --color-warning: var(--color-a11y-warning);
    --color-error: var(--color-a11y-error);
    --color-info: var(--color-a11y-info);
    --color-text-primary: var(--color-a11y-text-primary);
    --color-text-secondary: var(--color-a11y-text-secondary);
    --color-text-tertiary: var(--color-a11y-text-tertiary);
    --color-background: var(--color-a11y-background);
    --color-surface: var(--color-a11y-surface);
    --color-border: var(--color-a11y-border);
    
    /* Erhöhter Kontrast durch verstärkte Schattierungen */
    --shadow-sm: 0 var(--border-width) 3px 0 rgb(0 0 0 / 300000);
    --shadow-md: 0 var(--spacing-1) 6px 0 rgb(0 0 0 / 300000);
    --shadow-lg: 0 10px 15px 0 rgb(0 0 0 / 300000);
    
    /* Verstärkte Fokus-Indikatoren */
    --focus-ring: 0 0 0 3px rgb(0 82 204 / 800000);
    
    /* Erhöhte Textlesbarkeit */
    --line-height-normal: 1.6;
    
    /* Entfernung subtiler Transparenz-Effekte */
    --color-overlay: var(--color-overlay-dark);
    --color-overlay-light: var(--color-overlay-medium);
  }
  
  /* 
   * Kontrast-Klassen für einzelne Elemente
   * 
   * Diese Klassen können auf einzelne Elemente angewendet werden,
   * um ihren Kontrast zu verbessern, ohne den gesamten Modus zu aktivieren.
   */
  
  /* Verbesserte Textlesbarkeit */
  .a11y-text {
    color: var(--color-a11y-text-primary);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-none).6;
  }
  
  /* Kontrastreiche Buttons */
  .a11y-button {
    background-color: var(--color-a11y-primary);
    border: var(--border-width-thick) solid var(--color-a11y-primary);
    color: var(--color-a11y-primary-text);
    font-weight: var(--font-weight-semibold);
  }
  
  .a11y-button:hover,
  .a11y-button:focus {
    background-color: var(--color-a11y-primary-hover);
    border-color: var(--color-a11y-primary-hover);
  }
  
  /* Kontrastreiche Links */
  .a11y-link {
    color: var(--color-a11y-primary);
    font-weight: var(--font-weight-medium);
    text-decoration: underline;
  }
  
  .a11y-link:hover,
  .a11y-link:focus {
    color: var(--color-a11y-primary-hover);
    text-decoration: underline;
  }
  
  /* Kontrastreiche Rahmen */
  .a11y-border {
    border: var(--border-width-thick) solid var(--color-a11y-border);
  }
  
  /* Kontrastreiche Formular-Elemente */
  .a11y-input {
    background-color: var(--color-a11y-background);
    border: var(--border-width-thick) solid var(--color-a11y-border);
    color: var(--color-a11y-text-primary);
  }
  
  .a11y-input:focus {
    border-color: var(--color-a11y-primary);
    outline: var(--focus-ring);
  }
  
  /* Kontrastreiche Icons */
  .a11y-icon {
    color: var(--color-a11y-primary);
    height: 1%.5em;
    width: 1%.5em;
  }
}