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
Turn URL / contacts / Wi-Fi / mail / event / geo / SMS / phone / text into a QR code image. Pick size, format, color, and logo. Runs entirely in your browser.
Random Picker
Pick 1–N entries at random from a text list or a number range. No-duplicate mode, reel animation, and saved history supported. Runs entirely in your browser.
Color Picker
Extract color codes from an image. Use the loupe to zoom in and grab pixel-level values, with HEX / RGB / HSL switching and palette export. Runs entirely in your browser.
Color Code Converter
Free color converter for HEX, RGB, HSL, HSV, and OKLCH. Convert hex to rgb and rgb to hex, handle alpha with rgba, 8-digit hex, and hsla, and copy any format with one click. Includes a CMYK reference value. Runs entirely in your browser.
Pomodoro Timer
A free online Pomodoro timer that runs 25-minute focus sessions and 5-minute breaks. A study and work focus timer with circular progress, alarm sounds, full-screen mode, and an always-on-top pop-out. Runs entirely in your browser.
Unit Converter
A free unit converter for length, weight, temperature, area, volume, and more. Convert cm to inches, Celsius to Fahrenheit, kg to pounds, and other units in real time. 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.