DevCoreTools

Color Contrast Checker

Check text and background color contrast, preview readable combinations, and verify WCAG AA/AAA accessibility results.

Color inputs

Enter foreground and background colors as HEX, RGB, RGBA, HSL, HSLA, HSV, or common CSS names.

Processed locally in your browser Limit local color values. Your input is processed in your browser and is not uploaded or sent to a server. Avoid pasting production secrets, access tokens, private keys, passwords, or sensitive customer data unless you understand the risk.

Foreground

Background

Alpha colors are composited for a deterministic contrast check; transparent backgrounds use white as the page backdrop.

Sample color pairs

Contrast results

WCAG contrast checks for text and practical UI component boundaries.

Contrast ratio17.74:1

This is a color contrast check only, not a full accessibility audit.

Foreground
#111827
Background
#FFFFFF
Foreground luminance
0.0092
Background luminance
1.0000

Normal text sample for paragraphs, labels, helper copy, and links.

Large text sample

Button textLink sample
Pass

Normal text AA

Text below 18 pt regular or 14 pt bold.

Needs 4.5:1 or higher.
Pass

Normal text AAA

Enhanced contrast target for body-sized text.

Needs 7:1 or higher.
Pass

Large text AA

At least 18 pt regular or 14 pt bold text.

Needs 3:1 or higher.
Pass

Large text AAA

Enhanced contrast target for large text.

Needs 4.5:1 or higher.
Pass

UI components

Graphical objects, focus indicators, and control boundaries.

Needs 3:1 or higher.

Check readable color combinations before they ship

Use contrast ratio results to compare foreground text, links, buttons, and UI boundaries against WCAG AA and AAA targets.

Contrast ratio

WCAG contrast compares relative luminance between foreground and background colors. A higher ratio means the colors are easier to distinguish.

AA vs AAA

AA is the common accessibility target for most product interfaces. AAA is stricter and useful for critical reading experiences when the visual design can support it.

Normal vs large text

Normal body text needs 4.5:1 for AA and 7:1 for AAA. Large text has lower thresholds because heavier, larger glyphs are easier to read.

Foreground and background

Test the actual rendered text color against the actual surface color behind it, including buttons, links, badges, table cells, and form controls.

Common mistakes

Subtle gray text, disabled-looking links, low-contrast placeholder text, and brand colors used with white text often fail even when the palette looks polished.

Local checks

Color parsing, contrast calculation, previewing, and copying run locally in your browser. Entered colors are not sent to a backend.

Keep working

View all HTML & Web tools
Color Picker / Color ConverterPick colors and convert HEX, RGB, HSL, HSV, and CSS color formats locally.CSS Gradient GeneratorCreate linear, radial, and conic CSS gradients with editable color stops.CSS Box Shadow GeneratorCreate layered CSS box shadows with live preview and copy-ready CSS.CSS FormatterFormat and beautify CSS locally with syntax feedback and copy/download actions.CSS MinifierText & Code ToolsMinify CSS locally with syntax checks, size savings, and conservative options.HTML Previewer / Live HTML PreviewPreview HTML live in an isolated browser frame with safety warnings and export actions.Image ResizerResize PNG, JPEG, and WebP images locally with preview and download options.QR Code GeneratorGeneratorsGenerate QR codes locally for URLs, text, email, phone, SMS, and Wi-Fi payloads.

Color Contrast Checker FAQ

What contrast ratio do I need for WCAG AA?

Normal text needs at least 4.5:1. Large text and non-text UI components need at least 3:1.

What counts as large text?

WCAG treats large text as at least 18 pt regular text or 14 pt bold text. In CSS, that is roughly 24 px regular or 18.5 px bold.

Is this a complete accessibility audit?

No. It checks foreground and background color contrast only. Keyboard behavior, focus order, names, roles, layout, and content still need separate review.

Are my color values uploaded?

No. The checker runs in the current browser tab and does not include entered colors, copied values, pairs, or reports in analytics.