Color Contrast Checker
Verify color readability matching WCAG 2.1 specifications. Calculate relative luminance ratios for normal text, large text, and UI icons locally.
Check WCAG 2.1 accessibility compliance for foreground and background colors locally
4.5:1
PASSNormal Text (AA)
Requires contrast ratio ≥ 4.5:1
Normal Text (AAA)
Requires contrast ratio ≥ 7:1
Large Text (AA)
Requires contrast ratio ≥ 3:1 (text size ≥ 18pt)
Large Text (AAA)
Requires contrast ratio ≥ 4.5:1
UI Components & Graphics (AA)
Requires contrast ratio ≥ 3:1
Normal Text (14px/16px)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Large Header Text (18px+)
Quick brown fox jumps over the lazy dog.
How to use this tool
Accessibility Standards
Ensuring design accessibility is required by global standards (such as Section 508 and European EN 301 549). Normal text must maintain a contrast ratio of at least 4.5:1 to pass WCAG AA standards.
Evaluating Color Contrast
Input hex parameters to inspect ratios.
Pick Text Color
Select your foreground text color using the color picker or paste the HEX code (e.g. #7C3AED).
Pick Background Color
Select your background canvas color (e.g. #FFFFFF or #09090B for dark modes).
Inspect Verdicts
Check the compliance list badges to see if your combination passes normal text (AA/AAA) or UI requirements.
Frequently Asked Questions
Standard readability inquiries.
What is WCAG AA vs AAA?
WCAG AA is the standard level of accessibility required for most commercial websites (requiring 4.5:1 ratio for normal text). WCAG AAA represents the highest level of accessibility design (requiring 7:1 ratio for normal text), creating layouts accessible to users with more severe visual impairments.
How is the ratio calculated?
The calculator measures the relative luminance of both colors (normalized from sRGB spaces) and calculates the ratio using: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter relative luminance value and L2 is the darker relative luminance value.
Privacy & Safety Policy
All tools run completely in your browser via client-side JavaScript. We do not upload your files, interest parameters, or JSON payloads to any server. Your data remains yours.