Contrast Checker computes the relative luminance contrast ratio between any two colors and tests it against all four WCAG 2.1 thresholds: AA Normal (4.5:1), AA Large (3:1), AAA Normal (7:1), and AAA Large (4.5:1). A live text preview shows how the combination looks in practice.
Aa
The quick brown fox jumps over the lazy dog.
Small text sample at 14px.
WCAG (Web Content Accessibility Guidelines) is an international standard for web accessibility. Contrast requirements ensure text is readable for users with low vision or color blindness.
WCAG defines large text as 18pt (24px) or larger for regular weight, or 14pt (18.67px) or larger for bold text. Large text has a lower contrast requirement than normal text.
AA is the standard compliance level required by most accessibility laws and guidelines (4.5:1 for normal text, 3:1 for large text). AAA is a stricter, enhanced level (7:1 for normal text, 4.5:1 for large text) recommended for content where readability is critical.
It's based on the relative luminance of both colors, following the WCAG 2.1 formula. The ratio ranges from 1:1 (no contrast, identical colors) to 21:1 (maximum contrast, black on white).
This tool checks luminance contrast ratio, which benefits low-vision users broadly. It doesn't simulate specific color blindness types (e.g. deuteranopia), which depend on hue differences rather than just luminance.
Aim for at least 4.5:1 (WCAG AA) for normal-sized body text. For a more accessible experience, 7:1 (AAA) is recommended where practical.
This tool focuses on text contrast per WCAG 1.4.3/1.4.6. WCAG 1.4.11 covers non-text contrast (UI components, graphics) with a lower 3:1 threshold, which this tool's text-focused ratios can still inform.
