What contrast ratio do I need to pass WCAG?

For Level AA you need at least 4.5:1 for normal text and 3:1 for large text (about 18pt, or 14pt bold). Level AAA requires 7:1 for normal text and 4.5:1 for large text. UI components and graphics need at least 3:1.

What counts as large text?

WCAG defines large text as at least 18pt (24px) for regular weight, or at least 14pt (about 18.66px) when bold. Large text is allowed a lower contrast ratio because thicker, bigger letters are easier to read.

Does the order of the two colors matter?

No. The WCAG contrast ratio always divides the lighter color's luminance by the darker one's, so swapping foreground and background gives the exact same result. Contrast is a property of the color pair, not of which one is text.

Do I need to install anything to use this on Windows?

No. The Color Contrast Checker runs entirely in the browser, so it works in Microsoft Edge, Google Chrome, or Mozilla Firefox without downloads, admin rights, or background services. You can pin it as a browser tab and keep it open while you work.

Does Windows High Contrast mode replace checking contrast?

No. Windows High Contrast applies its own color overrides, but it does not transform every custom theme, and it does not help users who have not enabled it. Designing to WCAG contrast ratios ensures readability for everyone, including the millions of people with low vision, color vision deficiency, or bright-glare viewing conditions.

Color Contrast Checker on Windows: Run It in Your Browser

