Grid & Contrast: UI Live Check

Grid & Contrast ist ein schnelles, offline nutzbares Barrierefreiheits-Toolkit für UI/UX-Designer und Frontend-Entwickler, die in Design-Reviews, Kundengesprächen und Qualitätssicherungsphasen schnell Antworten benötigen.

KONTRASTPRÜFUNG

Geben Sie zwei beliebige Hex-Farben ein und sehen Sie sofort das WCAG 2.1-Kontrastverhältnis sowie die Ergebnisse für normale und große Texte (AA/AAA). Eine Live-Vorschau zeigt, wie Fließtext, Überschriften und Bildunterschriften mit dem gewählten Vorder- und Hintergrund aussehen. So können Sie die Lesbarkeit auf einen Blick beurteilen – nicht nur anhand der Zahlen.

TOUCH-ZIEL-TESTER

Passen Sie Größe und Abstand des Tippziels mit einfachen Schiebereglern an und sehen Sie das Ergebnis in Originalgröße auf Ihrem Bildschirm. Vergleichen Sie es mit Material Design, den Apple Human Interface Guidelines und den WCAG 2.5.5-Mindestgrößenregeln, einschließlich der bekannten 48x48-dp-Richtlinie, um Barrierefreiheitsprobleme vor der Veröffentlichung zu erkennen.

TYPOGRAFIE-SKALIERUNGSGENERATOR

Wählen Sie eine Basisschriftgröße und ein modulares Skalierungsverhältnis (Kleine Sekunde bis Goldener Schnitt), um eine vollständige Schriftgröße zu generieren – von der Bildunterschrift bis zur Anzeigeschrift –, die live in Originalpixelgröße auf Ihrem Bildschirm dargestellt wird. Sehen Sie genau, wie jeder Schritt aussieht und sich anfühlt, bevor Sie ihn in Ihr Designsystem übernehmen.

WARUM DESIGNER UND ENTWICKLER DIESE APP NUTZEN

- Klare, spezialisierte Tools ohne unnötigen Ballast

- Vollständig offline nutzbar – kein Konto, keine Einrichtung

- Helle und dunkle Designs, die zu Ihrem Workflow passen

Basierend auf den tatsächlichen WCAG 2.1-Kontrastformeln, nicht auf Annäherungen

- Nützliche Referenz in Kundengesprächen, Design-Qualitätssicherung und Code-Reviews

FÜR WEN IST DIE APP GEEIGNET?

- UI/UX-Designer, die Farbsysteme auf Barrierefreiheit prüfen

- Frontend- und Mobile-Entwickler, die die Implementierung anhand der Designvorgaben überprüfen

- QA-Tester, die Bildschirme auf WCAG-Konformität prüfen

- Verantwortliche für Designsysteme, die Typografie-Skalierungen und Kontrastregeln dokumentieren

Grid & Contrast ist keine All-in-One-Design-Suite – die App konzentriert sich auf die kleinen, wiederkehrenden Barrierefreiheitsprüfungen, die leicht übersehen werden, aber wichtig sind. Speichern Sie die App auf Ihrem Smartphone und nutzen Sie sie, wann immer Sie schnell und zuverlässig eine Antwort benötigen.