Contrast Checker: WCAG Color Ratio Tool

What Is Contrast Checker?

Contrast Checker calculates the luminance-based contrast ratio between a foreground color and a background color to determine whether the combination meets WCAG 2.1 accessibility standards. It tests against all four compliance thresholds: AA and AAA for normal text, and AA and AAA for large text. The tool shows a live text preview so you can see exactly what readers will experience. Accessibility auditors, UI designers, and front-end developers use it before shipping any new color combination to avoid contrast failures in production. Everything runs in the browser — no server call, no login.

Key Features

• WCAG 2.1 contrast ratio calculation — Uses the standard relative luminance formula (with the 0.03928 linearization threshold and the (L1 + 0.05) / (L2 + 0.05) ratio formula) to produce results consistent with official WCAG tooling.
• AA and AAA compliance checking — Four compliance badges update in real time: Normal AA (≥ 4.5:1), Normal AAA (≥ 7:1), Large AA (≥ 3:1), and Large AAA (≥ 4.5:1). Green badge with a checkmark means pass; red badge with an X means fail.
• Normal and large text thresholds — The tool applies separate thresholds for normal text and large text (defined as 18pt or 14pt bold), matching WCAG 2.1 Success Criterion 1.4.3.
• Real-time preview with sample text — The preview card renders a heading, body paragraph, small text, and a button using your chosen foreground and background colors, so you can evaluate readability at a glance.
• Copy contrast ratio to clipboard — Click the Copy icon next to the ratio display to write the ratio string (e.g., 4.53:1) to the clipboard and log the check to your history.
• Works offline after loading — All ratio calculations are implemented in JavaScript with no external API calls.

How to Use Contrast Checker

Step 1: Set your foreground color

