Kontrast kolorow i typografia

W Starożytnym Egipcie hieroglify malowane byly jaskrawymi kolorami na kontrastowym tle - nie dla ozdoby, lecz po to, by można je bylo odczytac nawet w ciemnych komorach swiatyn. Dzis ta sama zasada obowiazuje w web designie: treści muszą być czytelne dla każdego.

Wspolczynnik kontrastu

WCAG definiuje minimalne wymagania dotyczace kontrastu miedzy tekstem a tlem:

| Poziom | Normalny tekst | Duzy tekst (18px bold / 24px) | |:---|:---|:---| | AA | 4.5:1 | 3:1 | | AAA | 7:1 | 4.5:1 |

Przykłady kontrastu

1/* DOBRZE - wysoki kontrast */
2.good-contrast {
3    color: #1a1a2e;            /* Ciemny tekst */
4    background-color: #f5f1e3; /* Jasne tło */
5    /* Kontrast: ~12:1 - spelnia AAA */
6}
7
8/* ŹLE - zbyt niski kontrast */
9.bad-contrast {
10    color: #999999;            /* Szary tekst */
11    background-color: #cccccc; /* Szare tło */
12    /* Kontrast: ~1.8:1 - nie spelnia nawet AA */
13}
14
15/* POPRAWIONE */
16.fixed-contrast {
17    color: #595959;            /* Ciemniejszy szary */
18    background-color: #ffffff; /* Biale tło */
19    /* Kontrast: ~5.9:1 - spelnia AA */
20}

Nie polegaj wylacznie na kolorze

Kolor nie może być jedynym sposobem przekazywania informacji - osoby z daltonizmem mogą nie rozrozniac niektórych kolorow.

1<!-- ŹLE - tylko kolor wskazuje błąd -->
2<style>
3    .error-field { border-color: red; }
4</style>
5<input type="email" class="error-field">
6
7<!-- DOBRZE - kolor + ikona + tekst -->
8<style>
9    .error-field {
10        border: 2px solid #d32f2f;
11        background-image: url('error-icon.svg');
12        background-repeat: no-repeat;
13        background-position: right 8px center;
14    }
15</style>
16<input type="email" class="error-field"
17       aria-invalid="true"
18       aria-describedby="email-err">
19<p id="email-err" class="error-msg">
20    <span aria-hidden="true">&#10060;</span>
21    Podaj poprawny adres e-mail
22</p>

Typografia dostępna

Rozmiar tekstu

1/* Używaj jednostek relatywnych */
2body {
3    font-size: 100%; /* = 16px domyślnie */
4}
5
6h1 { font-size: 2rem; }      /* 32px */
7h2 { font-size: 1.5rem; }    /* 24px */
8p  { font-size: 1rem; }      /* 16px */
9small { font-size: 0.875rem; } /* 14px - minimum! */
10
11/* NIGDY nie blokuj powiekszania tekstu */
12/* ŹLE */
13html { font-size: 16px !important; }
14/* DOBRZE */
15html { font-size: 100%; }

Interlinia i odstepy

1/* WCAG wymaga minimum: */
2p {
3    line-height: 1.5;        /* Interlinia: 1.5x rozmiar fontu */
4    letter-spacing: 0.12em;  /* Odstepy miedzy literami */
5    word-spacing: 0.16em;    /* Odstepy miedzy slowami */
6}
7
8/* Odstep miedzy akapitami >= 2x rozmiar fontu */
9p + p {
10    margin-top: 2em;
11}

Szerokosc tekstu

1/* Optymalna szerokosc linii: 50-80 znaków */
2.article-content {
3    max-width: 70ch; /* 70 znaków */
4    margin: 0 auto;
5}

Narzędzia do sprawdzania kontrastu

W CSS możesz użyć

color-contrast()

1/* Użyj zmiennych CSS dla spojnosci */
2:root {
3    --text-primary: #1a1a2e;
4    --text-secondary: #4a4a5a;
5    --bg-primary: #ffffff;
6    --bg-secondary: #f5f1e3;
7    --accent: #8b6914;
8    --error: #d32f2f;
9    --success: #2e7d32;
10}
11
12/* Tryb wysokiego kontrastu */
13@media (prefers-contrast: high) {
14    :root {
15        --text-primary: #000000;
16        --text-secondary: #1a1a1a;
17        --bg-primary: #ffffff;
18        --accent: #6b4c00;
19    }
20}
21
22/* Tryb ciemny */
23@media (prefers-color-scheme: dark) {
24    :root {
25        --text-primary: #e0e0e0;
26        --text-secondary: #b0b0b0;
27        --bg-primary: #1a1a2e;
28        --bg-secondary: #2d2d44;
29    }
30}

Prefers-contrast i forced-colors

1/* Tryb wysokiego kontrastu */
2@media (prefers-contrast: high) {
3    button {
4        border: 3px solid currentColor;
5    }
6}
7
8/* Tryb wymuszonych kolorow (np. Windows High Contrast) */
9@media (forced-colors: active) {
10    .card {
11        border: 2px solid ButtonText;
12    }
13
14    a {
15        color: LinkText;
16    }
17
18    /* Dekoracyjne tła są usuwane - dodaj obramowania */
19    .highlight {
20        forced-color-adjust: none;
21        /* LUB zachowaj oryginalne kolory */
22    }
23}

Checklist kontrastu i typografii

1. Kontrast tekstu do tła: minimum 4.5:1 (AA) lub 7:1 (AAA)
2. Rozmiar fontu: minimum 16px (1rem) dla body
3. Interlinia: minimum 1.5
4. Szerokosc linii: 50-80 znaków
5. Nie polegaj wylacznie na kolorze
6. Wspieraj prefers-contrast i prefers-color-scheme
7. Używaj jednostek relatywnych (rem, em)

Tak jak starorzytni Egipcjanie dbali o czytelnosc hieroglifów malowanych na scianach swiatyn, tak my musimy zadbac o czytelnosc tekstu na naszych stronach - aby każdy moglr odczytac nasz przekaz, niezależnie od warunkow.