Grid & Contrast: UI Live Check

Grid & Contrast is a fast, offline accessibility toolkit built for UI/UX designers and front-end developers who need quick answers during design reviews, client calls, and QA passes.

CONTRAST CHECKER
Enter any two hex colors and instantly see the WCAG 2.1 contrast ratio along with AA and AAA pass/fail results for both normal and large text. A live preview shows how real body copy, headings, and captions look with your chosen foreground and background, so you can judge legibility at a glance — not just the number.

TOUCH TARGET TESTER
Adjust tap target size and spacing with simple sliders and see the result rendered at true scale on your screen. Compare against Material Design, Apple Human Interface Guidelines, and WCAG 2.5.5 minimum sizing rules, including the well-known 48x48dp guideline, to catch accessibility issues before they ship.

TYPOGRAPHY SCALE GENERATOR
Pick a base font size and a modular scale ratio (Minor Second through Golden Ratio) to generate a full type scale — Caption through Display — rendered live at true pixel size on your actual device viewport. See exactly how each step looks and feels before committing it to your design system.

WHY DESIGNERS AND DEVELOPERS KEEP THIS APP
- Clean, single-purpose tools with no clutter
- Works fully offline — no account, no setup
- Light and dark themes that match your workflow
- Built around real WCAG 2.1 contrast formulas, not approximations
- Useful reference during client meetings, design QA, and code reviews

WHO IT'S FOR
- UI/UX designers checking color systems for accessibility
- Front-end and mobile developers verifying implementation against design specs
- QA testers auditing screens for WCAG compliance
- Design system maintainers documenting type scales and contrast rules

Grid & Contrast doesn't try to be an all-in-one design suite — it focuses on the small, repetitive accessibility checks that are easy to skip but important to get right. Keep it on your phone and use it whenever you need a fast, reliable answer.