Navigate to Contrast Checker. The tool opens with black (#000000) as foreground and white (#FFFFFF) as background — a 21:1 ratio that passes all four WCAG levels.

Set the foreground (text) color by either:

• Clicking the color swatch (colored square) to open the native browser color picker
• Typing a hex code directly into the text input next to the swatch (e.g., #1E293B)

Both the swatch and the text input stay synchronized. The preview swatch below the inputs shows the color with auto-contrasting label text.

Step 2: Set your background color

Use the same controls on the right side of the color inputs card to set the background color. The tool uses a three-column layout: foreground on the left, a swap button in the center, and background on the right.

Step 3: Read the contrast ratio and compliance badges

The Contrast Ratio card appears below the inputs and shows:

• The calculated ratio in large pixel-art type (e.g., 7.23:1)
• A Copy icon to copy the ratio string
• Four compliance badges: Normal AA (≥ 4.5:1), Normal AAA (≥ 7:1), Large AA (≥ 3:1), Large AAA (≥ 4.5:1)

A green badge with a checkmark icon indicates the combination passes that level. A red badge with an X indicates a failure. Aim for at least Normal AA for all body text.

Step 4: Check the live preview

Scroll to the Preview card. It renders four elements using your chosen colors:

• A large heading (text-2xl)
• Body text (text-base)
• Small text (text-sm)
• A button with the colors swapped (foreground becomes background and vice versa)

This preview lets you see whether the colors feel readable before writing any code.

Step 5: Swap colors or try accessible palette suggestions

Click the swap button (double-arrow icon) between the two color inputs to instantly invert foreground and background. This is useful for testing both light-on-dark and dark-on-light variants.

Scroll to the Accessible Color Pairs panel at the bottom of the page. It shows 20 color combinations with their contrast ratios displayed. Click any pair to load those two colors into the tool. Most pairs pass AA (4.5:1), indicated by a checkmark. A few pairs pass only Large AA (3:1) and are marked with an X — these work for headings and large UI elements but not normal body text.

Practical Examples

Checking a button label against its background

Your design uses #FFFFFF white text on a #3B82F6 blue button. Enter #FFFFFF as foreground and #3B82F6 as background. The tool calculates approximately 3.7:1. The Normal AA badge fails (requires 4.5:1), but Large AA passes. You need to darken the blue — try #1D4ED8 instead, which produces roughly 6.7:1 and passes Normal AA.

Validating a dark-mode text color

Your dark-mode design uses #94A3B8 (slate-400) text on #0F172A (slate-900) background. Enter these values. The ratio comes back at around 6.96:1, passing Normal AA, Large AA, and Large AAA. It narrowly misses Normal AAA (requires 7:1). You can confidently use this combination for body copy at the AA level.

Testing a brand color as a text color

Your brand orange is #F97316. You want to use it as link color on a white #FFFFFF background. The ratio is approximately 2.8:1 — failing Normal AA. The preview confirms the text looks readable to some users but would fail an accessibility audit. Switch to a darker shade like #C2410C (≈ 5.2:1) to pass AA.

Tips and Best Practices

Test both foreground-on-background and background-on-foreground. The Swap button lets you reverse the roles in one click. Some UI patterns (buttons, highlighted selections) use the foreground color as a small-area background.

The Accessible Color Pairs panel shows ratios with one decimal place. These real-computed ratios are displayed on each pre-set swatch card. Click any swatch to load both colors — use it as a starting point when you need a working palette quickly.

Large text thresholds apply at 18pt (24px) or 14pt bold (approximately 18.67px bold). The tool displays the Large AA and Large AAA results to remind you that headings have more lenient thresholds. A combination that fails Normal AA may still be valid for use exclusively on large headings.

Share results with a URL. The current foreground and background colors are encoded in the page URL. Copy the address bar URL after entering your colors to send a specific contrast check to a colleague or include in a design review document.

Save common color pairs as presets. Supporter accounts can save both the foreground and background hex values as a named preset. This is useful for teams checking the same brand color combinations repeatedly.

Common Issues and Troubleshooting

The ratio shows 1:1 regardless of input. This typically means both color fields have the same value. Check that you entered different colors in foreground and background. If you just pasted the same hex into both fields, one of them needs to be changed.

Compliance badge says fail but I thought my colors were fine. The WCAG formula is more strict than it can appear visually. A black-on-dark-gray combination like #333333 text on #555555 background produces only about 1.7:1, well below AA. Use the tool's result rather than relying on visual judgment.

History restore doesn't reload my colors. The history restore function parses entries in the format FG: #XXXXXX / BG: #XXXXXX. Entries recorded outside this tool (or with corrupted data) may not parse correctly. Manually re-enter the colors in those cases.

Copy ratio button shows no response. Clipboard API requires HTTPS or localhost. On plain HTTP, the clipboard write fails. The tool shows an error toast in that case. Right-click the ratio display text and use the browser's native copy option as a fallback.

The preview card shows unexpected text colors. The preview renders the heading and body text in your foreground color on your background color. The button in the preview swaps the two colors intentionally to demonstrate the inverse combination.

Privacy and Security

Contrast Checker performs all calculations locally in your browser. The relative luminance formula and contrast ratio computation run in JavaScript on your device. No color values are sent to any server. The tool does not require an account, does not set tracking cookies, and does not log which color combinations you test. It works fully offline once the page has loaded, making it safe for evaluating colors in confidential design systems or unreleased brand guidelines.

Frequently Asked Questions

Is Contrast Checker free to use?

Yes. The full WCAG contrast checking functionality — including the four compliance badges, real-time preview, swap button, and accessible palette panel — is completely free with no account required. Supporter features like presets, history tracking, and tool notes are available with a Ko-fi supporter subscription.

Does Contrast Checker work offline?

Yes. Once the page loads, all contrast calculations, preview rendering, and compliance badge updates work without network access. The relative luminance formulas and WCAG threshold comparisons are pure JavaScript running in your browser.

Is my data safe with Contrast Checker?

Yes. No color data is transmitted to any server. The tool does not make any network requests during a contrast check. Your foreground and background colors exist only in the browser's memory and, if you use the share feature, are encoded in the URL you choose to copy.

What WCAG version does this tool follow?

The tool implements WCAG 2.1 Success Criterion 1.4.3 (Contrast — Minimum) and 1.4.6 (Contrast — Enhanced). The AA level requires a ratio of at least 4.5:1 for normal text and 3:1 for large text. The AAA level requires 7:1 for normal text and 4.5:1 for large text. These thresholds match the values shown in the compliance badges (Normal AA ≥ 4.5:1, Normal AAA ≥ 7:1, Large AA ≥ 3:1, Large AAA ≥ 4.5:1).

What counts as "large text" under WCAG?

WCAG defines large text as text at least 18 point (approximately 24px) in regular weight, or at least 14 point (approximately 18.67px) in bold weight. The tool labels the third and fourth compliance badges "Large AA" and "Large AAA" to cover this category. The preview renders a heading at text-2xl which typically falls into the large text range.

How is the contrast ratio calculated?

The tool converts each hex color to relative luminance using the WCAG formula: each RGB channel is linearized (divided by 255, then applying the sRGB gamma correction: s / 12.92 if s <= 0.03928, otherwise ((s + 0.055) / 1.055) ^ 2.4). Luminance is then 0.2126 R + 0.7152 G + 0.0722 * B. The contrast ratio is (L_lighter + 0.05) / (L_darker + 0.05).

Can I test colors other than hex codes?

The color inputs accept hex codes typed as text (with or without #). You can also use the native color picker swatch. If you have an RGB or HSL value, use the Color Picker to convert it to hex first, then paste it here.

What is the highest possible contrast ratio?

The maximum contrast ratio is 21:1, which is the ratio between pure black (#000000) and pure white (#FFFFFF). The tool opens with these two colors by default to demonstrate the maximum achievable ratio.

Can I use this for UI elements other than text?

WCAG 2.1 also covers non-text contrast in Success Criterion 1.4.11, which requires a 3:1 ratio for UI components and graphical objects. The tool's Large AA badge (≥ 3:1) corresponds to this threshold and can be used to evaluate icon colors, focus indicators, and form control borders, even though the preview renders text.

How do I share a contrast check with my team?

After entering your foreground and background colors, the page URL encodes both values. Copy the address bar URL and share it directly. Recipients who open the link see the same colors pre-loaded with a "Loaded from share" notification. You can also use the Share buttons at the bottom of the page to post to Twitter, LinkedIn, or Reddit.

Related Tools

• Color Picker — Sample exact hex values from your screen or existing designs before testing them here.
• Color Converter — Convert your color from RGB, HSL, or CMYK to hex before entering it in the contrast checker.
• Palette Generator — Generate a full palette and then check each combination in Contrast Checker to ensure accessibility compliance.

Try Contrast Checker now: Glyph Widgets Contrast Checker