WCAG Color Contrast Checker for Text, Buttons, Icons & UI Components

Check foreground and background color contrast ratios for WCAG 2.2 AA and AAA. Test text, buttons, icons, UI components and get accessible color feedback instantly.

WCAG 2.2 Contrast Checks100% FreeNo Sign UpPrivate & SecureClient Side Processing

Last updated: May 15, 2026

Choose Colors

Paste HEX, RGB, RGBA, HSL, or HSLA — alpha updates opacity automatically.

Foreground color

#1A1A1AHEX

Background color

#FFFFFFHEX

Foreground opacity100%

Background opacity100%

Sample text

Font size

Font weight

#1A1A1A on #FFFFFF

Contrast ratio

17.40:1

Pass/fail uses the raw computed ratio; displayed ratio is floored to two decimals.

Normal Text

Below 18pt / 24px

AA 4.5:1Pass

AAA 7:1Pass

Large Text

18pt / 24px or 14pt / 18.66px bold

AA 3:1Pass

AAA 4.5:1Pass

UI Components

Icons, buttons, borders

AA 3:1Pass

AAA not definedN/A

Selected sample

16px, Regular uses the normal text AA threshold (4.5:1).

Passes

Why Use This WCAG Color Contrast Checker?

This tool helps designers and developers check whether text, buttons, icons, and UI components have enough contrast before publishing. It supports HEX, RGB, RGBA, HSL, and HSLA colors, checks WCAG 2.2 AA and AAA thresholds, and lets you test normal text, large text, and non-text UI components in one place.

Normal text contrast

4.5:1 minimum for WCAG AA — body text, labels, links, and helper copy.

Large text contrast

3:1 minimum for WCAG AA — headings at 18pt/24px regular or 14pt/18.66px bold and above.

UI component contrast

3:1 for meaningful buttons, icons, input borders, focus rings, toggles, and chart marks.

Palette contrast

Compare every color pair in your brand palette at once using the matrix below.

Semi-transparent colors

Paste RGBA or HSLA values, or use opacity sliders. The tool blends before calculating.

AAA enhanced contrast

7:1 for normal text and 4.5:1 for large text when targeting the strictest readability level.

Palette Contrast Matrix

Compare all color pairs at once. Click any cell to apply that pair to the main checker.

FG ↓BG →	#1A1A1A	#FFFFFF	#2563EB	#F59E0B	#10B981	#EF4444
#1A1A1A	—
#FFFFFF		—
#2563EB			—
#F59E0B				—
#10B981					—
#EF4444						—

Click any cell to apply that foreground / background pair to the main checker above. AA = 4.5:1, AAA = 7:1 for normal text.

Advanced Tools

Upload a screenshot to sample colors locally, or nudge lightness while preserving hue to hit a target ratio.

Pick colors from an image

Upload a screenshot or design export. The image stays in your browser — nothing is uploaded.

Upload image

Click or tap a pixel in the uploaded image, then apply the picked color to the checker.

No image yet. Upload one to start sampling colors.

Lightness adjuster

Nudge lightness while preserving hue and saturation. HSL-based for V2; OKLCH upgrade is planned.

Preserve hue and saturation

Foreground lightness

10%

Background lightness

100%

Live contrast

17.40:1

AA PassAAA PassLarge AA Pass

Normal text AA target reached(4.50:1)

Website Contrast Scanner

Coming soon

The planned scanner will accept a URL and report failing text and UI contrast across the page. It will ship as a separate tool when the scan is real.

Browser Extension

Coming soon

The planned extension will sample pixels on live pages and run WCAG checks inline. No install button will appear until the extension exists.

Save & Export

Save color pairs locally, reuse recent checks, copy a full report, or export a clean PNG summary.

Saved colors

0/8

No saved color pairs yet.

Recent checks

Your recent checks will appear here.

Current report: #1A1A1A on #FFFFFF, 17.40:1. Saved colors and recent checks stay in this browser only.

WCAG Contrast Requirements (WCAG 2.2)

