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.
Choose colors
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.
| 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
Learn the concepts behind this tool
- DocumentsWord Document Accessibility Guide: How to Make DOCX Files Easy to Read and NavigateLearn how to create accessible Word documents with proper headings, alt text, tables, links, lists, language, color contrast, and export settings.
- DocumentsPowerPoint Accessibility Guide: How to Make PPT Slides Accessible for Every AudienceA practical PowerPoint accessibility guide covering slide titles, reading order, alt text, contrast, tables, captions, templates, and accessible PDF export.
- ColorColor contrast: the WCAG math and what it doesn't tell youHow WCAG 2.x contrast is calculated, why the algorithm is imperfect, and how to design accessible color systems anyway.