Xevon Tools logo
Color & Design
Live

Contrast Checker

Verify text/background contrast ratios against WCAG AA and AAA.

Verify text/background contrast ratios against WCAG AA and AAA.

Quick start: Enter or pick a foreground (text) color using the color input or by typing a HEX code. → Enter or pick a background color the same way. → Review the calculated contrast ratio displayed between the two swatches.

How to use Contrast Checker

  1. 1

    Enter or pick a foreground (text) color using the color input or by typing a HEX code.

  2. 2

    Enter or pick a background color the same way.

  3. 3

    Review the calculated contrast ratio displayed between the two swatches.

  4. 4

    Check the WCAG AA and AAA pass/fail badges for both normal-size and large text.

  5. 5

    Swap foreground and background with one click if you want to test the inverse pairing.

Real examples of Contrast Checker in action

Check button text
Before
Text #ffffff on background #3b82f6
After
Ratio: 4.56:1 - AA Normal: PASS, AAA Normal: FAIL, AA Large: PASS
Dark mode body
Before
Text #94a3b8 on background #0f172a
After
Ratio: 6.71:1 - AA Normal: PASS, AAA Normal: FAIL (under 7:1)
Failing link color
Before
Text #fbbf24 on background #ffffff
After
Ratio: 1.96:1 - FAIL on all levels (needs darker yellow)
Popular tools

Try our most-used tools

Merge PDFRemove BackgroundJSON Formatter

Who is Contrast Checker for?

Accessibility auditors verifying WCAG AA/AAA compliance before a launch

Designers picking text colors for dark-mode themes without guessing

Developers validating link and button colors against body backgrounds

Agencies providing compliance documentation to enterprise clients

Product managers confirming marketing banner text passes contrast requirements

Why use Contrast Checker?

  • Shows WCAG 2.1 contrast ratio for both AA and AAA compliance levels at a glance.
  • Separate pass/fail indicators for normal text and large text so you know exactly which contexts pass.
  • One-click foreground/background swap makes it easy to test both directions of a color pair.
  • Live preview of sample text on the chosen background so you can see real-world readability.
  • Runs entirely in your browser — no data sent anywhere, works offline.

Common use cases

  • Audit a website's color palette against WCAG AA requirements before launch.
  • Choose accessible text colors for a dark-mode theme by testing multiple foreground options.
  • Verify that link colors on a colored banner meet minimum contrast for readability.
  • Provide accessibility compliance evidence for clients by documenting passing contrast ratios.
  • Test heading colors against background gradients to ensure large-text thresholds are met.

How Contrast Checker keeps your data private

Contrast calculation uses the WCAG luminance formula run entirely in your browser on two color values. Brand palette experimentation — especially for clients under NDA — stays fully local, so competitors or scrapers can't track which color pairs you're testing.

How Contrast Checker compares to alternatives

Honest comparison to other popular options — pick the right tool for the job.

ToolMain limitation
WebAIM Contrast CheckerBasic interface with no live preview of sample text on the background
Stark (Figma plugin)Requires paid plan for bulk audits and is locked inside Figma
Chrome DevToolsOnly works on rendered pages, not arbitrary color pairs during design
Contrast CheckerFree, runs in your browser, no sign-up, no watermarks, no file-size limits beyond your device memory.

About Contrast Checker

Web accessibility starts with readable text, and readable text starts with sufficient color contrast. Xevon Tools' Contrast Checker calculates the WCAG 2.1 contrast ratio between any foreground and background color pair and tells you instantly whether it passes AA and AAA thresholds for both normal and large text. The tool displays a live text preview on the chosen background, so you can judge readability with your own eyes as well as by the numbers. A one-click swap button lets you quickly test the inverse pairing, and the color inputs accept HEX codes or a visual picker. This is an essential step for designers, developers, and QA teams who need to meet accessibility standards before shipping a site. Whether you are building a dark-mode theme, designing a marketing banner, or auditing an existing product, the Contrast Checker gives you clear, actionable results in seconds. Everything runs in your browser with no external requests, so it works offline and keeps your color data private.

Frequently asked questions

WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. AAA is stricter at 7:1 for normal text and 4.5:1 for large text. Most accessibility guidelines consider AA the minimum standard and AAA the enhanced target.
WCAG defines large text as 18pt (24px) or larger at regular weight, or 14pt (18.66px) or larger at bold weight. The tool shows separate results for both thresholds so you can see which applies to your design.
WCAG 2.1 also requires a 3:1 contrast ratio for user-interface components and graphical objects. You can use this tool to verify that ratio — just look at the large-text AA result which uses the same 3:1 threshold.
The checker compares two solid colors. For gradients, test the lightest and darkest points of the gradient separately against your text color to ensure the worst case still passes.

Your files never leave your device

Every tool on Xevon Tools runs 100% in your browser. No uploads, no servers, no tracking. Free forever.

Learn more

Embed Contrast Checker on your site

Add this tool to your own website, blog, or internal tool page with one line of code. Free to use, no attribution required (but appreciated).

<iframe src="https://www.xevontools.com/embed/contrast-checker" width="100%" height="640" style="border:1px solid #e2e8f0;border-radius:12px;" title="Contrast Checker — Xevon Tools"></iframe>
Share: