Check WCAG color contrast compliance. Ensure your colors are accessible for all users.
The quick brown fox jumps over the lazy dog
Small text example for testing readability
The Color Contrast Checker is a free accessibility tool that tests whether your foreground and background color combinations meet WCAG (Web Content Accessibility Guidelines) contrast requirements. Enter any two colors and instantly see the contrast ratio along with pass or fail results for all four WCAG compliance levels. It is an essential tool for web designers, developers, and anyone building accessible digital products that need to serve users of all abilities.
WCAG (Web Content Accessibility Guidelines) is an internationally recognized set of standards published by the W3C that defines how web content should be made accessible to people with disabilities. One of the most important and measurable requirements in WCAG is color contrast — the difference in perceived brightness between a text color and its background. The contrast ratio is a number from 1:1 (identical colors, no contrast) to 21:1 (black text on white background, maximum contrast).
The contrast ratio is calculated using the relative luminance of each color, which is a measure of how much light a color appears to emit. The formula accounts for the non-linear way human eyes perceive brightness — we are more sensitive to changes in dark colors than in light ones. This means that two colors that look very different to the eye may have a lower contrast ratio than expected if they have similar luminance values, which is why relying on visual judgment alone is not sufficient for accessibility compliance.
WCAG 2.1 defines two conformance levels for contrast: AA (the minimum acceptable standard) and AAA (the enhanced standard for the highest level of accessibility). Both levels have different requirements for normal-sized text versus large text, recognizing that larger text is inherently easier to read at lower contrast ratios. Understanding these distinctions is critical for making informed design decisions that balance aesthetics with accessibility requirements.
Approximately 8% of men and 0.5% of women have some form of color vision deficiency, and many more people experience reduced contrast sensitivity due to aging, bright sunlight, or low-quality displays. Designing for sufficient contrast is not just a legal compliance requirement in many jurisdictions — it is a fundamental aspect of inclusive design that improves the experience for all users, not just those with disabilities.
Checking your color contrast takes just seconds with this tool and requires no account or installation.
When choosing text colors, aim for at least a 4.5:1 contrast ratio (WCAG AA) for all body text, and ideally 7:1 (WCAG AAA) for the best readability. Dark text on a light background is generally easier to achieve high contrast ratios with than light text on a dark background, because the luminance difference is more pronounced. If you are designing a dark mode interface, pay extra attention to contrast ratios since it is easy to underestimate how much contrast is lost when switching to dark backgrounds with lighter text.
Do not rely solely on color to convey information. Even if your contrast ratio passes WCAG requirements, users with color blindness may not be able to distinguish between certain color combinations. Always supplement color-coded information with text labels, icons, or patterns. For example, error states should use both a red color and an error icon or text label, not just a color change alone, to ensure the information is accessible to users with red-green color blindness.
Large text (18pt or 14pt bold and above) has a lower contrast requirement because it is inherently more readable at lower contrast ratios. If you are struggling to achieve 4.5:1 for a particular color combination, consider increasing the font size to qualify as "large text" and take advantage of the 3:1 AA requirement. This is a legitimate and commonly used design strategy for decorative headings, pull quotes, or secondary text elements where strict contrast compliance is difficult to achieve with your brand colors.
Webutilbox's Color Contrast Checker provides all four WCAG compliance levels in a single, clean interface. Many online contrast checkers only show the ratio and a single pass/fail result, leaving you to manually look up which level applies to your use case. This tool shows AA Normal, AA Large, AAA Normal, and AAA Large simultaneously, so you always have the complete picture at a glance without needing to cross-reference external documentation.
The live text preview is particularly valuable because it shows you not just the numbers but the actual visual result of your color combination. Seeing sample heading and body text rendered in your chosen colors gives you an immediate intuitive sense of whether the contrast is sufficient, complementing the numerical ratio with real-world context. The swap and random color buttons make it easy to explore alternatives quickly when your initial combination does not meet requirements.
Your privacy is our priority. All processing happens entirely in your browser using JavaScript. No files, data, or inputs are ever uploaded to any server. Everything stays on your device, making this tool completely safe to use with sensitive content.