A contrast checker evaluates the luminance difference between text (foreground) and its background color, calculating a numerical contrast ratio. This ratio determines whether your content meets WCAG accessibility standards. Sufficient contrast is critical for the 1 in 12 men and 1 in 200 women with some form of color vision deficiency, as well as for users in challenging viewing conditions like direct sunlight or dim screens. This tool lets you see the actual rendered paragraph — not just abstract numbers — so you can judge real-world legibility instantly.

AA (Minimum): The baseline accessibility standard. Normal text requires a contrast ratio of at least 4.5:1, while large text (18pt+ or 14pt+ bold) requires 3:1.

AAA (Enhanced): A stricter level for optimal accessibility. Normal text requires 7:1, and large text requires 4.5:1. Achieving AAA for body text often means using very dark text on white or very light text on black. AAA is recommended for sites serving elderly users or those with significant visual impairments.

WCAG defines large text as 18pt (approximately 24px) or larger, OR 14pt (approximately 18.67px) or larger when bold. In this tool, the preview heading at ~24px qualifies as large text, while the body paragraph at ~16px is considered normal text. The caption at ~13px falls into the small text category and must meet the stricter normal-text contrast requirements.

This tool follows the WCAG 2.0 relative luminance formula. First, each color's sRGB channel (0–255) is linearized: if the normalized channel value ≤ 0.04045, it's divided by 12.92; otherwise, it's raised to the power of 2.4 after applying the formula ((value + 0.055) / 1.055)²·⁴. Then relative luminance is computed as L = 0.2126×R + 0.7152×G + 0.0722×B. Finally, the contrast ratio is (Lighter + 0.05) / (Darker + 0.05), yielding a value from 1:1 (identical colors) to 21:1 (pure black on pure white).

Yes! All three text areas in the preview panel — heading, body paragraph, and caption — are fully editable. Simply click on any text and start typing. This allows you to paste your own copy, test specific content types, or experiment with different text lengths to see how your color choices perform with real-world content. Click the Reset button to restore the default sample text at any time.

Screen calibration, display technology (OLED vs. LCD vs. IPS), brightness settings, ambient lighting, and even operating system color profiles all affect how colors are perceived. A contrast ratio that passes WCAG on paper may still appear washed out on a poorly calibrated monitor with low brightness. This is why real-sample previewing matters — our tool renders text exactly as it would appear in a browser, giving you a practical sense of legibility beyond just the numerical ratio. Always test your designs on multiple real devices when possible.