The WCAG contrast ratio between two colors is (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker, producing a value that always falls between 1:1 and 21:1. On Windows, the fastest way to confirm that a text-and-background pair clears the accessibility bar is a browser-based WCAG contrast checker — no install, no admin rights, no extra setup. Because it runs locally in Microsoft Edge, Google Chrome, or Mozilla Firefox, you can keep it open in a tab beside Figma, PowerPoint, Visual Studio Code, or any design tool already running on your desktop. The Color Contrast Checker takes a foreground color and a background color as hex values and instantly returns the exact WCAG 2.x contrast ratio, along with pass and fail badges for every level that matters: AA normal text, AA large text, AAA normal text, AAA large text, and the separate 3:1 non-text rule for icons, form fields, and graphical UI components. Adjust either color and the badges update in real time, so you can dial in a brand-safe palette that still meets the usability baseline.

Why Windows users reach for a browser-based contrast checker

Windows machines show up everywhere accessibility work happens: corporate design teams on Dell and Lenovo workstations, freelance developers on gaming PCs with calibrated wide-gamut monitors, marketing staff building PowerPoint decks on Surface devices, and government contractors bound by Section 508. The common thread is that almost everyone already has Edge preinstalled, and Chrome or Firefox is a single click away. A browser-based checker removes three friction points that installable tools add to this workflow: it does not need administrator privileges to set up, it does not consume a system-tray slot on machines that are already heavy on background processes, and it cannot fall behind on operating-system updates because there is nothing to update. Everything runs in the page, so the same behavior is identical whether you open it on a 13-inch Surface Laptop Go or a 32-inch color-graded monitor plugged into a desktop tower.

The Color Contrast Checker is built around exactly that simplicity. Type a hex value or click the color picker, and the tool returns the ratio without any round-trip to a server. That also matters for confidential work: brand palettes, internal product mockups, and client color systems can be tested without ever leaving the machine, which keeps proprietary visual identities off third-party infrastructure.

Run the Color Contrast Checker in Edge, Chrome, or Firefox

A browser is all the Windows setup you need to start checking contrast against the official WCAG formula.

Open Microsoft Edge, Google Chrome, or Mozilla Firefox on your Windows PC.
Navigate to the Color Contrast Checker and leave the tab open while you work.
Set the foreground (text) color using the color picker, or by typing a hex value such as #111111 directly into the field.
Set the background color the same way, for example #ffffff.
Read the contrast ratio in the result panel and the AA and AAA pass or fail badges.
Adjust either color until the badge for the level you need (AA for body text, AAA for comfortable reading) turns green.

The result panel shows every threshold at once, so you do not have to repeat the test for each conformance level. If you are comparing two candidate palettes, swapping the hex values in the two fields is enough — the ratio is symmetric, and the tool reflects that automatically.

The WCAG thresholds at a glance

The numbers you are aiming for come straight from the Web Content Accessibility Guidelines and apply on any platform, including Windows. The table below summarizes the thresholds the Color Contrast Checker evaluates against, per WCAG 2.1 — Contrast (Minimum).

Use case	Level AA	Level AAA
Normal text (under 18pt regular or 14pt bold)	≥ 4.5 : 1	≥ 7 : 1
Large text (18pt regular or 14pt bold and up)	≥ 3 : 1	≥ 4.5 : 1
UI components, icons, graphical objects	≥ 3 : 1	—

For a deeper walkthrough of how those thresholds map to specific elements such as buttons, focus rings, and placeholder text, see the Color Contrast Checker chart guide.

How the ratio is actually calculated

The contrast ratio is a property of the color pair, not of which one you label as text. The math runs as follows:

Take the red, green, and blue channels of each color as integers from 0 to 255.
Normalize each channel by dividing by 255.
Apply the sRGB linearization: for values above 0.03928, raise ((c + 0.055) / 1.055) to the power 2.4; for values at or below 0.03928, divide c by 12.92.
Combine the linear channels into relative luminance using the WCAG weights: L = 0.2126 × R + 0.7152 × G + 0.0722 × B.
Compute (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter luminance and L2 is the darker.

A worked example using #767676 on #ffffff:

Channel value 118 / 255 ≈ 0.4627.
sRGB linearization: ((0.4627 + 0.055) / 1.055)^2.4 ≈ 0.181.
Because all three channels are equal, L ≈ 0.2126 × 0.181 + 0.7152 × 0.181 + 0.0722 × 0.181 ≈ 0.181.
White luminance ≈ 1.0, so the ratio = (1.0 + 0.05) / (0.181 + 0.05) = 1.05 / 0.231 ≈ 4.54 : 1.

So #767676 on white clears AA for normal text at roughly 4.54:1 but fails AAA, which is the pattern most designers see when they eyeball a "soft gray on white" combo. For the full derivation, see Color Contrast Checker explained: the WCAG formula.

Windows-specific spots where contrast quietly fails

A few recurring failure patterns show up on Windows work that are worth checking before you ship.

PowerPoint on a projector. Brand colors that pass on a calibrated laptop display often wash out under fluorescent or LED projectors in conference rooms. Run the palette through the Color Contrast Checker at the actual size you will project, then re-test the same deck once it lands on a TV in a bright meeting room.
Edge browser toolbars and dark themes. When Windows is set to dark color mode, the default Edge "dark" theme can leave medium-gray text on near-black backgrounds in some dialogs. Test any custom palette against both light and dark surfaces.
Surface pen and touch forms. Forms designed for touch input on Surface devices need 3:1 on borders and 4.5:1 on labels because users often type one-handed in awkward lighting. Verify with the UI-component rule alongside the text rules.
Code editors with custom themes. Dark themes in Visual Studio Code and Windows Terminal look fine to the author but can drop below 7:1 for normal-weight keywords. AAA is the more comfortable target for code, since syntax tokens are usually small and thin.
High Contrast mode interactions. Windows High Contrast does its own recoloring, but it does not save every custom theme. Anything that depends on color alone to convey state — a red error, a green success — still needs a label or icon to be safe under forced colors.

Practical tips for getting readable palettes on Windows

Contrast depends only on the two colors, not on which is text and which is background, so the ratio is symmetric. Large, bold text can pass at a lower ratio because thicker strokes are easier to read, which is why the AAA threshold for large text drops to 4.5:1 instead of 7:1. Passing AA is a floor, not a ceiling — aiming for AAA where the layout allows it gives comfortable reading for the widest audience, including older eyes, low-vision readers, and the sunlit outdoor laptop use that is common with portable Windows machines.

Test against the lightest and darkest points a letter can land on, especially over gradients, hero images, and semi-transparent overlays. The Color Contrast Checker accepts two flat colors; for layered backgrounds, sample the worst case in your design tool and feed those exact hex values in. Keep a design-token file with verified pairs, and re-check any new brand color against it before it enters the system. Remember that contrast measures luminance, not hue: two colors that look obviously different — red on green, for example — can still fail if their luminance values are close. Pair color with a label, icon, or underline rather than relying on hue alone. Save the tool as a pinned tab or a browser shortcut so it is one click away whenever a new color enters your project.