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 on the two HEX colors you enter, so the ratio you see matches what automated accessibility auditors report.

How to Use This WCAG Contrast Checker

Enter your foreground (text) color and background color as six-digit HEX values in the two input fields, or use the native color picker swatch beside each field to choose them visually. The live preview pane updates instantly, showing sample normal text (16px) and large text on your chosen background so you can judge the result with your own eyes.

As you change either color, the Contrast Ratio readout updates and the four badges — AA Normal Text, AA Large Text, AAA Normal Text, and AAA Large Text — switch between PASS and FAIL against their required thresholds (4.5:1, 3:1, 7:1, and 4.5:1 respectively). Use the swap button (⇄) between the two fields to instantly flip the foreground and background, which is handy for testing both light and dark variants of a pairing.

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.
• Legal compliance — Demonstrate conformance for laws such as the ADA, the European Accessibility Act, and EN 301 549.
• Choosing accent colors — Test candidate link or button colors against your page background before committing.

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.
• Use the swap button to confirm a pairing works in both directions if you reuse the same two colors for inverted UI states.
• Contrast requirements apply to text and meaningful UI components, not to decorative elements or disabled controls.

Features

• WCAG 2.1 ratio calculation — Uses the official relative-luminance formula for accurate, standards-matching results.
• AA and AAA badges — Instant PASS/FAIL for normal and large text at both conformance levels.
• Live text preview — See real sample text at normal (16px) and large sizes on your colors.
• HEX inputs and color pickers — Type a value or pick it visually with the native swatch.
• One-click swap — Flip foreground and background to test inverted pairings.
• 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.

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.