Loading
Loading the requested page, scan view, dashboard, report, or account area.
WCAGWatch
Automated monitoring for common WCAG-related accessibility issues, reports, scan history, and website maintenance workflows.
Accessibility Fix Guide
Use this guide to find weak color pairs, update shared styles, and re-scan the page after the fix.
Problem Areas
Fix Process
Identify the text, link, button, label, badge, or overlay flagged in the scan.
Confirm the final foreground and background colors, especially on images, gradients, and cards.
Darken text, adjust the background, use a stronger button color, or add an overlay.
Run another scan after the CSS change and check the affected component again.
Examples
Gray copy can be too close to a white background.
.body-copy { color: #b8b8b8; background: #ffffff; }.body-copy { color: #334155; background: #ffffff; }The button may look active while the label is hard to read.
.cta-button { color: #ffffff; background: #9ec5fe; }.cta-button { color: #ffffff; background: #1d4ed8; }Mixed light and dark image areas can reduce contrast.
.hero-title { color: #ffffff; }.hero::before { background: rgba(15, 23, 42, 0.65); } .hero-title { color: #ffffff; }Labels and helper text often become too faint at small sizes.
.form-label { color: #cbd5e1; }.form-label { color: #475569; }Checklist
Check buttons, cards, badges, alerts, forms, and links that repeat across the site.
Interaction states often use separate colors that can fail contrast.
Use a solid container or overlay when text sits on photos, video, or gradients.
Run another scan after brand, campaign, landing page, or component updates.
Durable Fixes
Pair color with text, icons, borders, or labels for status and errors.
Light font weights can be harder to read, even when the color pair passes.
Fix shared button, card, badge, and form styles instead of editing one page at a time.
Keep approved text, background, and button combinations in your design system.
FAQ
Text has low contrast when the text color and background color are too similar.
Increase the difference between the text and background colors, or add a stable overlay behind the text.
No. Headings, links, buttons, labels, banners, and image overlays can also fail contrast.
Check the affected component, make the color change, and re-scan the page.