Check the contrast ratio between foreground and background colors against WCAG 2.1 accessibility guidelines. See pass/fail badges for AA and AAA levels at normal and large text sizes.
Large Text Preview (24px bold)
Normal text preview at 16px. This is how your text will look with these color combinations. Make sure there is enough contrast for readability.
Small text at 12px — harder to read with low contrast.
WCAG defines "large text" as 18pt (24px) regular or 14pt (18.66px) bold. Normal text is anything smaller. AA is the minimum recommended level; AAA is the enhanced level for maximum accessibility.
Pick colors visually and convert between HEX, RGB, HSL, CMYK.
Convert colors between HEX, RGB, HSL, CMYK, and HSB.
Generate harmonious color palettes with multiple modes.
Resize images with custom dimensions, percentage, or social media presets.
Generate favicons from text or emoji instantly.
WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). Level AAA requires 7:1 for normal text and 4.5:1 for large text.
Large text is defined as 18pt (24px) or larger at regular weight, or 14pt (about 18.66px) or larger at bold weight. Everything smaller is considered normal text.
The tool will suggest the closest foreground color that passes AA Normal (4.5:1) by adjusting the lightness. Click Apply to use the suggested color.
The ratio is calculated using the WCAG 2.1 relative luminance formula. Each color channel is linearized from sRGB and weighted (0.2126 R + 0.7152 G + 0.0722 B). The ratio is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter luminance.