Other
Contrast Checker
Contrast Checker lets you set a foreground (text) color and a background color, computes the contrast ratio between them in real time, and tells you whether it meets the WCAG (Web Content Accessibility Guidelines) 2.1 / 2.2 accessibility thresholds. The contrast ratio is shown prominently as something like 4.5:1, so this color contrast checker makes the accessibility of a color combination clear at a glance.
Preview
See how normal-size text looks.
How large text looks
UI component exampleWCAG 2.1 / 2.2 results
| Category | AA? | AAA? |
|---|---|---|
| Normal text | Pass4.5:1 | Pass7:1 |
| Large text (18pt / 14pt bold and above) | Pass3:1 | Pass4.5:1 |
| UI components and graphics | Pass3:1 | Not specified |
Color vision deficiency simulation?
This is an approximation based on the Brettel 1997 method and does not guarantee how individuals actually perceive the colors.
Every calculation runs entirely in your browser, and the colors you enter are never sent to any server.
Related Tools
QR Code Generator
Create QR codes for URLs, Wi-Fi, email, SMS, phone, contacts, geo, and events. Pick size, color, and logo. They never expire. Runs entirely in your browser.
Random Picker
Randomly pick 1–N entries from a name list or number range, with no-duplicate mode, reel animation, and saved history. Runs entirely in your browser.
Pomodoro Timer
A free online Pomodoro timer with 25/5 focus and break cycles, circular progress, alarms, full-screen, and a pop-out window. Runs entirely in your browser.
Color Picker
Pick colors from an image and get the HEX, RGB, or HSL code. Zoom in with the loupe for pixel-level accuracy and export your palette. Free, no signup.
Color Code Converter
Convert color codes between HEX, RGB, HSL, HSV, and OKLCH, with alpha and a CMYK reference. Copy any format in one click. Runs entirely in your browser.
Unit Converter
Convert length, weight, temperature, area, volume, and speed — cm to inches, Celsius to Fahrenheit, kg to lbs, and more. Runs entirely in your browser.
About Contrast Checker
Contrast Checker lets you set a foreground (text) color and a background color, computes the contrast ratio between them in real time, and tells you whether it meets the WCAG (Web Content Accessibility Guidelines) 2.1 / 2.2 accessibility thresholds. The contrast ratio is shown prominently as something like 4.5:1, so this color contrast checker makes the accessibility of a color combination clear at a glance.
You can set each color by typing a HEX code, picking one from the color picker, or, in supported browsers, sampling a color directly from the screen with the eyedropper (EyeDropper API). Results are shown for three categories — "normal text", "large text" (18pt / 14pt bold and above), and "UI components and graphics" — with pass/fail status for both AA and AAA. The thresholds are 4.5 (AA) and 7 (AAA) for normal text, 3 (AA) for large text, and 3 for UI components.
When a combination falls short, the tool automatically suggests the closest passing color by adjusting lightness, and you can apply it with one click. The color vision deficiency simulation shows how the colors appear under protanopia, deuteranopia, and tritanopia side by side, and the APCA Lc value (a perception-based metric expected to be adopted in WCAG 3.0) is listed for reference. A live preview shows how your chosen combination actually looks.
Every calculation runs entirely in your browser, and the colors you enter are never sent to any server. No account is required, and you can start right away.
How to use
- Set the foreground (text) color and the background color by typing a HEX code, using the color picker, or sampling with the eyedropper.
- The contrast ratio is calculated automatically and shown prominently.
- Check the AA and AAA pass/fail status for the three WCAG categories: normal text, large text, and UI components.
- If a combination falls short, click a suggested passing color to apply it to the foreground or background.
- Confirm the result in the preview, and compare how the colors appear under protanopia, deuteranopia, and tritanopia in the color vision deficiency simulation.
- Use the swap button to flip the foreground and background colors when needed.
Use cases
- Creators verifying that the text and background colors of a website or app meet WCAG accessibility thresholds.
- Designers checking whether a design comp's colors reach a contrast ratio of 4.5:1 before launch.
- Front-end engineers confirming that UI components such as buttons and icons meet 3:1.
- Users testing with simulation whether a color combination stays distinguishable for people with color vision deficiency.
- Users quickly adjusting a failing combination to a passing color while keeping the hue close to the original.
- Users evaluating color accessibility while also referring to newer metrics such as APCA.
Notes
- The contrast ratio follows the WCAG 2.x definition, computed from relative luminance as (L1+0.05)/(L2+0.05). The thresholds are AA 4.5 / AAA 7 for normal text, AA 3 / AAA 4.5 for large text, and 3 for UI components and graphics.
- "Large text" means 18pt (about 24px) and above, or 14pt (about 18.66px) and above when bold.
- UI components and graphics are covered by WCAG 1.4.11, which specifies only 3:1 and defines no AAA threshold (the table shows "Not specified").
- APCA (Advanced Perceptual Contrast Algorithm) is a metric referenced in the WCAG 3.0 draft; this tool lists it as a reference value (Lc). Use the WCAG 2.x ratio for the official pass/fail decision.
- The color vision deficiency simulation is an approximation based on the Brettel 1997 method, computed at maximum severity (dichromacy). Actual perception varies between individuals, and this is not a guarantee.
- Every calculation runs entirely in your browser, and the colors you enter are never sent anywhere.