·web
Color Contrast (WCAG)
Pick foreground + background colors, compute the contrast ratio, see WCAG AA / AAA pass/fail live. Separate verdicts for normal and large text.
accessibility · wcag · color · contrast
Pick foreground + background colors, compute the contrast ratio, see WCAG AA / AAA pass/fail live. Separate verdicts for normal and large text.
accessibility · wcag · color · contrast
A designer's "let me lighten this gray a bit" decision can become unreadable for a colorblind user. WCAG contrast ratio turns that intuition into math. This lab updates the ratio live as you change fg/bg, with a real preview block.
hsl(222° 47% 11%)
hsl(48° 96% 89%)
The quick brown fox
jumps over the lazy dog. 1234567890.
16.03:1 · Lc -95.1
normal text
< 18pt / < 14pt bold
large text
≥ 18pt / ≥ 14pt bold
UI / graphics
WCAG 1.4.11 non-text
APCA kullanır sRGB^2.4 transfer fonksiyonu, direktional — metin renginin arka plana göre konumu önemlidir. Negatif Lc: koyu arka plan üzerinde açık metin.
| Level | Normal text | Large text (≥18pt or ≥14pt bold) |
|---|---|---|
| AA (legal minimum in most jurisdictions) | 4.5:1 | 3:1 |
| AAA (sensitive contexts) | 7:1 | 4.5:1 |
WCAG 2.x uses the relative luminance formula:
Then ratio = (L_lighter + 0.05) / (L_darker + 0.05). The green coefficient (0.7152) is highest because the human eye is most sensitive to green.
::placeholder) — most systems lighten input text by ~40% for placeholders. This drops contrast. Account for it in your design.#48d597 against white is 1.8:1 — fail. Use a contrast-tuned variant (a darker shade hitting 4.6:1).Hitting the ratio is the floor. For colorblindness (deuteranopia, protanopia), color alone must not carry information — pair it with an icon or label. A red form error ✓ is OK, but red + icon + text is robust.