Contrast Button
Stein Erik Nilsen
About this app
- Category Graphics & Design
- Age 10
- Updated Oct 28, 2025
- OS IOS
Editor reviews
Contrast Button is a productivity-focused UI design tool for creating accessible buttons and checking color contrast. It helps designers and developers meet WCAG standards faster with real-time previews and frictionless export.
Core features include an instant contrast checker that evaluates text and icon visibility against backgrounds with WCAG AA and AAA results, a button designer that builds normal, hover, active, and disabled states with customizable size, radius, borders, and shadows, and color tools that offer palette picking, contrast suggestions, and color blindness simulation to validate accessibility.
Ideal for UI designers, front-end developers, and product teams building design systems and web apps who need an efficient accessibility and color workflow. Keywords include accessibility, WCAG checker, contrast ratio, button generator, UI design, color picker, web design tool, productivity, graphics and design.
Screenshots
Recommanded games
Her.AI - Funny Chat Friend
Santa Stickers °
Thrive - Order, Earn, Enjoy!
File Manager - Browser
Email - Email Login
ACBL Loop
Sideline - Private 2nd Line
LastLight Pro: Sunset Tracker
Instapot app
Drill and Tap Tool - Thread Tapping & Through Hole
Unlockt - Sell your files
Skull, Teeth & TMJ
Square Team
ADML-Bright Corridor Ledger
Capo
How to use:
1. Download and open the app, then choose to start a new button or open an existing project. You can optionally sign in to sync presets across devices.
2. Import or pick colors using HEX or RGB values, then set your foreground and background for text, icons, and surfaces.
3. Check contrast results and adjust hues, lightness, and saturation until AA or AAA is achieved, while previewing states in real time.
4. Customize button styles including size, corner radius, borders, shadows, and state behaviors such as hover, active, and disabled. Use color blindness simulation to verify visibility.
5. Export results by copying CSS snippets, downloading SVG or PNG assets, and saving reusable tokens and palettes for future projects.