Check if your foreground and background colors meet WCAG 2.1 accessibility standards. Shows contrast ratio, AA compliance (4.5:1 normal, 3:1 large text), and AAA compliance (7:1). Includes color picker.
Free, no sign-up — one of the SaaSQuickStart Content & SEO tools.
The contrast ratio is calculated using the WCAG 2.1 algorithm. Each RGB channel is first linearized (gamma-corrected) to get a physical luminance value, then weighted by human eye sensitivity (21.26% red, 71.52% green, 7.22% blue) to produce relative luminance (0 = black, 1 = white). The contrast ratio between two luminances L1 and L2 is (L_lighter + 0.05) / (L_darker + 0.05). The 0.05 offset represents the reflectance of a real display surface. All math runs locally in your browser — no color data is sent anywhere.
AA is the minimum legal standard required in most jurisdictions (US Section 508, EU EN 301 549). It requires 4.5 : 1 for normal text and 3 : 1 for large text. AAA is the enhanced level — 7 : 1 for normal text and 4.5 : 1 for large text — and is recommended for maximum accessibility but not legally required in most cases.
WCAG defines large text as 18pt (24px) or larger for regular weight, or 14pt (approximately 18.67px) or larger for bold text. Large text has a more relaxed contrast requirement (3 : 1 for AA) because it is easier to read at lower contrast.
Yes — placeholder text must also meet the minimum contrast ratio. Placeholder text is often styled at a lower opacity or lighter color and frequently fails WCAG AA. Check your input placeholders with this tool using the actual rendered hex color.
For text on a brand background, try darkening the background slightly rather than changing the text color — a small shift in background luminance often achieves a passing ratio while the color still reads as the same brand hue. Alternatively, add a semi-transparent overlay between the background and the text to artificially increase contrast without altering the base color.