🎯 Color Contrast Checker
Check if your text and background colors meet WCAG 2.1 contrast requirements. Enter any two colors — get instant AA/AAA pass/fail results for normal and large text.
📋 When to Use the Color Contrast Checker
Web developers and designers use the Color Contrast Checker to verify that text meets WCAG accessibility standards before deploying. Check button text against backgrounds, heading colors against page backgrounds, or link colors against surrounding text. ⚠️ This tool calculates mathematical contrast ratios — it does not analyze images, read CSS from URLs, or suggest replacement colors.
⚙️ How the Color Contrast Checker Works
The tool computes contrast ratio using the WCAG 2.1 relative luminance formula. Each color's red, green, and blue channels are linearized (sRGB gamma correction), then combined with perceptual weights: L = 0.2126×R + 0.7152×G + 0.0722×B. The contrast ratio is (L_lighter + 0.05) / (L_darker + 0.05). Results are compared against WCAG thresholds: 4.5:1 for AA normal text, 7:1 for AAA, 3:1 for large text and UI components. All computation uses client-side JavaScript — nothing is transmitted.
How to Use the Color Contrast Checker
- Pick your foreground color — Use the color picker or type a hex code (e.g., #333333) for your text color.
- Pick your background color — Select the background color behind your text (e.g., #FFFFFF for white).
- View the contrast ratio — The ratio appears instantly (e.g., 5.2:1) with a visual preview of your colors.
- Check compliance — See pass/fail badges for AA and AAA at both normal and large text sizes.
Frequently Asked Questions
What's a good contrast ratio?
WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1 respectively. Higher ratios = better readability for users with visual impairments. For UI components like buttons and form borders, 3:1 is sufficient.
What counts as large text?
WCAG defines large text as 18 point (24px) or larger, OR 14 point (18.67px) bold. If your text meets either threshold, the relaxed 3:1 AA ratio applies instead of 4.5:1.
Can I check colors from a website?
No. This tool does not read colors from URLs or analyze screenshots. Enter colors manually using the color picker or hex codes. This is a mathematical calculator, not an automated scanner.
How accurate is the contrast calculation?
100% accurate per the WCAG 2.1 specification. The formula uses the official sRGB linearization and relative luminance weights defined by W3C. This is the same math used by Google Lighthouse, axe-core, and WAVE accessibility checkers.
Does this check non-text contrast?
Yes. The tool also shows a UI Component pass/fail using the 3:1 threshold. This applies to buttons, form borders, icons, and other interactive elements — but NOT to decorative elements or logos.
What if my colors fail?
The tool reports pass/fail only — it does NOT suggest replacement colors. To find accessible palettes, try our Color Palette Generator. To understand how your colors appear to users with color vision deficiencies, use our Color Blindness Simulator.