What is the Contrast Checker?
The Contrast Checker is a free online tool that calculates the luminance contrast ratio between text (foreground) and background colors using the WCAG (Web Content Accessibility Guidelines) formula, then instantly judges AA and AAA compliance for both normal and large text. Low-contrast color pairs make text hard to read not only for low-vision and color-blind users, but also for anyone viewing a screen in bright sunlight.
Unlike the simple contrast readout in a color code converter, this tool is built for accessibility certification and design QA. In one screen it provides pass/fail badges per normal and large text, color blindness simulation including red-green deficiencies, a live sample-text preview, and automatic suggestions for the nearest passing color when you fall short. No sign-up or installation — use it right in your browser.
Key Features
Real-time ratio calculation
Enter HEX/RGB or use the color picker, and the WCAG relative-luminance contrast ratio (e.g. 4.5:1) appears instantly.
AA/AAA verdicts
Pass or fail is shown at a glance with color-and-icon badges for normal text, large text, and non-text UI elements.
Color blindness simulation & preview
Remaps colors for protanopia, deuteranopia, and tritanopia, and shows a live sample-text preview so you can judge readability with your eyes.
Automatic accessible color suggestion
When colors fail, it adjusts only lightness while keeping the hue, suggests the nearest text color that meets AA/AAA, and applies it in one click.
How to Use
- Enter the text color — type the foreground (text) color as a HEX code or pick it with the color picker.
- Enter the background color — type the background color as a HEX code or pick it with the color picker.
rgb(...)notation is also recognized. - Check the ratio and grade — review the live contrast ratio and the AA/AAA pass-fail badges for normal and large text.
- Preview & simulate — use the sample text preview to judge readability and toggle color blindness simulation to check the color-vision-deficient view.
- Apply an accessible color — if colors fail, apply a suggested passing color or copy its HEX code, and use the share link to pass the result along.
When to Use It
Web & app accessibility QA
Confirm before launch that the text, button, and link colors in your design meet WCAG AA/AAA.
Design system color decisions
Quickly verify which text colors pass readability standards when pairing brand colors against different backgrounds.
Public & financial service compliance
Check contrast page by page while preparing for accessibility certification (WCAG/KWCAG).
Marketing & content readability
Raise contrast so text on banners, thumbnails, and slides doesn't get lost in the background, improving click-through and legibility.
Frequently Asked Questions
How is the WCAG contrast ratio calculated?
Each color's sRGB channels are linearized, weighted (R 0.2126, G 0.7152, B 0.0722) to get its relative luminance, then the ratio is computed as (lighter luminance + 0.05) / (darker luminance + 0.05). Results range from 1:1 to 21:1. This tool implements the WCAG 2.1 formula exactly.
What is the difference between AA and AAA?
They are WCAG conformance levels. AA is the recommended minimum; AAA is the stricter enhanced level. Normal text needs AA 4.5:1 / AAA 7:1, while large text (18pt or 14pt bold and above) needs AA 3:1 / AAA 4.5:1. Most websites and apps target AA, while public services and high-contrast needs aim for AAA.
What exactly counts as 'large text'?
In WCAG, large text means roughly 18pt (24px) or larger at normal weight, or 14pt (about 18.66px) or larger in bold. Larger shapes are easier to recognize, so a lower ratio (AA 3:1) is enough. Apply the normal-text criteria to small body type.
Is the color blindness simulation accurate?
It applies widely used LMS transformation matrices for protanopia, deuteranopia, and tritanopia. It cannot perfectly reproduce every individual's vision, but it is very useful for spotting whether color-only distinctions become hard to tell apart. Don't rely on color alone — pair it with icons, underlines, or labels.
How are accessible color suggestions generated?
We keep the text color's hue and saturation as intact as possible and adjust only its lightness up or down, finding the nearest lightness where the contrast with the current background first meets the target (AA 4.5:1, AAA 7:1). This satisfies accessibility without drastically changing the original color feel.
Are my colors sent to a server?
No. All ratio calculations, simulations, and suggestions run 100% in your browser and are never sent to a server. Recently used colors are stored only in your browser's localStorage for convenience, and share links carry color codes in the URL query, so they only leave your device when you copy and share them yourself.
Privacy Notice
The colors you enter and all ratio calculations, simulations, and suggestions are processed 100% inside your browser and are never sent to any server. Recently used colors are stored only in your browser's localStorage for convenience and can be cleared anytime by clearing browser data; share links only carry color information when you copy and send them yourself.