Color Contrast & Palette Checker (WCAG 2.1)
Calculate WCAG 2.1 AA/AAA contrast ratios between foreground and background colors with live preview and color conversion.
Live Typography Contrast Preview
This paragraph displays regular 16px body copy styled directly with your selected foreground and background colors. Check the WCAG badges below to verify whether this color combination meets accessibility requirements for government and enterprise sites.
How to Use Color Contrast & Palette Checker (WCAG 2.1)
1. Pick Text & Background Colors
Enter HEX values or use the color pickers to select your foreground text and surface background.
2. Calculate WCAG 2.1 Contrast Ratio
Computes the precise luminance contrast ratio according to official accessibility formulas.
3. Check AA & AAA Pass/Fail Badges
Review immediate compliance status for normal body text, large headings, and UI interface components.
How This Utility Works
Ensure accessibility compliance for your web applications. Tests color contrast against Web Content Accessibility Guidelines (WCAG 2.1) standards for normal text, large text, and UI components. Includes HEX, RGB, and HSL conversions.
Images, SVG files, and graphics are drawn and manipulated locally on HTML5 Canvas elements. Raw media files are never transferred over the wire.
Frequently Asked Questions
What is the minimum WCAG contrast ratio for normal text?
WCAG Level AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). Level AAA requires 7:1 for normal text.
Does this calculate relative luminance accurately?
Yes, it implements the official W3C sRGB relative luminance formula to calculate exact mathematical contrast ratios.