Color Contrast Checker (WCAG)

What Is Color Contrast Ratio?

Color contrast ratio is a number that describes how different two colors appear in terms of brightness — specifically the relative luminance of a foreground (text) color against a background color. It is expressed as a ratio from 1:1 (identical colors, no contrast) up to 21:1 (pure black on pure white). The higher the ratio, the easier text is to read. The Web Content Accessibility Guidelines (WCAG) use this single number to set objective, testable thresholds for readable text.

WCAG calculates the ratio with the formula (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is that of the darker color. Relative luminance itself is derived by converting each color’s red, green, and blue channels to a linear scale and weighting them (roughly 21% red, 72% green, 7% blue) to match how the human eye perceives brightness. This tool performs exactly that calculation and shows the relative luminance of both colors below the result, so the ratio you see matches what automated accessibility auditors report.

How to Use This WCAG Contrast Checker

Enter your text (foreground) color and background color, or use the color picker swatch beside each field to choose them visually. You can paste colors straight from your CSS or design tool: #1e293b, 1e293b without the hash, short HEX like #333, rgb(30, 41, 59), hsl(217 33% 17%), color names such as navy, and transparent colors like rgba(0, 0, 0, 0.6) or #00000099. If a value is not a valid CSS color, the field tells you so instead of silently showing an old result.

The live preview shows normal text, large text, and UI elements (a button outline, an input border, and an icon) in your colors. The Contrast Ratio readout and the five badges — AA and AAA for normal and large text, plus the 3:1 check for UI components and graphics — switch between PASS and FAIL as you type. Use the swap button (⇄) to flip the two colors, Copy result to paste a plain-text summary into a ticket or audit report, and Copy link to share the exact color pair with a colleague.

Fix a Failing Pair: Find the Closest Passing Color

Knowing that a pair fails is only half the job — you also need a color that works. When your colors do not reach the selected target (AA 4.5:1 by default, or 3:1 for large text and UI, or AAA 7:1), the Fix contrast panel suggests two options: a new text color and a new background color. Each suggestion keeps the hue and saturation of your original color and changes only its lightness, by the smallest amount needed to pass. That way your brand blue stays blue — just a little darker or lighter. Click Use to apply a suggestion and check the result, or Copy to take the HEX value straight into your stylesheet.

Sometimes a target cannot be reached by changing one color alone — for example, no text color reaches 7:1 on a mid-gray background. The panel says so; in that case change the other color, or both.

Transparent Colors and Opacity

Text with opacity — rgba(), hsla(), 8-digit HEX or opacity in CSS — is a common reason for failed audits, because the color you wrote is not the color people see. WCAG measures the color as it is actually rendered, so this checker first blends the semi-transparent text onto the background and then calculates the ratio, and tells you which solid color the blend produces. For example, rgba(0, 0, 0, 0.54) on white renders as about #757575, which barely passes AA. A semi-transparent background is measured on a white page; if your page background is different, enter the solid color underneath instead.

Why 4.49:1 Fails: No Rounding

WCAG thresholds are exact. A ratio of 4.499:1 does not meet the 4.5:1 requirement, even though many tools would round it up and display “4.50:1”. This checker truncates the ratio to two decimals instead of rounding, and decides PASS or FAIL on the unrounded value — so a FAIL here is never hidden behind a rounded number.

Non-Text Contrast: Buttons, Inputs and Icons

WCAG 2.1 added success criterion 1.4.11 Non-text Contrast: the visual parts needed to identify a control or understand a graphic must have a contrast of at least 3:1 against adjacent colors. That includes input borders, focus indicators, checkbox outlines, icons without text labels, and the lines in charts. The UI row in the preview and the “UI Components & Graphics” badge show whether your pair is strong enough for these elements. Note that it is the contrast between the component and what surrounds it that counts — a light-gray input border on a white page often fails even when the text inside the field passes.

Real-World Use Cases

• Accessibility audits — Verify that body text, links, and buttons meet WCAG AA before shipping a site or app.
• Design system color tokens — Confirm that each text-on-surface combination in a token set passes the required level.
• Brand and marketing review — Check that headline-on-background pairings in graphics and slides stay legible, and find the nearest accessible shade of a brand color.
• Dark mode — Muted gray text on near-black surfaces fails surprisingly often; check every pairing of your dark theme.
• Legal compliance — Demonstrate conformance for laws such as the ADA, the European Accessibility Act, and EN 301 549.

Tips for Passing Contrast Checks

• Aim for at least 4.5:1 on body text (AA) and 7:1 (AAA) where you can, especially for long-form reading.
• Remember that large text — 24px regular or 18.66px bold and above — only needs 3:1 for AA, giving you more color freedom for headings.
• If a pairing fails, adjust the lightness of one color rather than the hue to preserve your brand look while gaining contrast — the Fix panel does exactly that.
• Avoid lowering text opacity to create “secondary” text; use a solid color that you have checked instead.
• Contrast requirements apply to text and meaningful UI components, not to decorative elements, logos, or disabled controls.

Features

• WCAG 2.x ratio calculation — Uses the official relative-luminance formula; the ratio is never rounded up.
• Any CSS color — HEX (3, 4, 6 or 8 digits, with or without #), rgb(), hsl(), color names and transparency.
• Six checks — AA and AAA for normal and large text, plus non-text contrast for UI components and graphics.
• Contrast fixer — The closest passing text or background color with the same hue, one click to apply.
• Live preview — Normal text, large text, a button outline, an input border and an icon in your colors.
• Copy and share — A plain-text result for audit reports and a link that opens the same color pair.
• 100% client-side — your data never leaves your browser.

Frequently Asked Questions

What contrast ratio should I aim for?

For body text, aim for at least 4.5:1 to meet WCAG Level AA. Large text (24px regular or 18.66px bold) only needs 3:1 for AA. For the strongest accessibility, target 7:1 for normal text, which satisfies the enhanced AAA level.

How is the contrast ratio calculated?

The tool uses the WCAG formula (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is that of the darker color. Relative luminance is computed from the linearized red, green, and blue channels weighted to match human brightness perception.

How do I find a color that passes?

Enter your colors and look at the Fix contrast panel. It suggests the closest text color and the closest background color that reach your chosen target, keeping the original hue and changing only lightness. Click Use to apply a suggestion or Copy to copy its HEX value.

Can I check transparent or rgba colors?

Yes. Enter the color with its alpha value, for example rgba(0, 0, 0, 0.6) or #00000099. The checker blends the transparent text onto the background first, as WCAG requires, and shows the solid color that results before calculating the ratio.

What counts as large text under WCAG?

WCAG defines large text as at least 18pt (about 24px) for regular weight, or at least 14pt bold (about 18.66px bold). Large text has lower contrast requirements — 3:1 for AA and 4.5:1 for AAA — because bigger glyphs are easier to read at lower contrast.

What is the difference between AA and AAA?

AA is the minimum level most accessibility laws and standards require, needing 4.5:1 for normal text and 3:1 for large text. AAA is the enhanced level, requiring 7:1 for normal text and 4.5:1 for large text. Meeting AAA everywhere is ideal but not always practical for brand colors.

Why does color contrast matter for accessibility?

Sufficient contrast keeps text readable for people with low vision or color blindness, as well as anyone viewing a screen in bright sunlight. It is also a legal requirement under accessibility laws such as the ADA, EN 301 549, and the European Accessibility Act.

Is this contrast checker free and private?

Yes. The checker is free and runs entirely in your browser with client-side JavaScript. The colors you enter are never uploaded or transmitted to any server, so your work stays completely private on your device.