Tjek et farvepar
—
| Indhold | Krævet ratio | AA | AAA | |
|---|---|---|---|---|
| Normal tekst (< 18pt / < 14pt fed) | 4.5 : 1 | — | — | |
| Stor tekst (≥ 18pt eller ≥ 14pt fed) | 3 : 1 | — | — | |
| UI-komponenter & grafik | 3 : 1 | — | n/a | |
Eksempel på stor overskrift
Sådan ser almindelig brødtekst ud i din valgte kombination. Læselig i længden? Dine læsere afgør det på få sekunder.
Ratioerne følger WCAG 2.1 success-kriterierne 1.4.3 (Contrast Minimum), 1.4.6 (Contrast Enhanced) and 1.4.11 (Non-text Contrast). Skal fejl rettes på hele sitet? Den gratis Accessibility Scanner finder lavkontrast-tekst på en hel side.
Sådan beregnes ratioen
Hver farve konverteres til sRGB relativ luminans (L = 0.2126·R + 0.7152·G + 0.0722·B efter gamma-ekspansion). Kontrast-ratioen er (L1 + 0,05) / (L2 + 0,05), hvor L1 er den lyseste farve. En ratio på 1:1 betyder identiske farver; 21:1 er maksimum (sort på hvidt). Det matcher formlen i WCAG-specifikationen nøjagtigt.
Guide: sådan tjekker du kontrast trin for trin
← Alle gratis værktøjer · Tekst-på-billede-tjek · Hele-siden-scanner · Palette generator · English version
Ofte stillede spørgsmål
Hvad kræver AA og AAA af kontrast?
WCAG 2.x AA kræver 4,5:1 for almindelig tekst og 3:1 for stor tekst (18 pt eller 14 pt fed og op). AAA kræver 7:1 hhv. 4,5:1. Ikke-tekstlige elementer som kantfarver på formularfelter skal have mindst 3:1 under AA.
Hvordan beregnes kontrastforholdet?
Relativ luminans for begge farver beregnes efter WCAG-formlen (sRGB-værdier lineariseres og vægtes 0,2126 R + 0,7152 G + 0,0722 B), og den lyseste værdi divideres med den mørkeste plus 0,05. Resultatet ligger mellem 1:1 og 21:1.
Kan jeg teste mere end forgrund/baggrund?
Ja, du kan teste vilkårlige farvepar — også disabled-tilstande og pladsholdertekst. Bemærk at WCAG fritager logoer og rent dekorative elementer fra kravene.
Hvorfor fejler hvid tekst på min brandfarve?
Mange mellemtoner (gul, lyseblå, beige) har høj luminans, så hvid på toppen giver forhold omkring 2:1. Mørk tekst passerer ofte med det samme — prøv begge retninger, før du designer paletten om.