Color Contrast Checker

Check color contrast ratios for WCAG 2.1 compliance. Enter foreground and background colors to instantly see AA/AAA pass/fail results for normal and large text.

Presets:
#
#

Pijamalı hasta yağız şoför çabuk davran

Okunabilirlik testi için 16px normal gövde metni.

14px küçük metin — düşük kontrasta sahip okumak daha zordur.

Kontrast Oranı

AA Normal Metin

Minimum 4,5:1

Geçti Başarısız

AA Büyük Metin

Minimum 3:1

Geçti Başarısız

AAA Normal Metin

Minimum 7:1

Geçti Başarısız

AAA Büyük Metin

Minimum 4,5:1

Geçti Başarısız

How to Use

1

Pick your colors

Enter foreground and background colors using hex codes or the color picker.

2

View contrast ratio

See the calculated contrast ratio instantly as you type or select colors.

3

Check compliance

Review WCAG AA and AAA pass/fail results for both normal and large text.

Sıkça Sorulan Sorular

WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18px bold or 24px regular). AAA is stricter, requiring 7:1 for normal text and 4.5:1 for large text. Most accessibility laws reference AA as the minimum standard, while AAA is recommended for critical content like government and healthcare websites.
WCAG defines large text as at least 18 points (24px) for regular weight or 14 points (approximately 18.66px) for bold weight. Large text has a lower contrast requirement because bigger characters are inherently easier to read. This distinction matters when designing headings versus body copy.
To improve contrast, darken your text color or lighten your background (or vice versa). Increase the lightness difference between foreground and background in HSL. As a rule of thumb, ensure at least 50% lightness difference. You can also try using a darker shade from the same color family — for example, switching from blue-400 to blue-700 against a white background.
A ratio of 4.5:1 or higher meets WCAG AA for normal text and works well for most users. For optimal readability, aim for 7:1 or above. Pure black (#000000) on white (#FFFFFF) gives the maximum 21:1 ratio. Studies show that extremely high contrast like pure black on pure white can cause eye strain for some users — a slightly off-white background (#F8F8F8) or dark gray text (#1A1A1A) provides excellent readability with less harshness.
Yes. You must test contrast ratios separately for both light and dark modes because the foreground-background relationship changes. A color pairing that passes AA in light mode may fail in dark mode. Additionally, light text on dark backgrounds can appear brighter than expected due to the irradiation illusion — consider using slightly thinner font weights or slightly muted text colors in dark mode.

About WCAG Color Contrast

The WCAG color contrast guidelines were developed by the World Wide Web Consortium (W3C) as part of the Web Content Accessibility Guidelines. First published in 1999, WCAG has evolved through versions 1.0, 2.0, 2.1, and 2.2, with each iteration refining accessibility standards for web content.

The contrast ratio formula is based on relative luminance calculations from the sRGB color space. Each color channel is converted from gamma-corrected sRGB to linear light, then combined using the standard luminance coefficients: 0.2126 for red, 0.7152 for green, and 0.0722 for blue. The contrast ratio is computed as (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter luminance.

Section 508 of the US Rehabilitation Act and the European Accessibility Act both reference WCAG criteria. Meeting WCAG AA is typically the minimum legal requirement, while AAA represents the highest level of accessibility conformance.

İlgili Makaleler

Öğreticiler

CSS light-dark() Fonksiyonu: Yerel Tema Değiştirme

Ara 11, 2025
Öğreticiler

Renk API'si Tasarlamak: Renk Verisi için REST Uç Noktaları

Ara 01, 2025
Renk Soruları

Siyah Bir Renk mi? Bilim ve Tasarım Cevabı

Kas 15, 2025