Color Contrast Checker
Check WCAG color contrast ratios between foreground and background colors. See live preview at multiple text sizes with AA/AAA pass/fail status. Auto-adjust to the nearest passing value with one click.
Audit a palette
Check every color pair at once — paste up to 8 hex values and see which combinations pass WCAG.
WCAG Color Contrast Guidelines
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between text and background colors to ensure readability for users with visual impairments.
WCAG 2.1 Contrast Requirements
- AA (Normal text) — contrast ratio of at least 4.5:1
- AA (Large text, 18pt+ or 14pt+ bold) — contrast ratio of at least 3:1
- AAA (Normal text) — contrast ratio of at least 7:1
- AAA (Large text) — contrast ratio of at least 4.5:1
Use the auto-adjust buttons to find the nearest passing color value. The tool adjusts lightness while preserving hue and saturation.
Frequently Asked Questions
What is WCAG?
WCAG (Web Content Accessibility Guidelines) is a set of international standards published by the W3C that define how to make web content accessible to people with disabilities. The contrast requirements are among the most commonly tested WCAG criteria because poor contrast affects a large portion of users.
What contrast ratio do I need?
For WCAG AA compliance, you need at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). For AAA compliance, the thresholds are 7:1 for normal text and 4.5:1 for large text. Use the auto-adjust buttons to find the nearest passing value automatically.
How is contrast ratio calculated?
Contrast ratio is calculated using the relative luminance of the two colors. The formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker color's. Luminance is derived from the sRGB color space using a gamma-corrected transformation of the RGB values.
What is the difference between AA and AAA?
AA is the standard compliance level required for most accessibility regulations, including the ADA and Section 508. AAA is a stricter level that provides enhanced accessibility but is not required for most sites. AAA is difficult to achieve with some color combinations, particularly those using mid-tone colors.
Color Theory Poster
A printed reference guide covering color wheels, harmonies, and color systems.
Copyright Notice
Please consider purchasing my work, thank you.