# Kontrastprüfer (WCAG 2.2)

> Berechnet das Kontrastverhältnis zweier CSS-Farben nach WCAG 2.2 und schlägt Farben gleichen Farbtons vor, die die Schwellen erreichen.

## URL-API

- Mensch: https://contrast.barrierefrei.kiwi/?fg=7A8789&bg=FFFFFF
- Maschine: https://contrast.barrierefrei.kiwi/?fg=7A8789&bg=FFFFFF&format=json

Parameter:
- `fg`: Vordergrund-/Textfarbe, `bg`: Hintergrundfarbe. Jede CSS-Farbe, URL-kodiert: Hex mit oder ohne `#` (3/4/6/8 Stellen), `rgb()`, `rgba()`, `hsl()`, `hwb()`, `lab()`, `oklch()`, `color()`, Farbnamen.
- `format=json`: Die Seite zeigt nur das JSON in einem `<pre id="json">`. Benötigt JavaScript (Headless-Browser), da die Seite statisch ausgeliefert wird.

Beispielantwort:

```json
{
  "input": { "fg": "7A8789", "bg": "FFFFFF" },
  "fg": "#7A8789",
  "bg": "#FFFFFF",
  "effective": { "fg": "#7A8789", "bg": "#FFFFFF" },
  "ratio": 3.71,
  "wcag": {
    "version": "2.2",
    "normalText": { "AA": false, "AAA": false },
    "largeText": { "AA": true, "AAA": false },
    "nonText": { "AA": true }
  },
  "suggestions": {
    "fg": [ { "target": 4.5, "color": "#6D797A", "ratio": 4.5 }, { "target": 7, "color": "#515A5C", "ratio": 7.07 } ],
    "bg": [ { "target": 4.5, "color": "#1D1D1D", "ratio": 4.53 }, { "target": 7, "color": null, "ratio": null } ]
  },
  "url": "https://contrast.barrierefrei.kiwi/?fg=7A8789&bg=FFFFFF"
}
```

Bei ungültiger Farbe: `{ "error": "invalid color", "field": "fg" | "bg", "input": {…} }`.

## Berechnung (ohne Aufruf selbst nachrechenbar)

1. Alpha: Hintergrund mit Alpha wird auf Weiß gelegt, Vordergrund mit Alpha auf den so entstandenen Hintergrund: `c = a·fg + (1−a)·bg`, je Kanal auf 0–255 gerundet. Ergebnis steht in `effective`.
2. Relative Luminanz je Kanal: `c/255 ≤ 0.04045 ? c/12.92 : ((c+0.055)/1.055)^2.4`, dann `L = 0.2126·R + 0.7152·G + 0.0722·B`.
3. Kontrast: `(L_hell + 0.05) / (L_dunkel + 0.05)`, auf 2 Nachkommastellen abgeschnitten (nie aufgerundet).

Schwellen:
- Normaler Text: AA 4.5, AAA 7 (SC 1.4.3, 1.4.6)
- Großer Text (ab 24px oder ab 18.66px fett): AA 3, AAA 4.5
- Nicht-Text-Elemente (Icons, Rahmen, Bedienelemente): AA 3 (SC 1.4.11), kein AAA

Vorschläge: gleicher HSL-Farbton und -Sättigung, nur die Helligkeit ändert sich; jeweils die nächstgelegene Farbe, die das Ziel erreicht. Alpha des Ausgangswerts bleibt erhalten. `null` = mit diesem Farbton nicht erreichbar.