AnyTools
🌓
Renk Kontrast Hesaplayıcı
Herhangi bir ön plan ve arka plan rengi için WCAG 2.1 kontrast oranlarını hesaplayın, erişilebilirlik sonuçlarını önizleyin ve AA veya AAA kriterlerini karşılayan paletleri dışa aktarın.
Renk girişleri
Ön plan
Arka plan
Önizleme
Örnek metin
Preview headingAccessible interfaces pair vibrant brand colors with enough contrast to keep copy readable.
Kontrast sonuçları
Kontrast oranı
19.79:1
Göreceli parlaklık
Ön plan0.003
Arka plan1.000
| Criterion | Required | Status | Notes |
|---|---|---|---|
| AA – normal text | 4.5:1 | Geçti | Body copy ≥ 4.5:1 |
| AAA – normal text | 7.0:1 | Geçti | High-importance copy ≥ 7:1 |
| AA – large text | 3.0:1 | Geçti | Text ≥ 18pt regular or 14pt bold ≥ 3:1 |
| AAA – large text | 4.5:1 | Geçti | Large text ≥ 4.5:1 |
| UI graphics/icons | 3.0:1 | Geçti | Essential icons and visual states ≥ 3:1 |
Design guidance
Use the ratio table as a guardrail and iterate until every state reaches the target level.
- Add transparency or overlays when placing text on photography to preserve contrast.
- Reserve AAA for mission critical copy; AA is an excellent default for most dashboards.
- Document the approved color pairs in your design system so developers reuse compliant palettes.
❓Renk kontrast testi nedir
Color contrast testing ensures text or icons remain legible by measuring the difference between foreground and background luminance, a key requirement in WCAG and most brand guidelines.
✨Temel özellikler
🎨
Canlı renk seçimi
Ant Design seçici ile ön plan ve arka plan renklerini ayarlayın veya kesin HEX değerlerini yazın.
📊
WCAG matrisi
Normal metin, büyük metin ve UI grafikleri için AA/AAA gereksinimlerini tek bir tabloda görün.
🧮
Doğru parlaklık
Kontrast oranları, doğrusallaştırılmış RGB kanallarını kullanarak WCAG 2.1'i takip eder ve renk başına parlaklık okumalarını içerir.
👁️
Önizleme bloğu
Seçtiğiniz paletle canlı bir örnek kart içindeki başlıkları ve paragrafları test edin.
📋Kullanım kılavuzu
Renkleri seç
Ön plan ve arka plan için HEX değerlerini seçin veya yapıştırın.
Oranı gözden geçir
Hesaplanan kontrast oranını ve geçti/başarısız içgörüleri için AA/AAA tablosunu kontrol edin.
Metni ayarla
Gerçek etiketleri, düğmeleri veya pazarlama metnini önizlemek için örnek metni düzenleyin.
📚Teknik tanıtım
🔢Relative luminance
Each RGB channel is converted to a linear value using the WCAG gamma curve before computing luminance with coefficients 0.2126, 0.7152, and 0.0722.
⚖️Contrast ratio
The ratio formula (L1 + 0.05) / (L2 + 0.05) compares the lighter and darker colors to ensure consistent readability across devices.
📐Thresholds
AA normal text requires ≥ 4.5:1, large text ≥ 3:1, AAA normal needs 7:1, AAA large 4.5:1, and graphical objects should meet 3:1.
❓
Frequently Asked Questions
❓
Does large text use different thresholds?
Yes. Text ≥ 18px regular or 14px bold qualifies as large and only needs 3:1 for AA or 4.5:1 for AAA.
💬
How do I test gradients?
Check the lightest and darkest stops in the gradient. Each stop pair should meet the desired ratio.
🔍
Do icons count as text?
Solid icons and essential UI graphics should meet at least 3:1 contrast relative to their background.
💡How To & Tips
🧭
Start with brand palette
Swap colors quickly to test both light and dark themes from the same base palette.
🪄
Iterate small steps
Nudge HEX values or use the color picker slider to see how little tweaks affect compliance.
📝
Preview content
Paste real UI copy into the preview block to evaluate hierarchy and emphasis.
🔗Related Documents
📖WCAG 2.1 Contrast (Success Criterion 1.4.3)-Official guidance on minimum contrast levels for text and images of text.
📝Güncelleme günlüğü
📌v1.0.251117v1.0.0Initial release with WCAG table, luminance readout, and live preview card.(2025-11-17)
📦Önerilen bileşenler
User Comments
Loading...