Color Contrast Checker
Check if your text and background colors meet WCAG 2.1 accessibility standards. Get instant AA/AAA pass/fail and suggested fixes — all in your browser.
Frequently Asked Questions
What is WCAG contrast ratio and why does it matter?▼
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background colors to ensure legibility for people with low vision or color blindness. A ratio of 4.5:1 is required for normal text (AA), 3:1 for large text (AA), and 7:1 for the strictest AAA standard.
What is the difference between WCAG AA and AAA?▼
AA is the legal standard for most accessibility requirements (e.g., ADA, EN 301 549). It requires 4.5:1 contrast for normal text and 3:1 for large text (18pt+ or 14pt+ bold). AAA requires 7:1 for normal text and 4.5:1 for large text — used when maximum accessibility is the goal.
What counts as large text in WCAG?▼
Large text is defined as 18pt (24px) or larger for regular weight, or 14pt (approximately 18.67px) or larger for bold text. Large text has a lower contrast requirement (3:1 for AA) because it is inherently easier to read.
How do I fix a failing contrast ratio?▼
To increase contrast: darken your text color, lighten your background, or both. Even small adjustments (e.g., #777 to #595959) can move from failing to passing. This tool shows the ratio live as you adjust colors, so you can iterate until you pass.
Does contrast ratio apply to icons and UI components?▼
Yes. WCAG 1.4.11 (Non-text Contrast) requires a 3:1 ratio for UI components and informational graphics — such as icons, form inputs, focus indicators, and chart lines. Use this tool to check those as well, not just text.
Related Products
on GumroadDeveloper Productivity Bundle
Stop rebuilding the same setup every project. 51 VSCode snippets, 40 Git aliases, 5 Docker Compose stacks, 5 GitHub Actions workflows, 5 README templates, and a dotfiles kit. Set up a professional dev environment in under an hour.
Buy on Gumroad →AI Prompt Engineering Toolkit
58 structured prompt templates for Claude, ChatGPT, and Gemini — organized by use case. Code Review, Debugging, Documentation, Architecture, and 10 model-specific tips. Stop writing prompts from scratch.
Buy on Gumroad →Developer Cheat Sheet Bundle
10 print-ready cheat sheets for the tools developers use every day: Git, Docker, Linux CLI, SQL, Regex, HTTP Status codes, VS Code shortcuts, Bash scripting, jq/JSON, and Markdown.
Buy on Gumroad →You Might Also Need
CSS Specificity Calculator
Calculate CSS selector specificity as (inline, ID, class, element) notation. Compare two selectors to see which wins the cascade. Supports :not(), :is(), :has(), :where(), attribute selectors, and pseudo-elements.
Open free tool →
CSS Clip-Path Generator
Generate CSS clip-path values visually. Choose from 16 polygon presets (triangle, star, arrow, hexagon), circle, ellipse, and inset shapes. Live preview, one-click copy. Free, no signup.
Open free tool →
CSS Formatter & Minifier
Format and beautify CSS with consistent indentation, or minify it to reduce file size. Handles @media, @keyframes, nested rules, and comments. Runs in your browser.
Open free tool →
More Free Tools
Related Articles
Color Picker Tools for Developers: HEX, RGB, HSL, and CSS Custom Properties in 2026
Use color picker tools effectively in web development. HEX/RGB/HSL conversion, CSS theming with custom properties, WCAG contrast checking, and palette generation.
WCAG Color Contrast Guide: Accessible Web Design
Master WCAG color contrast requirements for accessible web design. Understand contrast ratios, AA vs AAA standards, how to test your designs, and practical tips for passing accessibility audits.
Color Picker Hex RGB — Convert and Pick Colors for Web Development
Color picker hex RGB — convert between HEX, RGB, HSL, and CSS color formats instantly. Learn how color systems work in CSS, JavaScript, and design tools with practical examples.
CSS Gradient Generator Online: Create Linear, Radial & Conic Gradients Free
Generate beautiful CSS gradients online for free. Build linear, radial, and conic gradients visually, copy the CSS code, and use it instantly in your project — no install needed.
CSS Gradient Guide 2026: Linear, Radial, Conic, and Advanced Patterns
Master CSS linear, radial, and conic gradients with copy-paste code. Includes performance tips, animation techniques, dark mode handling, gradient mesh alternatives, and production UI design recipes.
Enjoying this tool? Get more like it.
Weekly developer tool guides, productivity playbooks & AI tricks. Free. No spam.
Unlock AI-Powered Dev Tools
- ⚡ AI Code Review, Doc Generator & SQL Builder
- ⚡ All premium templates & early access
- ⚡ Member discounts on Gumroad products
$9/mo after trial · Cancel anytime
Want the full toolkit?
Get DevPlaybook Pro
Every template, guide, boilerplate, and automation script in one bundle. 13 premium products — grab them all at once and save big.
MIT licensed · Instant download · No subscription
See what's included → Browse all deals →