Bedienung
- 01Farbe konvertieren.Den Farbwähler setzen, einen HEX-Wert eingeben oder die R/G/B- und H/S/L-Regler ziehen; acht Karten aktualisieren sich gemeinsam, jede kopierbar, und die nächstgelegene benannte CSS-Farbe meldet ihren ΔE₇₆-Abstand.
- 02Kontrast prüfen.Vordergrund und Hintergrund wählen: ein Verhältnis, vier Abzeichen (AA/AAA, normaler und großer Text) und ein Live-Muster. Wenn AA normal scheitert, das vorgeschlagene Farbfeld anklicken, um eine reine Helligkeitskorrektur bis 4.5 : 1 anzuwenden.
- 03Palette bauen.Sechs Zeilen — komplementär, geteilt-komplementär, triadisch, tetradisch, analog, monochrom — folgen der Basisfarbe, dann ein Streifen mit 13 Tönungs- und Schattierungsstufen; jedes Farbfeld kopiert als HEX. Die Farbenblindheits-Vorschau zeigt ein gewähltes Schema bei Protanopie, Deuteranopie und Tritanopie.
- 04Bild auswerten.Eine gewählte Datei wird lokal dekodiert und auf höchstens 480 px Breite skaliert. Ein Pixel für HEX, RGB und HSL anklicken; das Panel ergänzt Durchschnittsfarbe, bis zu sechs dominante Farben aus einem Median-Cut und ein 64-Bin-RGB-Histogramm.
- 05Aufnahme planen.Die Fotografie-Tabs decken Schärfentiefe, Belichtung (EV, Verschlussleiter, ND-Filter und Countdown-Timer, Sunny-16, Blitz), Astro (500- und NPF-Regel, Sternspuren, Mondphase) und Ausgabe (Druckgröße, Dateischätzung, Zeitraffer) ab.
Rechenbeispiele
Anzeigen aus den Standardwerten dieser Seite.
| Eingabe |
Die Seite zeigt |
#4a90e2 |
hsl(212, 72%, 59%), hsv(212, 67%, 89%), cmyk(67%, 36%, 0%, 11%), lab(58.87 3.995 -48.11), lch(58.87 48.27 274.7), Luminanz 0.2689, am nächsten cornflowerblue · #6495ed · ΔE₇₆ = 6.26 |
#999999 auf Weiß |
2.85 : 1 — alle vier Abzeichen scheitern; der vorgeschlagene Vordergrund #757575 ergibt 4.61 : 1 |
#767676, dann #777777, auf Weiß |
4.54 : 1 besteht AA normal und beide Großtext-Abzeichen; 4.48 : 1 scheitert bei AA normal um 0.02 |
Palettenbasis #4a90e2 |
triadisch #4a90e2 / #e24a90 / #90e24a; Tönungen und Schattierungen #e5effb → #0b1520; Komplementärpaar bei Deuteranopie #6b66ce / #cbd06b |
| Foto: 50 mm, f/8, 3 m, Vollformat; f/8, 1/250 s, ISO 100 |
nah 2.36 m, fern 4.12 m, gesamt 1.76 m, hyperfokal 10.88 m; EV 13.97; ND1000 auf 1/125 s ergibt 8.2″ |
| Foto: 24 mm, f/2.8, 24 MP, Deklination 0°; 6000 × 4000 px bei 300 dpi |
500-Regel 20.8 s, NPF 11.6 s, Strichspur 6.1 px; Druck 50.8 × 33.9 cm, Ausgezeichnet, RAW 14-Bit 24.8 MB |
Die WCAG-Zahlen hinter den Abzeichen
Jeder sRGB-Kanal wird linearisiert (÷12.92 unter dem Knick 0.04045, sonst ((v + 0.055) / 1.055)²·⁴), die relative Luminanz ist L = 0.2126 R + 0.7152 G + 0.0722 B, und das Kontrastverhältnis ist (L_light + 0.05) / (L_dark + 0.05) — Schwarz auf Weiß 21.00 : 1, gleiche Farben 1.00 : 1. Schwellen: AA normal 4.5, AA groß 3.0, AAA normal 7.0, AAA groß 4.5. Konvertierungskarten folgen sRGB → lineares RGB → XYZ (D65) → CIELAB → LCH; die Karte des nächstgelegenen Namens nutzt ΔE₇₆ gegen die 148 CSS-Schlüsselwörter.
Annahmen und Grenzen
- Nur sRGB.
- Kein Monitorprofil und keine Gamut-Prüfung; die CMYK-Karte ist eine einfache c/m/y/k-Subtraktion — ein Dialogwert, kein Druckbeweis.
- Anzeigerundung.
- LAB und LCH zeigen vier signifikante Stellen und Verhältnisse zwei Nachkommastellen; Urteile vergleichen den ungerundeten Wert.
Die Falle bei der Großtext-Schwelle
Das am häufigsten falsch gelesene Abzeichen ist AAA groß: Es verlangt 4.5 : 1, genau wie AA normal, nicht die 3 : 1, die AA groß erlaubt — „großer Text“ unter AA zu bestehen garantiert nichts bei AAA. Auf Weiß ergibt #767676 4.54 : 1 und besteht AA normal plus beide Großtext-Abzeichen (AAA normal verlangt 7.0), während #777777 4.48 : 1 ergibt und AA normal um zwei Hundertstel verfehlt. „Groß“ bedeutet 18 pt regulär oder 14 pt fett, und das Verhältnis ist symmetrisch: Text und Hintergrund zu tauschen ändert nichts.
Wo es hilft
Oberfläche und Marke
Körpertext und Schaltflächen gegen beide Hintergründe prüfen, ein Dark-Mode-Paar ehrlich halten, eine sechsfarbige Harmonie aus einem Logo ziehen und sehen, ob eine rot/grüne Statuspalette Deuteranopie übersteht.
Fotografie und Bildarbeit
Durchschnitts- und dominante Farben eines Fotos auslesen, bevor ein Overlay-Ton gewählt wird, dann prüfen, ob 50 mm bei f/8 ein Motiv in 3 m Entfernung in 1.76 m hält, wie weit ND1000 1/125 s streckt oder wie viele 24-MP-Bilder ein 100-s-Zeitraffer füllt.
Farbe in Code und Druck
Einem Entwickler den exakten hsl(212, 72%, 59%)- oder LAB-String geben, einen Marketing-Hex gegen eine weiße Seite prüfen oder einen CMYK-Wert kontrollieren, bevor Druckdaten an eine Druckerei gehen.
Datenschutz
Jede Konvertierung, Kontrastprüfung, Palette, Bildanalyse und Fotoberechnung läuft im Browser; für das Bild-Panel gewählte Dateien werden nie hochgeladen.
Quellen
- W3C, WCAG 2.2 — Contrast (Minimum) and Contrast (Enhanced), w3.org （访问日期：2026-10-01）— die Schwellen 4.5 : 1, 3 : 1 und 7 : 1 und die Definition von großem Text.
- W3C, WCAG 2.2 — relative luminance, w3.org （访问日期：2026-10-01）— die Koeffizienten und der 0.05-Offset hinter jedem Verhältnis.
- Wikipedia, CIELAB color space, en.wikipedia.org （访问日期：2026-10-01）— die XYZ-zu-Lab-Transformation und die LCH-Polarform in den Ergebniskarten.
- Wikipedia, Median cut, en.wikipedia.org （访问日期：2026-10-01）— der Algorithmus für dominante Farben hinter den sechs Bildfeldern.
- Wikipedia, Depth of field, en.wikipedia.org （访问日期：2026-10-01）— hyperfokale Distanz und die Nah- und Ferngrenzen, die der Foto-Tab meldet.
本页计算器
精选工具,点开即用;小工具可直接试算,数值会带入完整计算器。