Minimum and enhanced contrast ratios from the Web Content Accessibility Guidelines 2.2.

Use case	AA minimum	AAA enhanced	Notes / examples
Normal text	4.5:1	7:1	Body text, labels, links, helper text
Large text	3:1	4.5:1	18pt / 24px regular or 14pt / 18.66px bold and above
UI components & graphics	3:1	—	Buttons, icons, input borders, focus indicators, meaningful graphics

AA is the common baseline target for accessible digital products. AAA is stricter and typically applied to long-form reading or highly accessible interfaces. WCAG does not define a separate AAA threshold for non-text UI components.

About WCAG 2.2

These contrast ratios are based on Web Content Accessibility Guidelines (WCAG) 2.2 to help ensure text, interface components, and meaningful graphics are perceivable for users with low vision and other visual impairments.

Learn more about WCAG 2.2

Color Contrast Checker by Use Case

Every WCAG contrast check this tool covers — text, buttons, icons, palettes, CSS, and Tailwind — on one page.

Text contrast checker

Validate body text, labels, helper copy, and link text against WCAG AA (4.5:1) and AAA (7:1) for normal text. Adjust font size and weight to see how thresholds change.

Button contrast checker

Test default, hover, and disabled button states. The Button preview tab uses your selected colors so low-contrast secondary or muted states show up immediately.

Icon contrast checker

Icons that convey meaning need at least 3:1 against their background. Use the Icon preview tab to verify status, navigation, and toolbar icons against the WCAG non-text threshold.

UI component contrast checker

Input borders, focus rings, toggles, and other interactive controls follow the 3:1 non-text rule. The UI Components result panel checks this automatically alongside text results.

Palette contrast checker

Compare every color pair in a palette at once with the Palette Contrast Matrix above. Click any cell to push the pair back into the main checker for a closer look.

CSS color contrast checker

Paste HEX, RGB, RGBA, HSL, or HSLA values directly. The tool normalizes inputs, blends alpha against the white canvas, and emits ready-to-copy CSS variables for design tokens.

Tailwind color contrast checker

