Sprawdzanie kontrastu

Sprawdź zgodność WCAG 2.1 dla dostępności

{{ __t('small_text') }}: The quick brown fox jumps over the lazy dog.

{{ __t('large_text') }}: The quick brown fox.

{{ ratio }}:1

{{ __t('contrast_ratio') }}

{{ passAAsmall ? '✓' : '✗' }}
AA Small (4.5:1)
{{ passAAlarge ? '✓' : '✗' }}
AA Large (3:1)
{{ passAAAsmall ? '✓' : '✗' }}
AAA Small (7:1)
{{ passAAAlarge ? '✓' : '✗' }}
AAA Large (4.5:1)

Po co sprawdzać kontrast?

Około 8 % mężczyzn i 0,5 % kobiet ma jakąś formę zaburzenia widzenia kolorów. Niski kontrast utrudnia czytanie — zwłaszcza w małych rozmiarach i na słabych ekranach. WCAG (Web Content Accessibility Guidelines) określa wymagane minima — w wielu krajach prawnie obowiązkowe.

Progi WCAG 2.1

Poziom AA wymaga 4,5:1 dla zwykłego tekstu (poniżej 24 px lub 18,66 px pogrubionego) i 3:1 dla dużego tekstu. Poziom AAA wymaga 7:1 i 4,5:1. Komponenty UI i grafiki potrzebują min. 3:1. Wartości oparte są na relatywnej luminancji wg wzoru WCAG.