Color Contrast Checker
Free, no signup. Compare foreground and background colors against WCAG 2.2 AA and AAA, get the closest practical hex alternatives that pass, or check a live URL's real rendered contrast.
Check a URL's rendered contrast
Loads the page in a metered headless browser and runs axe-core's color-contrast rule against the real computed styles — the resolved foreground, background, opacity, inherited color, and CSS variables after the cascade, not a static-HTML color guess. This is the same Browser-Rendering pipeline the AccessibilityWeb accessibility means designing sites so people with disabilities can use them, per the W3C's WCAG guidelines. It overlaps with SEO in specific, checkable ways — alt text, heading structure, descriptive link text, captions, and page speed all serve both audiences — but Google has said accessibility itself is not a ranking factor, and most WCAG success criteria (keyboard focus order, ARIA live regions, form labels) have no SEO effect at all. Tester uses, filtered to just contrast findings.
Checks run from our server; we fetch the URL you enter and don't keep the results. This launches a metered browser audit shared with the Accessibility Tester's rendering budget, so it is rate-limited per visitor and per target site. Anonymous run-level outcome counters may be used for aggregate research; URLs, domains, IPs, and identifiers are never included, and no statistic is released below 100 runs.
Runs entirely in your browser — nothing you paste is uploaded or stored. Anonymous run-level outcome counters may be used for aggregate research; URLs, domains, IPs, and identifiers are never included, and no statistic is released below 100 runs.
Palette audit
Paste CSS variables, token declarations, or a hex list. The matrix checks every color as text against every other color as a background.
Site passport Local context for this saved site
Local data
Saved targets, named lists, and recent check summaries remain only in this browser.
Rate this tool
Example
Example data — engine-verified result
#777777 foreground on #FFFFFF: 4.48:1
- Pass: AA large text and UI (3:1).
- Below: AA normal text and AAA large text (4.5:1), plus AAA normal text (7:1).
- Nearest AA normal-text alternative:
#767676, one step darker, at 4.54:1.
How it works
Paste mode calculates contrast from the WCAG relative-luminance formula, not by simply comparing RGB values. The suggestions preserve the foreground hue and saturation while walking its lightness toward the nearest passing color, then verify the rounded hex result. The URL mode above instead loads the page in a metered headless browser and reads each element's actual computed color and background after the CSS cascade resolves — the only way to catch contrast failures caused by inherited color, semi-transparent backgrounds, CSS variables, or the browser's default stylesheet, none of which a pasted color list can see.
Use the right rule
Normal-size text needs 4.5:1 for AA. Large text (at least 24px regular or 18.66px bold) and non-text UI indicators need 3:1. Color should never be the only way to communicate a state.
Frequently asked questions
What contrast ratio do I need?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text and non-text UI components. AAA requires 7:1 for normal text and 4.5:1 for large text.
Does this prove my page is accessible?
No. It checks color pairs, not typography, focus states, images of text, or (in paste mode) real rendered backgrounds. Treat it as a design-time check and test the finished interface too.
Where does my palette go?
In paste mode it stays in the browser — paste CSS custom properties, Tailwind-style name/value tokens, or a loose list of hex colors. Only the URL mode sends anything to our server, and that is the public page address you enter, not a palette.
How is the URL mode different from pasting colors?
Pasted colors give you exact math on the pair you type. The URL mode loads the real page in a metered headless browser and reads each element's actual computed color and background after the CSS cascade, inheritance, opacity, and browser defaults are resolved — the only way to get a genuine contrast verdict for a live page, since a static-HTML color guess can be wrong.
Feature requests for Color Contrast Checker
Upvote what you want most. New ideas can be submitted from the floating Feedback menu; requests appear here once approved, and the most-wanted rise to the top.
You won't be emailed about that request anymore.
Loading…
➕ Request a feature
New requests are reviewed before they appear here.
Araç hakkında
WCAG 2.2 renk kontrastını tarayıcıda denetleyin, en yakın geçen ön plan renklerini bulun ve CSS renk belirteçlerini kontrol edin.
Ücretsizdir ve kayıt gerektirmez. Ön plan ve arka plan çiftlerini AA ve AAA oranlarıyla karşılaştırın, geçen hex alternatiflerini alın veya canlı URL'nin gerçek oluşturulmuş kontrastını ölçün.
Özellikler
- WCAG 2.2 AA ve AAA için ön plan/arka plan oranlarını hesaplama.
- Geçen en yakın ön plan renklerini ve pratik hex alternatiflerini önerme.
- CSS özel özelliklerini, Tailwind tarzı ad/değer belirteçlerini veya hex listesini yerel olarak denetleme.
- URL modunda gerçek oluşturulmuş renk ve arka plan değerlerini headless tarayıcıda ölçme.
- Her bulgu için kontrast oranı, eşik ve açık tasarım rehberi gösterme.
Nasıl çalışır
Bir URL girin veya CSS/renkleri yapıştırın. Yapıştırma modunda çiftleri ve renk belirteçlerini inceleyin; URL modunda sayfanın oluşturulmasını bekleyip her öğenin hesaplanmış ön plan ve arka planını okuyun. AA/AAA bulgularını, oranı ve en yakın geçen alternatifleri karşılaştırın; tasarım değişikliğinden sonra arayüzü yeniden test edin.
Sınırlamalar
- Kontrast denetimi tipografiyi, odak durumlarını veya metin görüntülerini kapsamaz; yapıştırma modunda gerçek oluşturulmuş arka plan da ölçülmez. Son arayüzü ayrıca test edin.
- URL modu sayfayı ölçümlü headless tarayıcıda yükler ve gerçek hesaplanmış stilleri okur; yapıştırma modu yalnızca girdiğiniz renk çiftleri için matematik yapar. Bu, erişilebilirliğin tamamını kanıtlamaz.
Sık sorulan sorular
Hangi kontrast oranına ihtiyacım var?
WCAG AA normal metin için 4.5:1, büyük metin ve metin olmayan kullanıcı arayüzü bileşenleri için 3:1 ister. AAA normal metin için 7:1, büyük metin için 4.5:1 ister.
Bu sayfamın erişilebilir olduğunu kanıtlar mı?
Hayır. Araç renk çiftlerini kontrol eder; tipografi, odak durumları, metin görselleri veya yapıştırma modunda gerçek arka planları değerlendirmez. Son arayüzü kapsamlı bir erişilebilirlik denetimiyle ayrıca test edin.
URL modu renk yapıştırmaktan nasıl farklı?
URL modu gerçek sayfayı ölçümlü bir headless tarayıcıda yükler ve CSS cascade, kalıtım, opaklık ve varsayılanlardan sonra hesaplanan renkleri okur. Yapıştırma modu yalnızca yazdığınız renk çifti üzerinde kesin matematik yapar.
Paletim nereye gider?
Yapıştırılan CSS ve renkler tarayıcıda kalır; yalnızca URL modu girdiğiniz herkese açık sayfa adresini sunucuya gönderir. Palet gönderilmez veya saklanmaz.
Gerçek sayfa kontrastını nasıl doğrularım?
URL modunda sayfayı çalıştırın, her bulgunun hesaplanmış ön plan ve arka planını inceleyin, renkleri tasarım sisteminde düzeltin ve son oluşturulmuş arayüzü klavye, odak ve diğer erişilebilirlik kontrolleriyle yeniden test edin.