Accessibility Checker
WCAG 2.2 compliance tools — contrast, focus, touch targets, color blindness simulation.
Color Inputs
Large text = >=18pt (24px) OR >=14pt (18.67px) bold
Current text is classified as: Normal
Auto-suggestion for this background:
Live Preview
Sample heading text
Regular body paragraph. The quick brown fox jumps over the lazy dog. Accessibility matters for all users.
Contrast Ratio
17.06:1
WCAG AA
✓ Pass
≥4.5:1
WCAG AAA
✓ Pass
≥7:1
AA Large Text
✓ Pass
≥3:1
Non-text Contrast (1.4.11) — UI Components
UI contrast: 3.68:1 (Pass ≥3:1)
Generated Accessible CSS
/* Accessible Color Pair */
.text-content {
background-color: #ffffff;
color: #1a1a2e;
/* Contrast ratio: 17.06:1 */
/* WCAG AA: PASS | WCAG AAA: PASS */
}
/* Focus Styles (WCAG 2.4.11 — WCAG 2.2 NEW) */
:focus-visible {
outline: 2px solid #3b82f6;
outline-offset: 2px;
/* Focus contrast: 3.68:1 — PASS */
}
/* Minimum Touch Target (WCAG 2.5.8) */
.interactive-element {
min-width: 44px;
min-height: 44px;
/* Recommended: 44×44px (WCAG AAA / Apple HIG / Material) */
}
/* Text Spacing (WCAG 1.4.12) */
.text-content {
line-height: 1.5; /* ≥ 1.5 times font size */
letter-spacing: 0.12em; /* ≥ 0.12 times font size */
word-spacing: 0.16em; /* ≥ 0.16 times font size */
/* Note: Don't set paragraph spacing in shorthand */
}
/* Non-text Contrast (WCAG 1.4.11) */
.ui-component {
border: 2px solid #3b82f6;
/* UI contrast: 3.68:1 — PASS ≥3:1 */
}