How to Use
- Enter foreground/background colors (hex)
e.g.,#0f172a/#ffffff. Contrast is recalculated live. - Set font size/weight
Large text changes thresholds: ≥24px, or ≥18px & weight ≥700. - Click “Suggest nearest pass”
Auto-nudges the foreground toward black/white to hit the nearest compliant ratio. - Check the preview
Verify AA/AAA PASS/FAIL badges on the sample. - Draft alt text
Use the textarea; a live character counter helps (target 80–140 chars).
Output You Get
- Contrast ratio (two-decimal precision)
- WCAG badges
- AA: 4.5:1 (normal) / 3:1 (large)
- AAA: 7:1 (normal) / 4.5:1 (large)
- Nearest-pass foreground color suggestion
- Alt-text draft + length counter
[Completely Free] Utility Tools & Work Support Tools
You can use practical tools like CSV formatting, PDF conversion, and ZIP renaming entirely in your browser, all for free. Each tool page clearly explains “How to use it”, “What the output looks like”, and “Important notes & caveats”, so even first-time users can start without confusion.
Notes & Caveats
- Color input: Supports 3/6-digit hex only. No alpha, gradients, or image-background measurement.
- Large text: ≥24px or ≥18px & 700+ weight.
- Suggestion scope: Adjusts foreground only (toward black/white). If brand color must remain, consider tweaking background instead.
- Don’t forget states: Also test hover/focus/disabled, link vs body text, button borders, and icon-only controls (provide
aria-label). - Alt-text guidance:
- State purpose; skip “image of…”.
- Include meaningful embedded text.
- For UI icons, describe the action (“Open search”).
- Decorative images: use empty
alt="". - Aim 80–140 chars; keep proper nouns accurate.
- Privacy: 100% client-side; no data leaves the browser.
- Compatibility: Modern Chrome/Safari/Firefox recommended.
