Tillgänglig design
Kontrastkontroll
Ange textfärg och bakgrund som hex — se kontrastkvoten och om kombinationen klarar WCAG AA och AAA.
Stor rubrik i dina färger
Brödtext i normal storlek ser ut så här.
- Kontrastkvot
- 14,68:1
- AA normal text (4,5:1)
- Godkänt
- AA stor text (3:1)
- Godkänt
- AAA normal text (7:1)
- Godkänt
| Krav (WCAG 2.2) | Kvot | Gäller |
|---|---|---|
| 1.4.3 Kontrast (AA) | 4,5:1 | Normal text |
| 1.4.3 Kontrast (AA), stor text | 3:1 | Minst 24 px, eller 18,66 px fet |
| 1.4.6 Förbättrad kontrast (AAA) | 7:1 / 4,5:1 | Normal / stor text |
| 1.4.11 Kontrast för icke-text (AA) | 3:1 | Ikoner, fältkanter, fokusmarkering |
Kvoten räknas ur relativ luminans: (L1 + 0,05) / (L2 + 0,05), där L1 är den ljusare färgen. Den går från 1:1 till 21:1.
Vanliga frågor
- Vilken kontrast krävs?
- WCAG 2.2 nivå AA kräver 4,5:1 för normal text och 3:1 för stor text och grafiska komponenter. Nivå AAA kräver 7:1 för normal text.
- Vad räknas som stor text?
- Minst 24 pixlar, eller minst 18,66 pixlar i fetstil. Det motsvarar 18 respektive 14 punkter.
- Gäller kraven i Sverige?
- Lagen om tillgänglighet till digital offentlig service hänvisar till EN 301 549, som bygger på WCAG nivå AA. Lagen om vissa produkter och tjänsters tillgänglighet gäller många privata e-handels- och banktjänster.
