🛝Toolio
All tools

🌗 Color Contrast Checker (WCAG AA / AAA)

Instantly check whether your text and background color pair meets WCAG 2.x AA or AAA accessibility standards — right in your browser, free, with no data ever leaving your device. Pick or type any hex color, see the exact contrast ratio, and get clear pass/fail badges for normal text, large text, and both compliance levels.

Text color
Background color
Contrast Results
—
contrast ratio
Live Preview

About

The WCAG (Web Content Accessibility Guidelines) contrast ratio formula computes relative luminance for each color using the IEC 61966-2-1 sRGB standard, then calculates how much lighter one color is compared to the other. A ratio of 4.5:1 or higher satisfies AA for normal text (16 px), while 7:1 or higher meets AAA. Large text (24 px or 18.67 px bold) has relaxed thresholds: 3:1 for AA and 4.5:1 for AAA. This tool runs the full WCAG 2.x algorithm entirely in your browser — no server, no account, no tracking. Results are stored locally so your last color pair is waiting when you return.

How to use

  1. Pick your text color using the color picker or type a hex code (e.g. #1a2b3c) in the Text color field.
  2. Pick your background color the same way in the Background color field. Use the Swap button to quickly flip the two colors.
  3. Read the contrast ratio displayed in large text and check the four pass/fail badges: AA and AAA for both normal text and large text.
  4. Preview how your text actually looks on the chosen background in the Live Preview section before finalizing your design.

FAQ

Is this WCAG contrast checker free to use?
Yes, completely free with no sign-up, no paywall, and no usage limits. Open the page and start checking colors right away.
Does it work offline or without an internet connection?
Yes. All calculations run entirely in your browser using JavaScript. Once the page has loaded, you can disconnect from the internet and the tool keeps working. No data is sent to any server.
Is my color data private? Does anything get uploaded?
Your colors never leave your browser. No analytics on the colors you enter, no uploads, no third-party sharing. Your last color pair is saved only in your browser's localStorage.
What is the difference between WCAG AA and AAA?
AA is the minimum standard required by most regulations (e.g. ADA, EN 301 549). Normal text needs a 4.5:1 ratio; large text (24 px or bold 18.67 px) needs 3:1. AAA is enhanced accessibility: 7:1 for normal text and 4.5:1 for large text. Aim for at least AA in all production designs.
Can I check colors using 3-digit hex shorthand like #fff?
Yes. The tool accepts both 3-digit shorthand (#rgb) and full 6-digit (#rrggbb) hex codes. Just type or paste your color and the checker expands and validates it automatically.