Color Contrast Checker
100% LocalCheck color contrast ratio and WCAG AA/AAA compliance.
Preview Text
The quick brown fox jumps over the lazy dog
AA Normal
Pass
AAA Normal
Pass
AA Large
Pass
AAA Large
Pass
WCAG contrast
Checks contrast ratio and WCAG AA/AAA compliance for normal and large text. Runs entirely in your browser.
Privacy note
This tool runs entirely in your browser. Your input is never uploaded, logged, or sent to AllDevToolsHub or anyone else, and it keeps working offline once the page has loaded.
How to Use Color Contrast Checker
Set Foreground
Pick or type the text color using HEX, RGB, or HSL.
Set Background
Pick the background color the text will appear on.
Read the Ratio
See the WCAG contrast ratio and pass/fail for AA and AA levels.
Adjust if Needed
Tune either color until the ratio meets your target level.
Color Contrast Checker: the essentials
The Color Contrast Checker computes the WCAG luminance-contrast ratio between two colors and tells you whether it passes AA or AAA for normal and large text. The fastest spot-check before you commit to a button color, link style, or warning state.
Key points
- Generates standard CSS and color values compatible with all modern browsers.
- Pixel-precise output exports production-ready CSS and design assets.
- All processing runs locally, design values and palettes never leave your machine.
What is Color Contrast Checker?
Frequently Asked Questions
Technical Deep Dive
Color Contrast Checker
Enter foreground and background colors to compute contrast ratio and check WCAG AA/AAA compliance for normal and large text. Helps ensure accessible color choices.
WCAG contrast is a ratio, not a vibe. This page computes the same 4.5:1 / 3:1 thresholds WebAIM uses, locally, so brand hex values never leave the tab.
Try foreground #6B7280 on #FFFFFF. That pair fails AA for body text. Darken to #4B5563 and it usually passes.
Large text (18pt+ or 14pt bold) may pass AA at 3:1 while body text fails. Do not ship a failing body pair because the heading passed.
01 Contrast Compliance Matrix
| Context | Standard | Ratio Threshold | User Reach |
|---|---|---|---|
| Body Text | WCAG AA | 4.5 : 1 | Baseline Inclusive |
| Large Text / UI | WCAG AA | 3.0 : 1 | Component Standard |
| Body Text | WCAG AAA | 7.0 : 1 | Maximum Reach |
| Large Text / UI | WCAG AAA | 4.5 : 1 | Strict Compliance |
02 Audit Workflow Pipeline
0.2126R + 0.7152G + 0.0722B.
(L1 + 0.05) / (L2 + 0.05) and compared against WCAG benchmarks.
03 Contrast in Production
WCAG numbers are not the whole story. Real product work needs contrast budgeted across body text, headings, hover states, and UI components, with different thresholds for each. These are the recurring situations that justify checking ratios at all.
-
Body, Large Text, and UI All Have Different Thresholds WCAG 2.2 SC 1.4.3 requires 4.5:1 for body text, 3:1 for large text (18pt+ regular or 14pt+ bold), and SC 1.4.11 requires 3:1 for UI components and graphical objects. Mixing the rules up, over-engineering a button border to 4.5:1, or letting a 17pt heading slip to 3:1, is the most common audit failure.
-
Hover and Focus States, Don't Drop Below Threshold Designers love a subtle hover state, a lighter background, a slightly faded label. Both the resting and hovered colors must clear contrast independently. A button that hovers to 3.8:1 fails AA even if its default state is fine.
-
Dark Mode Has Its Own Trap Pure white on pure black is 21:1 and hurts to look at. Dark mode typically uses #E4E4E7 on #0A0A0A (~17:1), still strong, less harsh. Saturated brand colors that read fine on white often fail spectacularly on near-black; check each accent in both modes.
-
Brand Color as Link Text A perfectly fine "brand blue" for buttons (filled background, white text) often fails 4.5:1 as link text on a white body. Define a separate
--brand-on-lighttoken, a darker variant used only when the brand color is rendered as text against light surfaces. -
Icon-Only Buttons, 3:1, Not 4.5:1 An icon-only close button (✕) is a UI component, not text. It needs 3:1 against its surrounding background per SC 1.4.11, not 4.5:1. This often unblocks subtle icon greys that fail when treated as text.
04 Worked Examples
color: #60a5fa; background: #ffffff;
contrast = 2.83:1 ❌ fails WCAG AA (4.5:1)
color: #1d4ed8; background: #ffffff;
contrast = 7.51:1 ✓ AA body, ✓ AAA body, ✓ everythingBoth colors live on the same hue family (217° in HSL). Lightness is the lever that fixes contrast without abandoning brand identity. Per WCAG 2.2 SC 1.4.3.
#767676 on #ffffff → WCAG2 ratio = 4.54:1 ✓ AA body#767676 on #ffffff → APCA Lc ≈ 58 ✗ insufficient for body text
(APCA recommends Lc 75+ for body)APCA accounts for font weight and size more aggressively. For now the legal/compliance answer is WCAG2; for state-of-the-art readability research, APCA. Both have a place; check both for borderline pairs.
icon: #71717a background: #ffffff
contrast = 4.46:1 ❌ would fail SC 1.4.3 (4.5:1), but that rule is for texticon: #71717a background: #ffffff
contrast = 4.46:1 ✓ passes SC 1.4.11 (3:1) for UI componentsKnowing which Success Criterion applies unblocks designs that would otherwise be over-engineered. Icons, focus rings, chart strokes, and form borders all sit under SC 1.4.11.
05 Related Tools
Contrast is one accessibility check among several. These adjacent tools cover palette generation with accessibility baked in, contrast audited across an entire palette, and the orthogonal axis of color blindness.
Contrast Grid
Audit every color in your palette against every other in a single matrix, find the failing combinations before a designer commits them to tokens.
Accessible Palette Builder
Generate a ramp where every neighbouring pair is guaranteed-accessible, useful when designing dark-mode and light-mode variants together.
Color Blindness Simulator
Contrast doesn't catch confusable hues, a red error state and green success state may have identical luminance and collapse for deuteranopic viewers.