Kontrola kontrastu barev

Zkontrolujte kontrast popředí/pozadí oproti WCAG AA a AAA. Podívejte se na aktualizaci poměru při výběru barev.

Color Contrast Checker

Live

Foreground (text)

Background

17.85:1

Contrast ratio

AA normal: PassAA large: PassAAA normal: PassAAA large: Pass

Readable headline sample

Body text at normal size should stay clear against this background. Adjust colors until WCAG targets pass.

Small caption text for density checks.

CSS output

color: #0f172a;
background-color: #ffffff;
/* contrast ratio: 17.85:1 */

Key capabilities

Zkontrolujte kontrast popředí/pozadí podle pokynů WCAG AA a AAA.
Běží ve vašem prohlížeči
Zdarma k použití

Jak používat

Vyberte barvy textu (popředí) a pozadí.
Odečtěte kontrastní poměr a výsledky AA/AAA.
Upravujte, dokud nepřekročíte cílovou úroveň.

How this tool works

Vyberte barvy textu (popředí) a pozadí.
Odečtěte kontrastní poměr a výsledky AA/AAA.
Upravujte, dokud nepřekročíte cílovou úroveň.

Recommended settings

Nejprve použijte výchozí možnosti a v případě potřeby upravte

Supported formats

Text / on-page input

File size and limits

Velmi složité vícevrstvé náhledy se mohou na starších telefonech zdát pomalejší.

Privacy

Generátory barev a CSS běží výhradně ve vašem prohlížeči. Náhledy a konverze nikdy nenahrávají vaše styly.

Common use cases

Používejte Color Contrast Checker, kdykoli potřebujete: Zkontrolujte kontrast popředí/pozadí podle pokynů WCAG AA a AAA.

Troubleshooting

Náhled po vložení vypadá jinak

Zkontrolujte, zda na stránce nejsou konkurenční CSS (resety, zděděné barvy). Vygenerované pravidlo nejprve zkopírujte do izolované šablony stylů.

Časté dotazy

Nahrává to můj CSS?

Ne. Generátory a konvertory běží ve vašem prohlížeči s živým náhledem.

Potřebuji účet?

Ne. Otevřete nástroj, upravte ovládací prvky a zkopírujte CSS.