🎨 WCAG Color Contrast Checker
Check text and background color contrast ratios for WCAG AA and AAA accessibility compliance. Real-time preview, score badges, and automated shade suggestions.
Sample Heading Text
This is a sample paragraph demonstrating how regular text and UI elements look under the chosen color contrast configuration.
What are WCAG AA and AAA contrast requirements?
For WCAG AA, normal text requires a minimum contrast ratio of 4.5:1, and large text (at least 18pt or 14pt bold) requires 3:1. For AAA compliance, normal text requires 7:1 and large text requires 4.5:1.
How is the color contrast ratio calculated?
The contrast ratio is calculated using relative luminance formulas defined by the W3C, measuring the luminance of the lighter color against the darker color on a scale from 1:1 to 21:1.
Is my custom palette or test data uploaded anywhere?
No. All contrast calculations and UI renderings execute 100% locally inside your web browser.
