Color Contrast Checker

WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for normal text (smaller than 18pt or 14pt bold) and 3:1 for large text (18pt / 24px and above, or 14pt / 19px bold and above). UI components and graphical objects also require a minimum 3:1 ratio. These thresholds ensure that text is readable for users with moderately low vision (approximately 20/40 acuity) without assistive technology.

WCAG AA is the minimum legal requirement for most regulations (ADA, EAA, EN 301 549) and requires 4.5:1 for normal text and 3:1 for large text. WCAG AAA is the enhanced level requiring 7:1 for normal text and 4.5:1 for large text — it provides the highest readability for users with more severe vision impairments. While AAA is recommended for critical content (government, healthcare, banking), full AAA compliance across an entire site is extremely difficult and not required by most regulations.

This tool evaluates opaque colors. For semi-transparent text or backgrounds, the effective contrast depends on the layers behind the transparent color. To check contrast with transparency, composite the transparent color onto the actual background first (blend the alpha manually), then enter the resulting opaque color into this tool. For example, rgba(0, 0, 0, 0.7) on a white background composites to approximately rgb(77, 77, 77).

Yes. WCAG contrast ratios are based on relative luminance and apply to any visual medium — web, iOS, Android, desktop apps, PDF documents, and even printed materials. The same 4.5:1 and 7:1 thresholds apply regardless of the platform. For mobile apps, Apple's Human Interface Guidelines and Google's Material Design both reference WCAG contrast ratios as the baseline for accessible text.

WCAG 2's contrast formula is a simple luminance ratio that doesn't account for how human vision actually works — it can pass low-contrast pairs that are genuinely hard to read and fail combinations that look fine, and it ignores font weight and size beyond a coarse 'large text' threshold. APCA (Accessible Perceptual Contrast Algorithm), being developed for WCAG 3, models perception far more accurately: it's polarity-aware (dark-on-light vs light-on-dark behave differently) and factors in text size and weight. WCAG 2 AA is still the legal standard you must meet today, so use this checker for compliance — but if a pairing passes yet looks hard to read, trust your eyes and tighten it; APCA explains why the formula and reality sometimes diverge.

Yes. WCAG 2.1 added Success Criterion 1.4.11 (Non-text Contrast), which requires a minimum 3:1 ratio for UI components and meaningful graphics against their adjacent colors. That means the border of a text input, the outline of a button, the bars of a chart, toggle states, and icons that convey information all need at least 3:1 — not just body text. A common failure is a subtle gray form border on a white background that looks elegant but is invisible to low-vision users. Focus indicators are especially important: the visible focus ring must also meet 3:1 against the background so keyboard users can see where they are.