Contrast Checker

Check color contrast ratios per WCAG 2.1 guidelines. Test foreground and background color combinations for AA and AAA compliance.

Contrast Ratio: 17.85:1
AA Large
AA
AAA
1:13:14.5:17:121:1
Foreground Color
#0F172A
Background Color
#FFFFFF
Result
Sample text with these colors
17.85:1
AA Normal Text✓ AA
AA Large Text✓ AA
AAA Normal Text✓ AAA
AAA Large Text✓ AAA
🛡️Zero server logs. Contrast calculations run 100% locally in your browser. No data ever leaves this tab.
🛠️Developer Tool Belt
More Image ToolsSprite Sheet GeneratorImage ResizerPlaceholder Image GeneratorSVG RasterizerImage CropperFavicon GeneratorView all image tools →

Contrast Checker

Contrast Checker evaluates color combinations against WCAG 2.1 guidelines. All calculations are performed locally in your browser.

🔒 Client-side only⚡ Web Worker processing🌐 Works offline🛡️ Zero server logs

How to Check Color Contrast

  1. Select or enter a foreground (text) color using the first color picker.
  2. Select or enter a background color using the second color picker.
  3. View the contrast ratio and WCAG compliance status for AA and AAA levels.

Frequently Asked Questions

Questions about contrast checking? We have answers.

What is WCAG contrast ratio?

The WCAG contrast ratio measures the difference in luminance between two colors. It ranges from 1:1 (same color) to 21:1 (black on white).

What are AA and AAA requirements?

AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text.

Is this tool free and private?

Yes, absolutely. All calculations happen instantly in your browser. No data is sent to any server.

Automated E2E Test Suite Logs

Our build systems validate edge-case processing under extreme conditions before each deployment.

Stability
100.0%
Passed
13/13
Env
V8-Sandbox
Engine: Vitest RunnerUpdated: 2026/6/13 02:40:10📦 Download Test Datasets
PASSPure Function Unit Tests should handle valid color input
PASSPure Function Unit Tests should reject invalid input
PASSPure Function Unit Tests should not mutate original input
PASSPure Function Unit Tests should handle boundary input
PASSContrastCheckerTool should render Input (Foreground/Background) and Result labels
PASSContrastCheckerTool should show contrast ratio
PASSContrastCheckerTool should render privacy strip
PASSContrastCheckerTool should render sample preview text
PASSContrast Checker — WCAG Calculation Tests should calculate contrast ratio synchronously
PASSContrast Checker — WCAG Calculation Tests should return ~21 for black on white
PASSContrast Checker — WCAG Calculation Tests should compute contrast result with compliance flags
PASSContrast Checker — WCAG Calculation Tests should return 1:1 ratio for same colors
PASSContrast Checker — WCAG Calculation Tests should be commutative
⏱️ 0.18ms📦 1.5KB🎚️ Max Nesting: 3🌿 AST Nodes: 48🛡️ V8 Heap: Healthy
$ codecaven-validator --scope=tool● CLUSTER COMPLIANT

Tool Changelog & Updates

v1.3.02026-06-12
  • Feature: Color suggestion engine — when contrast fails AA or AAA, the tool automatically finds the closest accessible color by adjusting lightness, with a one-click apply button.
  • Feature: Multi-format color display — HEX, RGB, HSL, and CMYK representations with toggle buttons for quick switching.
  • UX: Interactive contrast scale with AA/AAA threshold markers and real-time cursor.
  • Fix: Fixed dark theme contrast preview visibility — replaced static white backgrounds with theme-aware CSS variables.
v1.2.02026-06-11
  • Feature: Color suggestion engine — when contrast fails AA or AAA, the tool automatically finds the closest accessible color by adjusting lightness, with a one-click apply button.
  • Feature: Multi-format color display — each color now shows HEX, RGB, HSL, and CMYK representations with toggle buttons for quick switching.
  • UX: Interactive contrast scale — a visualized gradient bar from 1:1 to 21:1 with AA/AAA threshold markers and a real-time cursor showing current ratio position.
  • UX: Multiple color format input — the hex input now accepts HEX, rgb(), and hsl() formats and converts them automatically.
  • Fix: Fixed dark theme contrast preview visibility — replaced static white backgrounds with theme-aware CSS variables for clear readability in both light and dark modes.
  • Fix: Removed external color library dependency — all color conversion and contrast calculations now use pure JavaScript implementations for reliable server-side rendering.
v1.1.02026-06-11
  • Feature: Added comprehensive Vitest test suite covering Tool rendering, worker operations, and shared operation logic — all 871 image tests passing.
  • Fix: Fixed OffscreenCanvas mock patterns in tests for proper constructor instantiation.
v1.0.02026-06-11
  • Feature: Initial release with WCAG 2.1 contrast ratio calculation and AA/AAA compliance checking — 100% client-side.
  • UX: Dual color pickers with hex input fields and live contrast preview with sample text.
  • UX: Real-time AA/AAA pass/fail indicators for normal text, large text, and UI components.
  • Security: All contrast calculations performed locally — zero data sent to any server.