Free WCAG 2.1 color contrast checker. Test foreground/background pairs for AA (4.5:1) and AAA (7:1) compliance. Hex, RGB, HSL input, live preview, and accessible color suggestions.
Discover our collection of free online tools for developers, designers, and power users
Foreground (Text)
RGB: 30, 41, 59
HSL: 217°, 33%, 17%
Background
RGB: 255, 255, 255
HSL: 0°, 0%, 100%
Normal text (14px) — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Large text (18pt / 24px) — Heading example
Bold large text (14pt bold / ~18.67px bold) — Also counts as large text
14.63:1
Contrast Ratio
| Context | Threshold | WCAG AA | WCAG AAA |
|---|---|---|---|
| Normal Text | ≥4.5:1 / ≥7:1 | ✓ Pass | ✓ Pass |
| Large Text (18pt+ or 14pt bold) | ≥3:1 / ≥4.5:1 | ✓ Pass | ✓ Pass |
| UI Components | ≥3:1 | ✓ Pass | — |
Advertisement
Generate harmonious color schemes using color theory. Includes complementary, analogous, triadic, and more.
🎨 Open Color Palette →Advertisement
WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold). UI components and graphical elements also require 3:1. AA is the legally mandated level in most countries including under the ADA (US), EN 301 549 (EU), and AODA (Canada).
WCAG AA is the standard required for legal compliance. WCAG AAA is the enhanced level — 7:1 for normal text and 4.5:1 for large text. AAA is recommended for critical content like medical or legal documents but is not legally required in most jurisdictions.
WCAG defines large text as at least 18pt (approximately 24px) in regular weight, or at least 14pt (approximately 18.67px) in bold weight. Large text has a lower contrast requirement: 3:1 for AA instead of 4.5:1.
Using the WCAG relative luminance formula. Each RGB channel is linearised, then combined as L = 0.2126R + 0.7152G + 0.0722B. The ratio is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter colour. Maximum ratio is 21:1 (pure black on pure white).
WCAG 1.4.3 applies to text and images of text. Decorative backgrounds with no text do not need to meet contrast requirements. However, text overlaid on gradients or patterned backgrounds must be checked at the point of lowest contrast.