What ratio should normal body text meet?

WCAG AA needs at least 4.5:1 for standard-size text, while AAA raises that target to 7:1.

Why does transparent text give different results?

The tool composites semi-transparent colors over the background first, then calculates the final visible contrast.

Do icons and controls use the same threshold as text?

Not always. Non-text UI components generally need 3:1 under WCAG 1.4.11.

Color

Color Contrast Checker

Enter any two colors — hex, rgb, hsl, or named — and get a WCAG 2.2 contrast ratio with AA and AAA verdicts.

Text (foreground)

Background

Color-blindness simulation

The quick brown fox

Sample body text at 14px regular. AAA requires 7:1 for this size.

Large heading 24px+

Advanced

Color Contrast Batch Auditor

Upload brand colors, paste CSS/design tokens, or try a site URL. The auditor checks every text/background pairing and suggests adjusted hex values for failing combinations.

Pairs

Pass

Fail

Upload palette, CSS, JSON, or CSV

Site URL color extraction

Paste colors or tokens

Audit threshold

AA normal

AAA normal

UI pass

Colors

Batch contrast audit results
Foreground	Background	Ratio	AA	AAA	Suggested fix
Surface#ffffff	Soft surface#f5f7fa	1.07:1	Fail	Fail	FG #707070 or BG #737476
Soft surface#f5f7fa	Surface#ffffff	1.07:1	Fail	Fail	FG #737476 or BG #707070
Success#0f766e	Muted#6b7280	1.13:1	Fail	Fail	FG #f3f8f8 or BG #e9eaec
Muted#6b7280	Success#0f766e	1.13:1	Fail	Fail	FG #e9eaec or BG #f3f8f8
Accent#e8792d	Warning#e8a33d	1.35:1	Fail	Fail	FG #683614 or BG #3f2c10
Warning#e8a33d	Accent#e8792d	1.35:1	Fail	Fail	FG #3f2c10 or BG #683614
Primary#1b4b91	Success#0f766e	1.56:1	Fail	Fail	FG #e6ebf3 or BG #9ac5c2
Success#0f766e	Primary#1b4b91	1.56:1	Fail	Fail	FG #9ac5c2 or BG #e6ebf3
Accent#e8792d	Muted#6b7280	1.66:1	Fail	Fail	FG #fdf6f0 or BG #2d3036
Muted#6b7280	Accent#e8792d	1.66:1	Fail	Fail	FG #2d3036 or BG #fdf6f0
Primary#1b4b91	Muted#6b7280	1.76:1	Fail	Fail	FG #f6f8fb or BG #b9bdc3
Muted#6b7280	Primary#1b4b91	1.76:1	Fail	Fail	FG #b9bdc3 or BG #f6f8fb
Accent#e8792d	Success#0f766e	1.88:1	Fail	Fail	FG #fbe6d7 or BG #073633
Success#0f766e	Accent#e8792d	1.88:1	Fail	Fail	FG #073633 or BG #fbe6d7
Soft surface#f5f7fa	Warning#e8a33d	2.01:1	Fail	Fail	FG #424344 or BG #946827
Warning#e8a33d	Soft surface#f5f7fa	2.01:1	Fail	Fail	FG #946827 or BG #424344
Primary#1b4b91	Text#14171f	2.10:1	Fail	Fail	FG #6283b3 or BG #bdbec0
Text#14171f	Primary#1b4b91	2.10:1	Fail	Fail	FG #bdbec0 or BG #6283b3
Surface#ffffff	Warning#e8a33d	2.16:1	Fail	Fail	FG #424242 or BG #9b6d29
Warning#e8a33d	Surface#ffffff	2.16:1	Fail	Fail	FG #9b6d29 or BG #424242
Muted#6b7280	Warning#e8a33d	2.24:1	Fail	Fail	FG #40444d or BG #fdf6ec
Warning#e8a33d	Muted#6b7280	2.24:1	Fail	Fail	FG #fdf6ec or BG #40444d
Success#0f766e	Warning#e8a33d	2.54:1	Fail	Fail	FG #0a4c46 or BG #f9e7cd
Warning#e8a33d	Success#0f766e	2.54:1	Fail	Fail	FG #f9e7cd or BG #0a4c46
Accent#e8792d	Soft surface#f5f7fa	2.72:1	Fail	Fail	FG #ae5b22 or BG #2f2f30
Soft surface#f5f7fa	Accent#e8792d	2.72:1	Fail	Fail	FG #2f2f30 or BG #ae5b22
Accent#e8792d	Surface#ffffff	2.92:1	Fail	Fail	FG #b55e23 or BG #303030
Surface#ffffff	Accent#e8792d	2.92:1	Fail	Fail	FG #303030 or BG #b55e23
Primary#1b4b91	Accent#e8792d	2.93:1	Fail	Fail	FG #112f5b or BG #f1af81
Accent#e8792d	Primary#1b4b91	2.93:1	Fail	Fail	FG #f1af81 or BG #112f5b
Success#0f766e	Text#14171f	3.27:1	Fail	Fail	FG #388d87 or BG #eaeaeb
Text#14171f	Success#0f766e	3.27:1	Fail	Fail	FG #eaeaeb or BG #388d87
Text#14171f	Muted#6b7280	3.71:1	Fail	Fail	FG #f8f8f8 or BG #7a808d
Muted#6b7280	Text#14171f	3.71:1	Fail	Fail	FG #7a808d or BG #f8f8f8
Primary#1b4b91	Warning#e8a33d	3.96:1	Fail	Fail	FG #184381 or BG #ecb25c
Warning#e8a33d	Primary#1b4b91	3.96:1	Fail	Fail	FG #ecb25c or BG #184381
Muted#6b7280	Soft surface#f5f7fa	4.50:1	Pass	Fail	No AA fix needed
Soft surface#f5f7fa	Muted#6b7280	4.50:1	Pass	Fail	No AA fix needed
Muted#6b7280	Surface#ffffff	4.83:1	Pass	Fail	No AA fix needed
Surface#ffffff	Muted#6b7280	4.83:1	Pass	Fail	No AA fix needed
Success#0f766e	Soft surface#f5f7fa	5.10:1	Pass	Fail	No AA fix needed
Soft surface#f5f7fa	Success#0f766e	5.10:1	Pass	Fail	No AA fix needed
Success#0f766e	Surface#ffffff	5.47:1	Pass	Fail	No AA fix needed
Surface#ffffff	Success#0f766e	5.47:1	Pass	Fail	No AA fix needed
Accent#e8792d	Text#14171f	6.15:1	Pass	Fail	No AA fix needed
Text#14171f	Accent#e8792d	6.15:1	Pass	Fail	No AA fix needed
Primary#1b4b91	Soft surface#f5f7fa	7.95:1	Pass	Pass	No AA fix needed
Soft surface#f5f7fa	Primary#1b4b91	7.95:1	Pass	Pass	No AA fix needed
Text#14171f	Warning#e8a33d	8.31:1	Pass	Pass	No AA fix needed
Warning#e8a33d	Text#14171f	8.31:1	Pass	Pass	No AA fix needed
Primary#1b4b91	Surface#ffffff	8.53:1	Pass	Pass	No AA fix needed
Surface#ffffff	Primary#1b4b91	8.53:1	Pass	Pass	No AA fix needed
Text#14171f	Soft surface#f5f7fa	16.69:1	Pass	Pass	No AA fix needed
Soft surface#f5f7fa	Text#14171f	16.69:1	Pass	Pass	No AA fix needed
Text#14171f	Surface#ffffff	17.92:1	Pass	Pass	No AA fix needed
Surface#ffffff	Text#14171f	17.92:1	Pass	Pass	No AA fix needed