Copy either arbitrary-value classes like text-[#1A1A1A] or the nearest default Tailwind tokens, with a confidence label when the mapping is approximate.

WCAG 2.2 contrast checker

Pass/fail is computed from the raw unrounded ratio and matches the thresholds in the WCAG requirements table above — 4.5:1 and 7:1 for text, 3:1 for non-text.

Client-Side Processing

Input Data Stays on Device

Instant Local Execution

HEX, RGB, RGBA, HSL and HSLA inputOpacity blended against white canvasNormal text, large text and UI component checks

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What is Color Contrast Checker?

Color Contrast Checker measures how readable a foreground color is against a background color and compares that result with WCAG 2.2 accessibility thresholds. It supports HEX, RGB, RGBA, HSL, and HSLA colors, checks AA and AAA levels, and tests normal text, large text, and non-text UI components in one place.

It is not only for formal audits. Designers, developers, and accessibility reviewers use contrast checks during mockups, component reviews, and brand updates because a color pair that looks polished in a design file can still fail for small text, muted states, or lower-vision users. You can also test semi-transparent colors with opacity blending, compare a full palette matrix at once, pick colors from screenshots, and export results as CSS variables or Tailwind classes.

How to Use Color Contrast Checker

Enter a foreground color (text, icon, or border) using HEX, RGB, RGBA, HSL, or HSLA

Enter a background color in the same field

Read the contrast ratio and WCAG AA/AAA pass or fail result instantly

Switch tabs to Preview UI components, see Improve suggestions, or copy Developer output

Adjust colors or use the Improve tab suggestions until your pair meets the required level

Copy the result, share a link, or export as CSS variables or a PNG report

Common Use Cases

Designers checking whether body text, helper text, and button labels stay readable across a UI system.
Accessibility reviewers validating AA or AAA requirements before a release goes live.
Brand teams testing whether marketing palette colors can be reused safely in product interfaces.
Frontend developers catching low-contrast hover, disabled, and secondary states before they reach QA.

Example Input and Output

The same brand color can pass for large headings but fail for body copy, which is why testing exact pairs matters.

Color pair

Foreground: #1f2937
Background: #f9fafb
Text size: normal body text

Contrast result

Contrast ratio: 14.05:1
WCAG AA: Pass
WCAG AAA: Pass
Large text: Pass

Accessibility

AA and AAA thresholds are not interchangeable. A pair that works for a large hero heading may still fail for smaller body text or muted helper labels.

Workflow tip

Test hover, disabled, and secondary button states too. Teams often validate primary colors but miss lower-contrast UI states introduced later.

Frequently Asked Questions

What is color contrast and why is it important?

Color contrast is the luminance difference between a foreground color and its background. Strong contrast makes text, icons, and controls easier to read for everyone, especially people with low vision.

What is the minimum contrast ratio for normal text?

WCAG AA requires at least 4.5:1 for normal text. AAA requires 7:1 for normal text when you need a stricter readability target.

What is the difference between AA and AAA?

AA is the common accessibility baseline for digital products. AAA is stricter and is usually used for high-readability interfaces or important long-form reading experiences.

What is large text in WCAG?

Large text means at least 18pt / 24px regular text, or 14pt / 18.66px bold text. Large text can pass AA at 3:1 because bigger letters are easier to read.

Does this tool check contrast for UI components and icons?

Yes. The checker includes the WCAG 3:1 non-text threshold for meaningful buttons, icons, input borders, focus rings, toggles, chart marks, and similar UI components.

How do I check contrast for semi-transparent colors?

Paste RGBA or HSLA colors, or use the opacity sliders. The checker blends the visible color before calculating the final contrast ratio.

Can this tool scan my website for contrast issues?

Not yet. This page checks exact color pairs, palettes, and uploaded screenshots locally. A real website scanner is planned as a separate workflow when it is ready.

Is my data or uploaded image stored anywhere?

Uploaded images are not uploaded or stored by WebToolsPlanet. Saved palettes and recent checks use browser localStorage on your device, and feature-use analytics do not include your color values, images, or report contents.

Why does a color pass on one background but fail on another?

Contrast depends on the exact foreground and background pair. A small background change can lower the ratio enough for normal text to fail.

What is the highest possible contrast ratio?

The highest WCAG contrast ratio is 21:1, produced by pure black against pure white or the reverse.

Related Tools

Color Palette Generator

Generate harmonious color palettes and schemes.

Color Picker from Image

Extract exact Hex, RGB, and HSL color codes from any image using a precision eyedropper tool.

Color Converter

Convert colors between HEX, RGB, HSL, HSV, CMYK, and HWB. Includes tints & shades, WCAG contrast ratio, CSS snippets, and color history.

CSS Gradient Generator

Create beautiful CSS gradients with a visual editor.

Image Color Extractor

Extract a dominant color palette from any image using quantization — get 5–10 key colors with Hex, RGB, and HSL codes.

Box Shadow Generator

Create CSS box shadows visually — adjust offsets, blur, spread, opacity, and inset, then copy ready-to-use CSS code.

View All Tools

Browse color pickers, palette tools, converters, gradients, and accessibility checks.

Part of a Collection

Collection

Frontend UI & CSS Tools

Ship great UI faster

Posts for This Tool

Broader workflow content that links this tool back into the wider cluster.

All posts

color

How to Choose Accessible Button Colors

Pick accessible button colors for labels, fills, borders, hover states, disabled states, and focus rings without flattening your UI.

6 min read

color

WCAG AA vs AAA Contrast: Simple Guide for Designers

Understand the difference between WCAG AA and AAA contrast targets, when each one is realistic, and how to apply them without overcorrecting your palette.

6 min read

color

What Is a Good Color Contrast Ratio?

A practical explanation of good contrast ratios for body text, large headings, icons, buttons, and muted interface states.

5 min read