Touch Counter Widget Builder
Configure labels, controls, and appearance.
Tap, click or press Space to keep count.
Tap anywhere inside or press Space
How the Touch Counter Widget Builder Works
The Touch Counter Widget Builder lets you configure a counter's labels, buttons, step values, colors and layout in a live preview, then save or embed the result.
- Choose a layout: Pick single counter, plus and minus, multi-button or grid.
- Set labels and steps: Name each button and set its step, such as +1 or +12.
- Style the widget: Choose colors, font size and corner radius.
- Save or export: Save the setup, copy embed code or share a link.
Touch Counter Widget Builder Formula
The Touch Counter Widget Builder contrast ratio equals the lighter color's relative luminance plus 0.05, divided by the darker color's relative luminance plus 0.05. The builder warns when a color pair falls below 4.5:1.
- L_light
- Relative luminance of the lighter color, 0 to 1
- L_dark
- Relative luminance of the darker color, 0 to 1
Example: White text (L = 1.0) on a dark gray button (L = 0.05) gives (1.05) ÷ (0.10) = 10.5:1, which passes.
Touch Counter Widget Builder Reference Table
The Touch Counter Widget Builder conversion table lists Web Content Accessibility Guidelines (WCAG) contrast targets for widget text and controls.
| Element | Minimum ratio (AA) | Enhanced ratio (AAA) | Example pass |
|---|---|---|---|
| Normal text under 24 px | 4.5:1 | 7:1 | White on #333333 (12.6:1) |
| Large text 24 px+ or 18.7 px bold | 3:1 | 4.5:1 | White on #767676 (4.5:1) |
| Button borders and icons | 3:1 | — | #949494 on white (3.0:1) |
| Disabled controls | None | None | Any |
About the Touch Counter Widget Builder
A Touch Counter Widget Builder is a no-code editor for designing custom counter widgets. The builder turns a general counter into one that fits a specific task.
Readable widgets need enough color contrast. WCAG 2.2 sets a minimum of 4.5:1 for normal text and 3:1 for large text and control borders, and the builder checks each color pair against these values.
Ways to Use the Touch Counter Widget Builder
There are 5 main uses of the Touch Counter Widget Builder, including custom survey counters and branded event counters.
- Custom survey counters: Researchers build buttons that match survey categories.
- Branded event counters: Venues match the counter to brand colors.
- Accessible counters: Teams build high-contrast, large-button counters.
- Classroom tools: Teachers build answer counters for lessons.
- Prototype testing: Designers test counter layouts with users.
Tool Details
- Category
- Tally & Calculation
- Controls
- Taps and keys
- Input Support
- Touch, Pen, Mouse, Keys
- Offline Ready
- On your device