How the math works

The contrast ratio is defined by (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 the darker. Each channel is first linearized: c ≤ 0.03928 ? c/12.92 : ((c + 0.055)/1.055)^2.4. Relative luminance is 0.2126·R + 0.7152·G + 0.0722·B. When foreground alpha is less than 1, we composite over the background before computing.

WCAG thresholds

1.4.3 (AA): 4.5:1 for body text, 3:1 for large text (18pt / 14pt bold).
1.4.6 (AAA): 7:1 for body text, 4.5:1 for large text.
1.4.11 (AA): 3:1 for interactive UI components and graphical objects.

Editorial guidance

How this color tool supports accessibility work

The color contrast checker and batch auditor is designed to turn a common accessibility review task into a repeatable workflow. It focuses on wcag 2.2 contrast ratio for single pairs or full brand palettes, with aa/aaa reports and suggested fixed hex values. The goal is not to replace expert judgment, but to make the first review faster, more consistent, and easier to explain to designers, developers, QA teams, and content owners.

Use the output as evidence for a remediation conversation. A failed check normally means the implementation needs a closer look against WCAG 1.4.3, 1.4.6, 1.4.11, while a passing check means the specific automated rule did not find a problem. Passing automated checks is helpful, but it is not the same as a full conformance claim.

For best results, test real production markup instead of simplified snippets. Templates, CSS state, JavaScript behavior, responsive layouts, and content changes can all affect the final accessibility experience. Re-run the tool after fixes so the before-and-after evidence is easy to compare.

Pair this tool with manual keyboard testing, zoom and reflow checks, screen-reader review, and content judgment. Those human checks catch issues that automated logic cannot reliably infer, such as whether labels are meaningful, instructions are clear, or a complete user task can be finished without a mouse.

How to use

1Enter a foreground color and background color in hex, RGB, HSL, or named-color format.
2Read the live ratio and the AA or AAA pass results for body text, large text, and UI components.
3Switch on a color-vision simulation to catch combinations that may still feel risky for real users.

FAQs

Tips here are tailored for the color contrast checker and batch auditor so people can move from checking to fixing faster.

What to verify manually

Keyboard: move through the related flow with Tab, Shift+Tab, Enter, Space, Escape, and arrow keys where the pattern expects them.

Assistive technology: check names, roles, states, reading order, announcements, and focus changes with at least one screen reader.

Content quality: confirm that instructions, labels, headings, errors, and alternatives make sense in the real user task.

This page is written as practical guidance, not a legal certification. For procurement, VPAT/ACR work, or regulated launches, combine tool output with expert review and documented manual test results.

Related learning