🎨 Colour Principles

Colour choices significantly impact users with visual processing differences, color blindness, and sensory sensitivities. Proper colour design ensures information is accessible to all users regardless of their visual perception.

Design Guidelines

Principle	Description	Recommendation
Sufficient Contrast	Ensure foreground/background contrast	WCAG AA: 4.5:1 for text, 3:1 for large text
Avoid Pure Black/White	Reduce visual fatigue	Use soft dark grays (#1a1a1a) instead of pure black
Colour Not Sole Indicator	Support colorblind users	Use shapes, icons, or text alongside colour
Color Blind Friendly	Consider common color vision deficiencies	Test with color blindness simulators
Soft Background Colors	Reduce eye strain	Use cream, light gray, or other muted tones
Dark Mode Support	Accommodate light sensitivity	Provide theme switching options

CSS Implementation

/* Color-blind friendly status colors */
.status-success {
  background-color: #2d7d46; /* Deep green */
  color: #ffffff;
}

.status-warning {
  background-color: #c05621; /* Deep orange */
  color: #ffffff;
}

.status-error {
  background-color: #c53030; /* Deep red */
  color: #ffffff;
}

/* Soft background colors */
.soft-background {
  background-color: #faf8f5; /* Cream white */
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .soft-background {
    background-color: #1a1a2e;
  }
}

/* High contrast focus states */
.high-contrast-focus:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

Tailwind CSS Classes

<div className="bg-stone-50 dark:bg-slate-900 p-6 rounded-lg">
  <div className="flex items-center gap-2">
    <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-green-700 text-white">
      <CheckCircle className="w-4 h-4" />
      Success
    </span>
    <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-amber-700 text-white">
      <AlertTriangle className="w-4 h-4" />
      Warning
    </span>
    <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-red-700 text-white">
      <XCircle className="w-4 h-4" />
      Error
    </span>
  </div>
</div>

React Component

type StatusType = "success" | "warning" | "error" | "info";

interface StatusBadgeProps {
  type: StatusType;
  children: React.ReactNode;
}

export function StatusBadge({ type, children }: StatusBadgeProps) {
  const config = {
    success: {
      bg: "bg-green-700",
      icon: CheckCircle,
    },
    warning: {
      bg: "bg-amber-700",
      icon: AlertTriangle,
    },
    error: {
      bg: "bg-red-700",
      icon: XCircle,
    },
    info: {
      bg: "bg-blue-700",
      icon: Info,
    },
  };

  const { bg, icon: Icon } = config[type];

  return (
    <span
      className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full ${bg} text-white`}
    >
      <Icon className="w-4 h-4" aria-hidden="true" />
      {children}
    </span>
  );
}

Color Blindness Considerations

Types of Color Vision Deficiency

Deuteranopia/Deuteranomaly: Red-green (most common)
Protanopia/Protanomaly: Red-green
Tritanopia/Tritanomaly: Blue-yellow (rare)

Testing Tools

Coblis
Color Oracle
Chrome DevTools color vision deficiency emulation

Checklist

Text contrast ratio meets WCAG AA (4.5:1)
Information is not conveyed by colour alone
Tested with color blindness simulator
Background colors are soft and non-distracting
Dark mode is available
Status indicators use icons and text
Focus states have high contrast