WCAG AA és AAA kontrasztellenőrző

Ellenőrizd a színkontrasztot a WCAG 2.2 AA és AAA szintjeihez, próbálj ki szövegméreteket, és keress akadálymentes színváltozatokat.

Vidd a mutatót egy mező fölé, vagy jelöld ki a súgó megjelenítéséhez. Az Escape bezárja.

ElőtérHáttérÁtlátszatlan vászon

Használj HEX, RGB, RGBA vagy HSL formátumot. Az átlátszó színek az átlátszatlan vászonra rétegződnek.

5.84:1

A küszöbök a teljes pontosságú arányt használják, soha nem a megjelenített kerekített értéket.

WCAG 2.2
Szint	Alkalmazás	SC	Minimum	Eredmény
AA	Normál szöveg	1.4.3	4.5:1	Megfelel
AA	Nagy szöveg	1.4.3	3:1	Megfelel
AAA	Normál szöveg	1.4.6	7:1	Nem felel meg
AAA	Nagy szöveg	1.4.6	4.5:1	Megfelel
AA	Felületelemek és grafika	1.4.11	3:1	Megfelel

Előnézeti szövegBetűméret (CSS px)Félkövér

Aa — fiokit.

Normál szöveg: AA ✓ · AAA ✗

Nagy szöveg: legalább 24 CSS px, vagy félkövéren 18,67 CSS px (14 pt).

Javasolt előtér célértékeJelentés

WCAG 2.2
#155bdf / #ffffff (#ffffff)
5.8433:1
AA Normál szöveg (SC 1.4.3): PASS — 4.5:1
AA Nagy szöveg (SC 1.4.3): PASS — 3:1
AAA Normál szöveg (SC 1.4.6): FAIL — 7:1
AAA Nagy szöveg (SC 1.4.6): PASS — 4.5:1
AA Felületelemek és grafika (SC 1.4.11): PASS — 3:1

Ez színpárokat ellenőriz, nem teljes WCAG-megfelelést. A szomszédos színeket, interakciós állapotokat és tényleges tartalmat külön vizsgáld.

W3C — SC 1.4.3 · SC 1.4.6 · SC 1.4.11

Így működik

Állítsd be az előteret, hátteret és az átlátszatlan vásznat. Az AA és AAA eredmények azonnal frissülnek. Próbálj betűméretet és -vastagságot, alkalmazz javasolt színt, vagy töltsd le a jelentést.

Gyakorlati példa

Színek

#155bdf

Gyakori kérdések

Elkülditek a szövegemet egy szervernek?

Nem. A tartalom ebben a böngészőben kerül feldolgozásra. Nem küldjük el a szervernek és nem mentjük el.

Mit érdemes tudni erről az eszközről: WCAG AA és AAA kontrasztellenőrző?

Külön mutatja a szöveges és nem szöveges küszöbértékeket. Ez a színellenőrzés nem tanúsít teljes WCAG-megfelelést.