Color Contrast Checker

Check WCAG AA and AAA contrast ratios for text and background color combinations

Color Contrast Checker

Test foreground and background colors against WCAG AA and AAA thresholds.

Color inputs

Use the exact text and surface colors from your UI or design system.

Foreground

Background

Font size18px

Font weight

Sample text

Generated CSS

.accessible-text {
  color: #111827;
  background-color: #FFFFFF;
  font-size: 18px;
  font-weight: 600;
}

Contrast result

Current ratio: 17.74:1 · Normal-text mode

Preview

Accessible text should remain readable at a glance.

Normal AA

Pass

Normal AAA

Pass

Large AA

Pass

Large AAA

Pass

Ratio

17.74:1

Text mode

Normal

What is Color Contrast Checker

Last reviewed: April 18, 2026

Color Contrast Checker computes the exact luminance-contrast ratio between a foreground (text) color and a background color using the WCAG 2.1 formula, then checks the ratio against the AA (4.5:1 normal, 3:1 large) and AAA (7:1 normal, 4.5:1 large) thresholds.

The tool also shows the APCA (Accessible Perceptual Contrast Algorithm) score, which is the successor standard proposed for WCAG 3 and handles dark-mode contrast more accurately than the legacy luminance formula.

Why use it

Verify that a brand palette meets WCAG AA before shipping marketing copy that needs to be readable by users with low vision.
Diagnose why a link or button label fails an axe-core or Lighthouse accessibility check.
Compare legacy WCAG luminance contrast vs the newer APCA score when dark-mode text fails WCAG but still reads well in practice.

Features

Exact WCAG 2.1 contrast ratio (xx.xx:1) with pass/fail badges for AA, AA Large, AAA, AAA Large
APCA contrast score (WCAG 3 draft) alongside the legacy ratio for modern dark-mode audits
Live preview showing sample text at 14px, 16px, 18px, 24px sizes against the chosen background
Color-blindness simulator: preview the pair through protanopia, deuteranopia, and tritanopia filters
Suggested fix: the tool offers the nearest in-gamut color that would pass the selected threshold

How to use Color Contrast Checker

Enter foreground and background colors. Type hex, rgb(), or hsl() for both. The swatch previews update live alongside the ratio.
Read the ratio and compliance badges. The number in the center is the exact WCAG 2.1 contrast ratio. Green badges mark the thresholds the pair passes.
Check text-size context. AA/AAA have different thresholds for normal (14–18px) vs large (18px+ bold, 24px+ regular) text. The preview panel shows samples at each size.
Adjust if failing. If a threshold fails, click 'Suggest fix' to get the nearest color that would pass — the tool adjusts lightness first, then saturation, to keep the hue recognisable.

Example (before/after)

Color Contrast input

Start with the color Contrast input you want to process in Color Contrast Checker.

Color Contrast output

Get a color Contrast result from Color Contrast Checker that is ready to review, copy, and reuse in the next step of your workflow.

Common errors

Unsupported input

The tool may reject input that does not match the expected content, structure, or file type.

Fix: Confirm the tool input requirements and paste the correct type of data.

Incomplete values

Missing fields or partial content can block processing or produce weak results.

Fix: Provide the full required input before running the tool.

Copying placeholder content

Sample or placeholder values can lead to output that looks valid but is not ready for real use.

Fix: Replace placeholders with your actual values before relying on the result.

FAQ

What contrast ratio do I need to pass WCAG AA?

4.5:1 for normal-size text (below 18pt regular or 14pt bold) and 3:1 for large text (18pt+ regular or 14pt+ bold). WCAG AAA tightens these to 7:1 and 4.5:1 respectively. Icons and UI components only need 3:1 under WCAG 2.1 non-text contrast rules.

What's APCA and how does it differ from WCAG 2.1?

APCA (Accessible Perceptual Contrast Algorithm) is the contrast metric proposed for WCAG 3. It weights dark-on-light differently from light-on-dark, which fixes the known issue where WCAG 2.1 penalizes certain dark-mode pairs that are perfectly readable. The tool shows both so you can start using APCA while AA/AAA remain the official requirement.

Does the checker account for typography or font weight?

Partially. WCAG's text-size thresholds (normal vs large) already account for whether bold and larger fonts need less contrast. The tool previews sample text at 14/16/18/24 pixel sizes so you can see which threshold applies to your actual UI copy.

Can I check contrast for buttons, icons, or form borders?

Yes. WCAG 2.1 SC 1.4.11 requires 3:1 contrast for non-text UI components. Use the tool with the icon color as foreground and the adjacent background — the 'Non-text contrast' badge shows whether the pair clears the 3:1 threshold.

Does the tool simulate color-blindness?

Yes — the preview panel includes toggles for protanopia (red-blind), deuteranopia (green-blind), and tritanopia (blue-blind) so you can see whether your pair still reads clearly for those users. The filters use the Brettel/Viénot transformation, which matches how Chrome DevTools and Figma simulate.

If my colors fail, what's the smallest change that would make them pass?

Click 'Suggest fix' — the tool searches in HSL space, adjusting lightness by the smallest delta needed to clear the threshold while keeping hue and saturation stable. That way the fix looks like the same color, just a bit lighter or darker.

Related tools

Continue the workflow with related tools for color Contrast, adjacent input and output steps, or other utilities in the same category. You can also browse the full CSS Tools category for more options.

Mobile Touch Target Checker

Check tap target size and spacing against mobile accessibility guidelines

CSS Gradient Generator

Generate CSS gradient code visually

Dark Mode CSS Variable Generator

Generate light and dark theme CSS variables for design systems with media-query or data-attribute theming output.

Clamp CSS Generator

Generate responsive clamp() CSS for typography and spacing with viewport-based fluid sizing

Color Mixer

Mix two colors together

Color Palette Generator

Generate harmonious color palettes

Color Shades Generator

Generate shades and tints of a color

Color Tint Generator

Generate tints of a color

CSS Animation Keyframe Generator

Build CSS keyframe animations from practical presets with timing controls, live preview, and reusable class output.

CSS Box Shadow Generator

Generate CSS box-shadow code visually

CSS Button Generator

Generate CSS button styles visually

CSS Cubic Bezier Generator

Generate CSS cubic-bezier timing functions visually