TeaFun Drücke / zum Suchen
Sammlung
Prüfe Farbkontraste auf WCAG-Konformität, simuliere Farbenblindheit und berechne Seitenverhältnisse — kostenlose Design-Helfer, die komplett in deinem Browser laufen.
3 Tools in dieser Kategorie
← StartseiteBarrierefreie, gut proportionierte Visuals beginnen mit den richtigen Zahlen. Diese Sammlung bündelt die TeaFun-Tools, mit denen Designer, Entwickler und Content-Creator die Farb-Barrierefreiheit prüfen, Sehbedingungen simulieren und korrekte Proportionen festlegen.
Drei Tools, um die Zahlen hinter einem Design richtig zu treffen: ein WCAG-Kontrastprüfer, ein Farbenblindheits-Simulator und ein Seitenverhältnis-Rechner. Der Kontrastprüfer nimmt eine Vorder- und eine Hintergrundfarbe und meldet das Verhältnis gegen die WCAG-AA- und -AAA-Schwellen, damit du weißt, ob Text lesbar ist, statt zu raten. Der Farbenblindheits-Simulator nähert an, wie eine Palette für Menschen mit häufigen Formen der Farbsehschwäche aussieht. Der Seitenverhältnis-Rechner hält die Proportionen beim Skalieren oder Zuschneiden korrekt. Es sind kleine, fokussierte Helfer — die Art Prüfung, die man gegen Ende eines Designs macht, nicht die Leinwand, auf der man es erstellt.
Nutze den Kontrastprüfer, sobald Text auf einem farbigen oder Bildhintergrund liegt: gib beide Farben ein und bestätige, dass das Verhältnis mindestens 4,5:1 für normalen Text oder 3:1 für großen oder fetten Text erreicht. Lass den Farbenblindheits-Simulator über alles laufen, bei dem Farbe Bedeutung trägt — ein Diagramm, eine Reihe von Status-Badges, einen Formular-Fehlerzustand — und stelle sicher, dass die Information ohne die Farbe bestehen bleibt, denn ein nennenswerter Teil der Nutzer hat eine Form der Farbsehschwäche. Greif zum Seitenverhältnis-Rechner, wenn du ohne Verzerrung skalieren musst: gib eine Dimension und das Zielverhältnis ein, und er liefert die andere.
Barrierefreiheit und Proportion lassen sich mit dem Auge leicht falsch einschätzen. Eine Farbkombination, die auf deinem kalibrierten Monitor gut aussieht, kann auf einem Handy in der Sonne den Kontrast verfehlen, und eine für dich klare Palette kann für einen farbenblinden Nutzer zusammenbrechen, wenn Farbe der einzige Hinweis ist. Die WCAG-Verhältnisse gibt es gerade deshalb, weil das menschliche Urteil über Kontrast unzuverlässig ist. Auch die Proportion zählt: ein falsch zugeschnittenes Bild oder ein verzerrtes Video ist die Art kleiner Makel, den Leute bemerken, ohne ihn benennen zu können. Keines dieser Tools gestaltet für dich — sie fangen die messbaren Fehler ab, die ein gutes Auge dennoch übersehen kann, damit die Arbeit über deinen eigenen Bildschirm hinaus besteht.
Prüfe Kontrastverhältnisse, AA-/AAA-Konformität, generiere Palettenvarianten und exportiere CSS- oder Tailwind-v4-Farb-Tokens lokal.
Testen Sie Ihr Farbsehen mit Ishihara-Tafeln, die speziell für Gamer optimiert wurden.
Seitenverhaeltnisse sofort berechnen. Masse konvertieren, fehlende Seiten berechnen und Bildgroessen fuer Social Media 2025/2026 nachschlagen.
Normaler Text braucht ein Verhältnis von 4,5:1; großer Text (ab 18pt oder 14pt fett) braucht 3:1. Der WCAG-Kontrastprüfer zeigt beide Schwellen und deinen Bestanden-/Nicht-bestanden-Status sofort an.
Er wendet standardmäßige Daltonisierungs-Matrizen auf die Eingabefarben an, um anzunähern, wie sie bei verschiedenen Arten von Farbsehschwäche wirken — alles lokal im Browser berechnet.
Nein. Da manche Nutzer bestimmte Farben nicht unterscheiden können, kombiniere jeden Farbhinweis mit einem zweiten Signal — einer Beschriftung, einem Symbol, einem Muster oder Text. Der Simulator hilft dir zu prüfen, ob deine Bedeutung erhalten bleibt, wenn die Farbe es nicht tut.
Zuschneiden oder Skalieren auf das falsche Verhältnis verzerrt entweder den Inhalt oder erzwingt Balken. Ein festgelegtes Standardverhältnis wie 16:9 oder 1:1 hält alles proportional und vorhersehbar an allen Orten, an denen es angezeigt wird.