Does this color contrast checker upload my colors?

No. Contrast calculations run locally in your browser.

What WCAG thresholds does this tool use?

It checks common WCAG contrast thresholds: AA normal text at 4.5:1, AA large text at 3:1, AAA normal text at 7:1, and AAA large text at 4.5:1.

Can I copy the color CSS?

Yes. The tool creates copy-ready CSS for the selected foreground and background colors.

CSS / Accessibility Utility

Color Contrast Checker

Check foreground and background colors against common WCAG contrast thresholds. Preview the pair, copy CSS, and quickly decide whether a button, card, form label, or documentation page has enough readable contrast.

Check contrast View examples

Choose colors

Foreground Foreground hex

Background Background hex

Ready to check a foreground and background pair.

Contrast result

Readable text Preview for body copy, buttons, and cards.

15.83:1

AA normal: pass AA large: pass AAA normal: pass AAA large: pass

Copy-ready CSS

How to use this tool

Enter a foreground text color and a background color.
Check the ratio and WCAG AA / AAA status.
Use the preview and copy CSS into your component or design notes.

Real examples

Button text: test white text on a brand color before shipping a CTA.
Dashboard cards: verify muted text is readable on dark panels.
Docs pages: check code labels, links, and warning text on colored backgrounds.

Common use cases

Check body text, links, badges, buttons, form labels, and disabled states.
Compare dark mode and light mode color tokens.
Create accessibility notes during frontend QA.

Sample input/output

Input: foreground #111827, background #ffffff

Output: ratio 17.74:1, AA normal pass, AAA normal pass.

Common errors and fixes

Issue	Why it happens	How to fix it
Muted text fails AA	The foreground is too close to the panel or page background.	Darken the text on light backgrounds or lighten it on dark backgrounds.
Brand color button fails	Bright brand colors often need dark text instead of white text.	Try swapping text to near-black, or choose a deeper brand shade.
Hex value is rejected	The input is not a 3-digit or 6-digit hex color.	Use values like `#fff`, `#ffffff`, or `111827`.

WCAG 2.2 contrast fixes

Use the ratio as a design debugging signal, then change the color pair in the component where the text actually appears.

Normal body text: target at least 4.5:1 for AA. Darken the text, lighten the background, or pick a less saturated brand shade.
Large text and icons: target at least 3:1 for AA when the text is large enough. Do not assume font weight alone changes the measured ratio.
Buttons and badges: test hover, active, disabled, and error states, not just the default state.
Images, gradients, and overlays: sample the weakest background area behind the text and test that pair.

Edge cases table

Edge case	Expected behavior
Large text	Large text has a lower AA threshold than normal body text.
Transparent backgrounds	This tool checks solid color pairs. Composite transparency against the final background first.
Gradients and images	Check the worst-case sampled background color behind the text.

Related workflow

After checking contrast, use the Box Shadow Generator to tune card elevation without hurting readability. If your color tokens live in JSON, use the JSON Formatter. For CSS or log patterns in QA notes, use the Regex Tester.

Does this tool upload my colors?

No. The ratio is calculated locally in your browser from the colors you enter.

What ratio should normal text meet?

Common WCAG AA guidance uses at least 4.5:1 for normal text and 3:1 for large text.

Can this check gradients?

It checks solid pairs. For gradients or images, sample the weakest background color behind the text and test that pair.