Color Contrast Correction

Many syntax themes prioritize aesthetics over readability, producing token colors that lack sufficient contrast against the editor background. This is an accessibility concern: the WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) requires a contrast ratio of at least 4.5:1 for normal text, and 3:1 for large text (Level AA). Code displayed in small monospace fonts falls under the stricter 4.5:1 threshold.

Kazari can automatically enforce this by adjusting syntax token colors to meet a configurable minimum contrast ratio (default 5.5:1, slightly above WCAG AA) against the theme's editor background. Correction is applied per token: only colors that fall below the threshold are shifted toward a more readable value while staying as close to the original hue as possible. Tokens that already meet the ratio are left untouched.

As a result, well-designed themes (such as Catppuccin Mocha or Tokyo Night) may show little or no visible difference, while themes known for low-contrast palettes (such as Solarized, Vitesse, or One Dark Pro) will show noticeable adjustments.

Each row below uses a different theme pair. Left: raw theme colors (contrast correction disabled). Right: after correction. Toggle dark mode to compare both variants.

Solarized / Go

Before (raw theme colors)
package main
import "fmt"
func main() {
  name := "world"
  fmt.Printf("Hello, %s!\n", name)
  for i := 0; i < 3; i++ {
    fmt.Println(i)
  }
}
After (contrast corrected)
package main
import "fmt"
func main() {
  name := "world"
  fmt.Printf("Hello, %s!\n", name)
  for i := 0; i < 3; i++ {
    fmt.Println(i)
  }
}

Rose Pine / JavaScript

Before (raw theme colors)
const greet = (name) => {
  console.log("Hello, " + name + "!");
  return { greeting: name, time: Date.now() };
};
const users = ["Alice", "Bob"];
users.forEach((u) => greet(u));
After (contrast corrected)
const greet = (name) => {
  console.log("Hello, " + name + "!");
  return { greeting: name, time: Date.now() };
};
const users = ["Alice", "Bob"];
users.forEach((u) => greet(u));

Vitesse / Python

Before (raw theme colors)
from dataclasses import dataclass
from typing import Optional
@dataclass
class User:
    name: str
    email: str
    age: Optional[int] = None
    def greet(self) -> str:
        return f"Hello, {self.name}!"
users = [User("Alice", "alice@example.com", 30)]
for u in users:
    print(u.greet())
After (contrast corrected)
from dataclasses import dataclass
from typing import Optional
@dataclass
class User:
    name: str
    email: str
    age: Optional[int] = None
    def greet(self) -> str:
        return f"Hello, {self.name}!"
users = [User("Alice", "alice@example.com", 30)]
for u in users:
    print(u.greet())

One Dark Pro / TypeScript

Before (raw theme colors)
interface CacheEntry<T> {
  key: string;
  value: T;
  expiresAt: number;
}
function getOrSet<T>(cache: Map<string, CacheEntry<T>>, key: string, fn: () => T): T {
  const entry = cache.get(key);
  if (entry && entry.expiresAt > Date.now()) {
    return entry.value;
  }
  const value = fn();
  cache.set(key, { key, value, expiresAt: Date.now() + 3600_000 });
  return value;
}
After (contrast corrected)
interface CacheEntry<T> {
  key: string;
  value: T;
  expiresAt: number;
}
function getOrSet<T>(cache: Map<string, CacheEntry<T>>, key: string, fn: () => T): T {
  const entry = cache.get(key);
  if (entry && entry.expiresAt > Date.now()) {
    return entry.value;
  }
  const value = fn();
  cache.set(key, { key, value, expiresAt: Date.now() + 3600_000 });
  return value;
}

Rose Pine Moon / Bash

Before (raw theme colors)
#!/bin/bash
set -euo pipefail
PROJECT_DIR="${1:-.}"
echo "Building project in $PROJECT_DIR..."
for file in "$PROJECT_DIR"/*.go; do
  if [[ -f "$file" ]]; then
    go build -o "bin/$(basename "${file%.go}")" "$file"
    echo "  Built: $file"
  fi
done
echo "Done. $(ls bin/ | wc -l) binaries built."
After (contrast corrected)
#!/bin/bash
set -euo pipefail
PROJECT_DIR="${1:-.}"
echo "Building project in $PROJECT_DIR..."
for file in "$PROJECT_DIR"/*.go; do
  if [[ -f "$file" ]]; then
    go build -o "bin/$(basename "${file%.go}")" "$file"
    echo "  Built: $file"
  fi
done
echo "Done. $(ls bin/ | wc -l) binaries built."

Solarized / CSS

Before (raw theme colors)
:root {
  --primary: #5965d8;
  --bg: #f8f9fa;
  --text: #1a1a1a;
  --radius: 0.5rem;
}
.card {
  padding: 1.5rem;
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}
After (contrast corrected)
:root {
  --primary: #5965d8;
  --bg: #f8f9fa;
  --text: #1a1a1a;
  --radius: 0.5rem;
}
.card {
  padding: 1.5rem;
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}