AnyTools

Loading your tools...

Preparing your comprehensive developer toolkit

Crafting the perfect developer experience

🗂️ Browse Tools by Category

🏠 View All 250+ tools12 categories • 100% free • No registration required

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.

Features

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.

Usage Guide

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.

Technical Details

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.

Renk Kontrast Hesaplayıcı

Name: Renk Kontrast Hesaplayıcı
Availability: InStock
Rating: 4.8 (100 reviews)
Author: AnyTools

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

1️⃣

Renkleri seç

Ön plan ve arka plan için HEX değerlerini seçin veya yapıştırın.

2️⃣

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.

3️⃣

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.

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.

🧪WCAG 2.1 Contrast (1.4.6)-Enhanced contrast requirements for AAA conformance.

🧭MDN - Calculating luminance-Background on the linear RGB formula used in accessibility tooling.

📐W3C - Contrast ratio math-Details on the ratio formula, rounding, and rationale.

🎨Inclusive Design Cards-Tips on pairing colors and typography for diverse audiences.

📝Güncelleme günlüğü

📌v1.0.251117

v1.0.0Initial release with WCAG table, luminance readout, and live preview card.(2025-11-17)

📦Önerilen bileşenler

📦colorTiny utility to parse and manipulate color spaces in JavaScript.

🔧chroma-jsColor manipulation library with contrast helpers and scales.

User Comments

AnyTools

Loading your tools...

Preparing your comprehensive developer toolkit

Crafting the perfect developer experience

🗂️ Browse Tools by Category

🏠 View All 250+ tools12 categories • 100% free • No registration required

Renk Kontrast Hesaplayıcı

Features

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.

Usage Guide

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.

Technical Details

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.

Renk Kontrast Hesaplayıcı

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

1️⃣

Renkleri seç

Ön plan ve arka plan için HEX değerlerini seçin veya yapıştırın.

2️⃣

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.

3️⃣

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.

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.