What the color contrast ratio tells you
A color contrast checker compares the relative luminance of two opaque sRGB colors. Enter the text color and its background as hexadecimal values or use the native color pickers. The calculator linearizes the red, green, and blue channels, weights them for relative luminance, and divides the lighter luminance plus 0.05 by the darker luminance plus 0.05. Swapping the colors preserves the ratio while changing the preview. Results range from 1:1 for identical luminance to 21:1 for black and white. A displayed ratio is rounded for readability, but each pass or fail decision uses the full calculated value.
Different visual elements need different checks. WCAG AA normal text requires at least 4.5:1, while large text uses 3:1. The enhanced AAA threshold for normal text is 7:1; large text has a separate enhanced threshold of 4.5:1. Large text means at least 18 points regular or 14 points bold, approximately 24 CSS pixels or 18.67 CSS pixels respectively. Relevant non-text component information uses a 3:1 comparison with adjacent colors. A button outline passing that test does not establish that the text inside it passes the appropriate text requirement. Use the badge that matches the actual content and presentation.
The live preview deliberately keeps your chosen colors even when the site theme changes. This lets you examine a candidate palette without the surrounding interface replacing the test colors. Check each state separately, including hover, focus, selection, and any alternate theme your product supports. Transparent colors, images, gradients, and composited layers need evaluation against the actual rendered background; this tool accepts only opaque three- or six-digit hex values. Good color contrast is one part of accessibility, alongside meaningful structure, keyboard operation, readable sizing, clear focus indicators, and alternatives to color-only communication. A pair passing here is not a certification of an entire page.
Quick reference table
| Use case | AA minimum | AAA enhanced |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text | 3:1 | 4.5:1 |
| Relevant component information | 3:1 | Not a separate AAA tier |
Further reading: W3C: Understanding Contrast (Minimum).
How to use WCAG Color Contrast Checker
1. Enter your values
Enter a foreground and background hex color, with or without the leading hash, or select them with the color pickers. Short three-digit values expand to their equivalent six-digit colors; alpha-channel notation is not accepted.
2. Compare the result
Inspect the ratio and the separate normal-text, large-text, enhanced, and component badges. Use the actual text size and weight when choosing a target. The calculator applies thresholds before rounding, preventing borderline colors from passing solely because of display formatting.
3. Review before use
Review the sample heading, paragraph, and button, then try a different color or swap foreground and background. Recheck the actual interface in each relevant state and theme; record the chosen color values alongside the applicable accessibility requirement.
Key features and technical specifications
Instant local calculation
Inputs update the result directly in your browser without a processing API or account.
Theme-aware interface
Controls follow the site theme, with explicit labels and readable results on mobile screens.
Apply the result in context
Review the assumptions beside the result, and use consistent input units when comparing scenarios.
Compare alternatives
Change one input at a time to understand which assumptions drive the difference between two scenarios.
Explain the calculation
Use the reference table and examples to connect the displayed output with the underlying rules.
Frequently asked questions
Does swapping the colors change the contrast ratio?
No. The ratio always places the lighter luminance in the numerator. Reversing foreground and background changes their visual roles but leaves the numeric contrast unchanged. Reading comfort and visual emphasis can still differ between the two arrangements.
Why does a displayed 4.50 ratio sometimes fail?
The displayed number is rounded to two decimal places. A calculated value just below 4.5 can display as 4.50 while remaining below the threshold. Pass/fail uses the unrounded value so the presentation does not hide that shortfall.
Can I check transparent colors or gradients?
This version accepts opaque sRGB hex colors only. A transparent foreground must first be composited against its real background. For a gradient or image, evaluate the relevant rendered color pairs, including the area that provides the least contrast.
Is a passing badge a complete accessibility audit?
No. It checks this color pair against one numeric threshold. It does not inspect headings, keyboard navigation, alternative text, reading order, motion, focus behavior, or the real component states elsewhere on your site. Those require additional evaluation.
Are my selected colors uploaded?
The calculation and preview run in your browser, and no color-processing service is contacted. Your selections are temporary page state. Copy color values into your own design notes if you want to keep them after closing or refreshing the page.