Color Contrast Checker
Check WCAG 2.1 color contrast ratio between foreground and background. Get AA/AAA pass/fail for text, large text, and UI components.
Sample Text Aa
The quick brown fox jumps over the lazy dog.
Contrast Ratio
21.00:1
WCAG Level
AAA
WCAG 2.1 Compliance
Color Contrast Checker कसरी प्रयोग गर्ने
- 1
Enter your foreground (text) color as a hex, rgb, or hsl value — or use the color picker.
- 2
Enter your background color.
- 3
View the contrast ratio and WCAG AA/AAA pass/fail badges instantly.
- 4
Use the live preview to see how your text looks on the background.
- 5
Try the preset pairs or use the Swap button to reverse foreground and background.
Color Contrast Checker बारेमा
The Color Contrast Checker calculates the contrast ratio between any two colors and checks them against WCAG 2.1 accessibility standards. Building accessible websites requires ensuring sufficient contrast between text and its background so that people with low vision or color blindness can read your content.
WCAG 2.1 Standards
AA (minimum): Normal text requires 4.5:1, large text (18pt+ or 14pt bold+) requires 3:1, UI components require 3:1. AAA (enhanced): Normal text requires 7:1, large text requires 4.5:1.
How Contrast Ratio is Calculated
Contrast ratio = (L1 + 0.05) ÷ (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. Luminance is computed from the sRGB values using the WCAG formula.
Input Formats
Accepts hex codes (#1d4ed8), rgb() values, and hsl() values for both foreground and background colors. Use the native color picker for visual selection.