How to Use the Color Contrast Ratio Calculator
WCAG (Web Content Accessibility Guidelines) sets minimum contrast ratio requirements between text and background colors so that people with low vision can read your content comfortably. Poor contrast can strain anyone's eyes, not just users with visual impairments.
Enter the HEX codes for your foreground (usually text) and background colors, and this tool calculates the relative luminance of each color to determine the contrast ratio. It then checks that ratio against the WCAG 2.1 AA and AAA thresholds — 4.5:1 and 7:1 for normal text, 3:1 and 4.5:1 for large text.
As a rule of thumb, body text should meet at least AA (4.5:1), while accessibility-critical sites like government or banking services often aim for AAA (7:1). Use this tool to check button colors, link colors, and form labels during the design phase before you ship.
Frequently Asked Questions
Most websites treat WCAG AA (at least 4.5:1 for normal text) as the minimum standard. Accessibility-critical services like government, banking, or healthcare sites often aim for the stricter AAA level (7:1 or higher).
Large text — 18pt (about 24px) or larger, or 14pt bold — is easier to read than small text even at lower contrast, so WCAG applies a relaxed threshold (3:1 for AA, 4.5:1 for AAA) for it.