WCAG Color Contrast Checker (AA / AAA)

Check text/background contrast against WCAG 2.1 AA and AAA - live preview

🔒 %100 browser içinde🆓 Sonsuza kadar ücretsiz⚡ Kayıt yok
Not: Aşağıdaki tool arayüzü şu an sadece İngilizce. UI'ları tek tek çeviriyoruz. Bu tool'u İngilizce görüntüle →
The quick brown fox jumps over the lazy dog - 0123456789
14.33:1
Contrast ratio · Normal text
AA (normal ≥ 4.5)PASS
AA large (≥ 3)PASS
AAA (normal ≥ 7)PASS
AAA large (≥ 4.5)PASS

Uses the WCAG 2.1 sRGB relative-luminance formula. “Large text” is 24px (18pt) regular or 18.66px (14pt) bold.

Nasıl çalışır

  1. 1
    Pick foreground and background

    Type HEX or use the color pickers. Alpha is supported and blended over the background.

  2. 2
    Read the ratio

    The exact contrast ratio appears with AA / AAA pass/fail badges for normal and large text.

  3. 3
    Nudge until it passes

    Sliders adjust lightness in tiny steps so you can find the closest passing shade.

WCAG Color Contrast Checker (AA / AAA) Hakkında

Free WCAG color contrast checker. Pick foreground and background colors to see the exact contrast ratio (per WCAG 2.1 relative luminance) and pass/fail badges for AA, AA Large, AAA, and AAA Large. Live preview of real text at the actual colors. Runs entirely in your browser. 712 Tools üzerindeki WCAG Color Contrast Checker (AA / AAA) tamamen browser'ınızda native JavaScript API'lerle çalışır - hiçbir server verilerinizi görmez. Yani anında sonuç, tam privacy ve upload limiti yok.

İster bir debugging session olsun, ister hızlı bir sanity check ya da bir production incident'ı - bu tool istediğiniz kadar ücretsiz kullanılabilir. Watermark yok, kayıt yok, tool içinde reklam yok.

Sık sorulan sorular

What ratios does WCAG require?

AA needs 4.5:1 for normal text and 3:1 for large. AAA needs 7:1 for normal and 4.5:1 for large. 'Large' is 18pt (24px) regular or 14pt (18.66px) bold.

Which luminance formula is used?

The WCAG 2.1 sRGB relative-luminance formula - the same one webaim.org and axe use. Results match to the fourth decimal.

What about APCA?

APCA (the proposed WCAG 3 algorithm) isn't included yet - it's still in draft. This tool sticks to the current WCAG 2.1 formula that accessibility auditors and lawyers actually cite.

Devamını oku

5 dk okuma

The WCAG color contrast checklist every designer should bookmark

AA vs AAA, the math behind the ratios, why gray-on-gray fails on retina screens, and the two-line HTML that makes a color contrast test run in seconds.

İlgili tools

Color Converter

Convert between HEX, RGB, HSL, and CMYK with live preview

Palette Generator

Generate harmonious color palettes from a base color

CSS Gradient

Design linear, radial, and conic CSS gradients with live preview

Box Shadow

Design multi-layer CSS box-shadows with live preview

Glassmorphism

Design frosted-glass CSS cards with live preview and copy-ready code

Physics Editor

Free online sprite hitbox editor - auto-trace collision polygons and export for Phaser, Matter.js, Rapier or any 2D engine