Color Contrast Checker Guide
Web accessibility guidelines specify exact numeric contrast ratios that text must meet against its background in order to remain legible for people with low vision or color vision deficiencies, but very few designers or developers can look at two colors and accurately estimate that ratio by eye. A pairing that looks perfectly readable on a bright monitor in a well-lit room can fail the WCAG threshold outright, and the only way to know for certain is to actually calculate the ratio using the same formula the guidelines define.
This tool takes a text color and a background color and computes the exact contrast ratio between them using the WCAG relative luminance formula, then reports whether that ratio clears the thresholds for AA compliance (4.5:1 for normal text, 3:1 for large text) and the stricter AAA compliance (7:1 for normal text, 4.5:1 for large text). The result updates immediately as you adjust either color, which makes it possible to treat compliance as a constraint you design within rather than a check you run only after a design is finished, catching problems while they are still cheap to fix.
Beyond the pass-or-fail result, the tool typically renders a live preview of sample text in your chosen colors, so you can see for yourself what a borderline ratio actually looks like rendered on screen, not just as an abstract number. This is particularly useful for colors that sit close to a threshold, where the difference between passing and failing AA might come down to a barely perceptible shift in lightness — seeing the rendered text alongside the number helps confirm the result actually matches what a real user would experience.
Running this check entirely in your browser means you can test brand colors, design system tokens, or in-progress UI mockups without sending any of that information to a server, which matters when the colors in question belong to an unreleased product or a client's still-confidential branding. The calculation itself is pure math performed on the RGB values you provide, so there's nothing to upload in the first place.
How to check color contrast for accessibility
- Enter your text color. Input the exact color you plan to use for text, either by typing a hex code, selecting it from a color picker, or entering RGB or HSL values directly. Getting this color exactly right matters because even a small shift in lightness can move a pairing from passing to failing a given threshold, so it is worth copying the precise value from your design file or stylesheet rather than approximating it visually, especially for colors that are already close to a compliance boundary. If you are testing a value already used in production code, copy it directly from the source rather than retyping it from memory, since a small transcription error can silently produce a misleading result.
- Enter your background color. Input the background color the text will actually be displayed against, using the same input method as the text color. If your design uses a gradient or an image behind the text rather than a flat color, choose the most representative or most problematic point in that background — typically the lightest area behind dark text or the darkest area behind light text — since contrast checking tools calculate against a single flat color and a gradient can otherwise hide a contrast failure at one of its extremes. Checking the worst-case point in a gradient rather than its average ensures the pairing holds up everywhere the text might appear, not just in the most favorable spot.
- Review the calculated contrast ratio. Once both colors are entered, the tool calculates and displays the precise contrast ratio between them, typically shown as a number like 4.8:1. This number is the actual figure WCAG guidelines reference, calculated from the relative luminance of each color rather than estimated, so it is the authoritative answer to whether your specific pairing is compliant, removing any guesswork about whether a color combination that looks fine is actually fine by the accessibility standard that matters.
- Check pass or fail status for AA and AAA. Look at how the calculated ratio compares against the relevant thresholds for your use case: 4.5:1 for AA on normal text, 3:1 for AA on large text, and the stricter 7:1 and 4.5:1 thresholds for AAA compliance. Most projects target AA as the baseline requirement, with AAA reserved for content where accessibility is an especially high priority, so check which standard your project actually needs to meet before deciding whether your current color pairing is good enough or needs adjustment.
- Adjust colors until the pairing passes. If your pairing fails the threshold you need, adjust either the text color or the background color — typically by darkening light text or lightening a light background, or the reverse for dark combinations — and watch the ratio recalculate in real time until it clears the required threshold. Making small, incremental adjustments to lightness while watching the live ratio update is usually faster than guessing a completely new color combination, since it lets you find the smallest change needed to pass without abandoning your original color choice entirely. Once you find a passing value, update the corresponding color token or stylesheet variable directly, so the fix is applied consistently everywhere that color is reused rather than only in the one spot you happened to be checking.
Use Cases
- Validating a brand color against white text: Check whether a brand's primary color provides enough contrast for white text used in buttons or banners.
- Auditing an existing website for accessibility: Test the actual text and background colors used across a site to confirm they meet WCAG AA requirements.
- Choosing link colors that remain readable: Verify that a link color stands out with sufficient contrast against both the page background and surrounding body text.
- Designing dark mode color schemes: Check contrast ratios for a dark theme palette, since dark backgrounds often require different lightness adjustments than light themes.
- Preparing for an accessibility compliance review: Verify every text and background color combination in a design system meets AA or AAA thresholds before a formal audit.
- Testing placeholder and disabled text colors: Check whether lighter gray text used for placeholders or disabled states still meets a minimum readable contrast ratio.
About This Tool
What is it? A browser-based tool that calculates the exact WCAG contrast ratio between a text color and a background color and reports whether it passes AA or AAA accessibility thresholds.
Why use it? It replaces visual guesswork with the exact numeric calculation accessibility guidelines actually require, letting you confirm compliance and fix problems before a design ships.
Alternatives: Browser developer tools sometimes include a built-in contrast checker, but it requires inspecting elements one at a time on a live page; design software plugins exist but require installation; this tool checks any color pairing instantly without needing an existing page or file.
Common mistakes: Checking contrast against a single point in a gradient or image background instead of its most extreme value can hide a real failure; another common mistake is assuming a color combination that passes AA for normal text also passes the separate, more lenient threshold for large text, when the two thresholds are evaluated independently based on font size.
Frequently Asked Questions
- What contrast ratio do I need for WCAG AA compliance?
- Normal text needs at least 4.5:1, while large text (generally 18pt or 14pt bold and larger) needs at least 3:1 under WCAG AA.
- How is AAA different from AA?
- AAA is a stricter standard requiring at least 7:1 for normal text and 4.5:1 for large text, intended for content where accessibility is an especially high priority.
- Can I check contrast against a gradient background?
- You should check against the most extreme point of the gradient, since the tool calculates against a single flat color and a gradient can otherwise hide a failure at one end.
- Does this tool upload my brand colors anywhere?
- No, the contrast calculation runs entirely in your browser using the RGB values you provide, so nothing is sent to a server.
- Why does my color combination look readable but still fail the check?
- Perceived readability depends on factors like screen brightness and viewing conditions, while the WCAG ratio is a fixed mathematical calculation, so a pairing can look fine to you while still falling short of the defined numeric threshold.
- Does font size affect the required contrast ratio?
- Yes, large text has a more lenient threshold than normal-size text under both AA and AAA, since larger text remains legible at lower contrast levels.
- Can I use this to test non-text elements like icons?
- The standard contrast formula is designed for text, but the same ratio calculation is also commonly applied to UI components and icons under separate WCAG non-text contrast guidance.
- What is the easiest way to fix a failing color pair?
- Adjusting the lightness of either color, while watching the ratio recalculate live, is usually the fastest way to find a passing combination close to your original colors.