Initializing, please wait a moment

Color Contrast Checker (WCAG) Step By Step

Color Contrast Checker (WCAG) runs in three steps: open the page, pick text and background colors, then read the ratio and AA / AAA results. This page walks through each step.


Step 1 - open the tool

Go to Color Contrast Checker (WCAG). Nothing needs to be installed or signed in before you start.


Step 2 - pick foreground and background

Pick a foreground (text) color and a background color with the color boxes, or type HEX values. Use Swap colors if you want to flip them. The live preview shows sample normal and large text in those colors.


Step 3 - read the ratio and verdicts

The contrast ratio updates as you change colors. AA and AAA pass or fail badges appear for normal text and large text. Ratios use the W3C relative-luminance formula from WCAG 2.1. Closing the tab discards your picks - nothing is uploaded.

When to use this tool · Vs alternatives

← Back to developer tools

Reviewed by the Free Tool Online editorial team · Tested in the current versions of Chrome, Firefox, Safari, and Edge before publishing. No account is needed to use any tool. Report a bug - we triage within 72 hours. · Last refreshed April 2026.

Why trust these tools

  • Ten-plus years of web tooling. The freetoolonline editorial team has shipped browser-based utilities since 2015. The goal has never changed: get you to a working output fast, without an install.
  • No install, no sign-up. Open a tool and get a working output in seconds - nothing to download and no account to create. Tools that need heavy processing run it on our service, so even a low-powered machine gets the job done.
  • Analytics stops at the page view. We measure which pages get visited, not what you type or upload inside a tool. There is nothing to sign in to and no profile is attached to your input.
  • Open-source core components. The processing engines underneath (libheif, libde265, pdf-lib, terser, clean-css, ffmpeg.wasm, and others) are public and audit-able. We link to each one in its tool page's footer.
  • Free, with or without ads. All tools are fully functional without sign-up. The Disable Ads button in the header is always available if you need a distraction-free run.

Related tools: