Default
Focusable controls should stay readable in every state.
Accessibility first
Contrast Checker Pro
Practical WCAG 2.1/2.2 checker for text, icon, and border contrast across default, hover, focus, and disabled states. Review AA/AAA results, fix weak pairs, and export production-ready color tokens.
Default
Primary stateHover
InteractionFocus
Keyboard focusDisabled
DisabledAuto-fix low contrast
Pick a state, choose an element, and auto-adjust to the nearest accessible color without changing the visual direction too much.
Live state preview
Use this snapshot to evaluate readability and visual balance before shipping to production.
Hover
Focusable controls should stay readable in every state.
Focus
Focusable controls should stay readable in every state.
Disabled
Focusable controls should stay readable in every state.
WCAG contrast report
Text status uses AA text threshold (4.5:1). Icon and border status use non-text threshold (3:1).
| State | Text ratio | Text AA | Icon ratio | Icon AA | Border ratio | Border AA |
|---|---|---|---|---|---|---|
| Default | 17.06 | Pass | 17.06 | Pass | 9.90 | Pass |
| Hover | 5.17 | Pass | 5.17 | Pass | 1.30 | Fail |
| Focus | 4.10 | Fail | 4.10 | Pass | 1.48 | Fail |
| Disabled | 3.86 | Fail | 3.86 | Pass | 2.08 | Fail |
Default
Text ratio17.06:1Pass
Icon ratio17.06:1Pass
Border ratio9.90:1Pass
Hover
Text ratio5.17:1Pass
Icon ratio5.17:1Pass
Border ratio1.30:1Fail
Focus
Text ratio4.10:1Fail
Icon ratio4.10:1Pass
Border ratio1.48:1Fail
Disabled
Text ratio3.86:1Fail
Icon ratio3.86:1Pass
Border ratio2.08:1Fail
:root {
--color-default-text: #0f172a;
--color-default-icon: #0f172a;
--color-default-border: #334155;
--color-default-bg: #f8fafc;
--color-hover-text: #ffffff;
--color-hover-icon: #ffffff;
--color-hover-border: #1d4ed8;
--color-hover-bg: #2563eb;
--color-focus-text: #ffffff;
--color-focus-icon: #ffffff;
--color-focus-border: #0ea5e9;
--color-focus-bg: #0284c7;
--color-disabled-text: #64748b;
--color-disabled-icon: #64748b;
--color-disabled-border: #94a3b8;
--color-disabled-bg: #e2e8f0;
}
.a11y-button {
color: var(--color-default-text);
background: var(--color-default-bg);
border: 1px solid var(--color-default-border);
}
.a11y-button:hover {
color: var(--color-hover-text);
background: var(--color-hover-bg);
border-color: var(--color-hover-border);
}
.a11y-button:focus-visible {
color: var(--color-focus-text);
background: var(--color-focus-bg);
border-color: var(--color-focus-border);
}
.a11y-button[disabled] {
color: var(--color-disabled-text);
background: var(--color-disabled-bg);
border-color: var(--color-disabled-border);
}WCAG contrast checker: what it does and how to use it
This tool verifies UI color contrast against WCAG thresholds for real component states, not just static mockups. It helps teams detect readability issues in buttons, forms, and status elements before release.
How to use: 1) enter foreground/background colors per state, 2) review the report, 3) auto-fix failing pairs, 4) export CSS/JSON tokens and apply them in your design system.
WCAG contrast checker FAQ
What does this checker validate?
It validates foreground/background contrast for text, icons, and borders across interactive states, using WCAG thresholds (text AA/AAA and non-text 3:1).
How do I run a quick pre-release contrast check?
Fill in state colors, review failing rows, apply auto-fix, and export updated tokens. This is usually enough for a first pass before QA.
Will auto-fix break brand styling?
In most cases, no. Auto-fix prioritizes lightness adjustment, so hue direction and visual identity are generally preserved.
What do I get after fixing contrast?
You get exportable CSS variables and JSON tokens covering all states, ready for design-system and frontend integration.