Visual Hierarchy
The quick brown fox jumps over the lazy dog. Legibility is critical for universal accessibility and rigorous design systems.
Check color contrast ratios instantly and verify WCAG 2.1 compliance. Paste any two colors to see if they pass AA or AAA standards for normal text, large text, and UI components. Get auto-fix suggestions when your colors don't meet accessibility requirements.
Test against AA (4.5:1 for normal text, 3:1 for large text) and AAA (7:1 / 4.5:1) standards. See pass/fail status at a glance.
When contrast fails, get suggested color adjustments that maintain your design intent while meeting accessibility standards.
See how your text actually looks on your background color. Preview normal text, large text, and UI elements in real time.
Input colors as HEX, RGB, or HSL. The checker handles conversion automatically so you can work in your preferred format.
For WCAG AA: normal text needs at least 4.5:1, large text (18pt or 14pt bold) needs at least 3:1, and non-text UI components need at least 3:1.
AAA is a stricter standard: 7:1 for normal text and 4.5:1 for large text. Most design systems target AA as the minimum, with AAA as an aspirational goal.
No. WCAG 2.1 also requires 3:1 contrast for UI components (buttons, input borders, icons) and graphical objects that convey meaning.
About 8% of men and 0.5% of women have some form of color vision deficiency. Good contrast ensures your content is readable for everyone, including people with low vision, in bright sunlight, or on low-quality screens.