Check the color contrast ratio between your text and background colors to make sure your website meets WCAG accessibility guidelines. Pick or type your colors below and get instant results for AA and AAA compliance.
Large Text Sample (24px+)
Normal text sample (16px) for checking readability.
If you've ever squinted at a website because the text was too light against the background, you already know why color contrast matters. Good contrast isn't just a design preference — it directly affects whether people can actually read what you've written. For users with low vision, color blindness, or anyone reading on a phone screen in bright sunlight, poor contrast can make a website practically unusable.
This is also why color contrast is one of the core requirements in the Web Content Accessibility Guidelines (WCAG), the standard that most accessibility laws and audits are based on. Whether you're a designer, developer, blogger, or small business owner building your own site, checking your contrast ratios before you publish can save you from accessibility complaints, lost visitors, and a poor user experience overall.
Our tool calculates the contrast ratio between two colors using the same formula defined in the WCAG 2.1 guidelines. Simply choose a text color and a background color using the color pickers, or type in the exact hex codes if you already know them. The preview box updates instantly so you can see how your text will actually look, and the ratio is calculated in real time.
Below the preview, you'll see whether your color combination passes or fails four key accessibility benchmarks: AA for normal text, AA for large text, AAA for normal text, and AAA for large text. AA is generally considered the minimum standard for most websites, while AAA is a stricter level often required for government sites or content aimed at users with significant visual impairments.
A contrast ratio of at least 4.5:1 is recommended for normal-sized text, while larger text (typically 18pt bold or 24pt regular and above) can pass with a ratio of 3:1. If your brand colors don't naturally hit these numbers, try darkening your text color slightly or lightening your background — even small adjustments can make a big difference without changing your overall color scheme dramatically.
It's also worth testing your most commonly used text and background pairs across your entire site, not just your homepage. Buttons, links, footer text, and form labels are often overlooked but are just as important for readability. Running each combination through this checker only takes a few seconds and can help you catch issues before they affect real visitors.
A ratio of 4.5:1 or higher is recommended for normal text to meet WCAG AA standards, which is the most commonly required level for accessibility compliance. Large text can pass with a slightly lower ratio of 3:1.
AA is the standard level most websites aim for and requires a 4.5:1 ratio for normal text. AAA is a stricter level that requires a 7:1 ratio for normal text and is often used for content targeted at users with low vision.
While contrast isn't a direct ranking factor, it impacts accessibility and user experience, both of which influence how long visitors stay on your page and how search engines evaluate your site's overall quality.
Try adjusting the lightness of either your text or background color slightly. Even small changes, like darkening gray text from a light shade to a medium shade, can push a failing combination into a passing range.
Yes, this tool is completely free and works directly in your browser. There's no sign-up required, and you can check as many color combinations as you need.