---
title: "Color Contrast Checker"
description: "Check color contrast ratios for WCAG 2.1 accessibility compliance. Test foreground and background color combinations for AA and AAA standards with live preview. Shareable URL — copy the link and your colors are encoded right in the hash."
url: "https://freshjuice.dev/tools/contrast-checker/"
---
## Understanding color contrast

Color contrast is fundamental to web accessibility. When text doesn't have enough contrast against its background, it becomes difficult or impossible for many people to read — including those with low vision, color blindness, or anyone using a screen in bright sunlight.

### WCAG contrast requirements

| Level | Normal text | Large text | UI components |
| --- | --- | --- | --- |
| **AA** (Minimum) | `4.5:1` | `3:1` | `3:1` |
| **AAA** (Enhanced) | `7:1` | `4.5:1` | — |

### What counts as large text?

-   **Regular weight**: 18pt (24px) or larger
-   **Bold weight**: 14pt (≈18.66px) or larger

### Beyond text — UI components

WCAG 2.1 also requires a minimum `3:1` contrast ratio for:

-   User interface components (buttons, form fields, focus indicators)
-   Graphical objects (icons, charts, infographics)

## Frequently Asked Questions

### What is color contrast ratio?

Color contrast ratio measures the difference in luminance (brightness) between two colors. It's expressed as a ratio like `4.5:1`, where higher numbers indicate greater contrast. The maximum possible ratio is `21:1` (black on white); the minimum is `1:1` (identical colors).

### What are WCAG AA and AAA standards?

WCAG (Web Content Accessibility Guidelines) defines two conformance levels for color contrast.  
  
**AA** requires `4.5:1` for normal text and `3:1` for large text. This is the standard requirement for most websites and the legal baseline in many jurisdictions.  
  
**AAA** requires `7:1` for normal text and `4.5:1` for large text. Provides enhanced accessibility — government, healthcare, and content for users with low vision should aim for AAA where possible.

### What counts as large text?

Large text is defined as **18pt (24px) or larger** for regular weight, or **14pt (≈18.66px) or larger** for bold text. Large text has lower contrast requirements because larger characters are easier to read.

### What about UI components?

WCAG 2.1 added a separate rule (1.4.11) requiring `3:1` contrast for non-text UI components — buttons, form fields, focus indicators, icons, charts. Same threshold as large text, applied to anything visually meaningful that isn't body copy.

### Why is color contrast important?

Good color contrast ensures that text is readable by people with low vision, color blindness, or those viewing screens in bright environments. Poor contrast can make content inaccessible to **millions of users** and may violate accessibility laws like the ADA, Section 508, or the European Accessibility Act.

### Does this tool work offline?

Yes. The tool runs entirely in your browser with no server required. Once loaded, it works without an internet connection and your color choices are never sent anywhere. The URL hash (`#fg=…&bg=…`) makes results shareable without any server involvement.

### Tips for better contrast

**Test early** — check contrast during the design phase, not after development.  
**Consider context** — text over images may need a semi-transparent overlay.  
**Don't rely on color alone** — use icons, underlines, or other visual cues alongside color (helps colorblind users).  
**Test with real users** — automated tools catch many issues, but user testing reveals more.

---

### Related tools

Need a full accessibility + SEO audit? Run the [SEO Analyzer](https://freshjuice.dev/tools/seo-analyzer/) — it checks contrast, heading structure, alt text, meta tags, and more.